Top
Login
Contents x
Remove a module from a Pop-up template
  • 30 Nov 2023
  • 2 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Remove a module from a Pop-up template

  • Updated On 30 Nov 2023
  • 2 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article Summary

There are two approaches to removing a component/module from a Pop-up template:

The simplest approach is to use the Visual Editor, in which you can remove a component from a Pop-up directly using the UI without the need for JSX code editing.

The other, more advanced option is to use the code view for removing a component/module from a Pop-up. The code view gives access to the template's HTML, CSS, and Javascript (JSX) code to make advanced customization. The code view is available for any template that you select. For more information, see Choose the Pop-up Template.

You can remove a component/module from a Pop-up using one of the following two ways:

Remove a module from a Pop-up template using the Visual Editor
your title goes here
  • Visual Editor is a Beta feature. To enable the feature, contact support@whatfix.com.
  • Once you enable the Visual Editor, you won’t be able to go back to the old experience.
  • Once the Visual Editor is enabled, Pop-ups can only be created using Whatfix Studio, and not using the Dashboard.
  • After creating Pop-ups using the Visual Editor, you can edit them using the Dashboard.
  • Pop-ups that are not created using the Visual Editor cannot be customized further but their visibility rules can be edited.

Visual Editor enables you to remove certain components that you do not wish to use in a template directly using the UI without needing to edit the JSX code.

Use the following steps to remove a component using the Visual Editor:

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Pop-ups.
    ia_widget_popups

  3. Hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
    CLM_DB_Click_edit_icon.png

3. Click the component you want to remove.  

4. On the Image Froala Toolbar, click the Delete icon.

Note
The component gets removed from the Pop-up.


Remove a module from a Pop-up template using the code view

Using the code view, you can remove certain sections (called modules) that you do not wish to use in a template. Deleting the JavaScript (JSX) code of the particular component removes it from the template as well.

Use the following steps to remove a module using the code view:

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Pop-ups.
    ia_widget_popups

  3. Hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
    CLM_DB_Click_edit_icon.png

  1. Click the code view icon to access the template code.studio_pop-up_code db
  2. Remove the code of the component that you want to exclude from the template using the information in the following table.

Expand the following section to view different components of a Pop-up template and its respective JavaScript code.

Pop-up components
ComponentJSX
Title
<WfxTitle id="segment_title_1"
        className="templateTitle"
        titleContent={getRTEContent("segment_title_1")}
        saveListener={contentChangeListener} />
Description
<WfxDescription id="segment_desc_1"
        className="templateDescription"
        descContent={getRTEContent("segment_desc_1")}
        saveListener={contentChangeListener} />
Button
<WfxButton id="segment_prim_btn_1"
            className="wfx_primary_button"
            selectedButtonEvent={getButtonEventType("segment_prim_btn_1")}
            selectedButtonValue={getButtonEventValue("segment_prim_btn_1")}
            buttonStyle={getButtonStyle("segment_prim_btn_1")}
            buttonText={getButtonText("segment_prim_btn_1")}
            buttonHoverColor={getButtonHoverColor("segment_prim_btn_1")}
            buttonCornerRad={getButtonCornerRad("segment_prim_btn_1")}
            buttonColor={getButtonColor("segment_prim_btn_1")}
            buttonChangeListener={updateButton} />
Image/GIF
<WfxMedia id="segment_image_1"
    className="wfxMedia"
    height={getImageHeight("segment_image_1")}
    width={getImageWidth("segment_image_1")}
    sourceURL={getImageSource("segment_image_1")}
    alternateText={getImageAltText("segment_image_1")}
    video={getisVideo("segment_image_1")}
    imageChangeListener={updateImage} />
Avatar image/GIF/video
<WfxAvatar id="avatar_1"
        className="Wfx_avatar"
        defaultURL={getImageSource("avatar_1")}
        changeListener={updateImage}
        height={getImageHeight("avatar_1")}
        width={getImageWidth("avatar_1")}
        video={getisVideo("avatar_1")}
        alternateText={getImageAltText("avatar_1")} />
Survey Forms
<WfxSurvey id="survey_1"
    className="wfxSurvey"
    surveyURL={getSurveyURL("survey_1")}
    sourceChangeListener={updateSurvey} />
Div box

A component to render a <div> element as a container, all the children of WfxDiv will render inside a <div>

We can define any className for this and write the CSS using that class selector.
<WfxDiv className="popupTemplateFooter">
</WfxDiv>


Note
Once you've removed the code of a component, click the play icon to preview the changes.


Was this article helpful?
What's Next
Privacy Policy | Whatfix Glossary | Whatfix Platform Status
Copyright © 2024 WHATFIX TM. All rights reserved.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
Logout