Top
Customize the Pop-up templates
  • 30 Nov 2023
  • 10 Minutes To Read
  • Dark
    Light
  • PDF

Customize the Pop-up templates

  • Dark
    Light
  • PDF

Article Summary

There are three approaches to customizing your Pop-up template.

The simplest approach is using the Visual Editor. The Visual Editor enables you to design and customize the components in Whatfix Pop-ups easily, eliminating the need for JSX code editing. With the Drag-and-Drop feature, content creators can resize Pop-ups, add or delete components, and add customizations directly in the UI.

Another approach is to use the visual customization options built into the Pop-up creation screen. You can make most changes using the built-in customization options.

The other, more advanced option is to use code view for making detailed visual tweaks that aren't possible using the UI options. 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 customize the Pop-up templates using one of the following two ways:

Customize the Pop-up templates 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.
  • You can only edit the Visibility Rules of Pop-ups that were not created using the Visual Editor and cannot customize them further.

Visual Editor enables you to design and customize the components in Whatfix Pop-ups easily, eliminating the need for JSX code editing. With the Drag-and-Drop feature, content creators can resize pop-ups, add or delete components, and add customizations directly in the UI.

your title goes here
  • You can customize a Pop-up during the Pop-up creation using Whatfix Studio. To know more about creating a Pop-up, see Create a Pop-up.
  • You can also customize a Pop-up after creating it using the Edit icon on the Dashboard.
    Edit_popup_DB

Use Cases

Add an extra button

Use the following steps to add an extra button in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, hover your cursor over the button corner, and then click to open the button configuration menu.
    RTE_Button_Edit

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component

  3. On the Add Component dialog box, click Button.
    click_button.png

The button gets added.

your title goes here

You can also make the following changes in the button configuration menu:

  • Change the button Type to Primary or Secondary.

change_button_type

  • Click the Button Style icon to change the Color, Hover color, and Corner radius of the button.

Change_button_style

  • Click the Button Resize icon to resize the button.

change_button_size

  • Click the Horizontal Align icon to align the button horizontally.

button_horizontal _align

  • Click the Vertical Align icon to align the button vertically.

click_align_button2

your title goes here
  • Using the Drag and Drop feature, you can move/re-position the button around the Pop-up.
  • Using the Drag Handlers, the button can be moved/re-positioned both vertically (column-wise) and horizontally (row-wise).

Button_DND

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add an Image/GIF

Use the following steps to add an image in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, double-click the text to open the Rich Text Editor.
    Click_RTE

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component_icon

  3. On the Add Component dialog box, click Image.
    click_image

  4. Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery.
    click_add_img

your title goes here
  • The image URL must contain https if the Pop-up is displayed on a secure webpage.
  • GIFs can also be added using the image dialog box.
  • Only .jpg and .png image formats that are up to 4 MB in size are supported.
  1. Click Insert.
    click_insert

The image gets added.

your title goes here
  • Using the Drag and Drop feature, you can move/re-position the image around the Pop-up.
  • Using the Drag Handlers, the image can be moved/re-positioned both vertically (column-wise) and horizontally (row-wise).

Image_DND

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add a video

Use the following steps to add a video in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, double-click the text to open the Rich Text Editor.
    Click_RTE

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component_icon

  3. On the Add Component dialog box, click Video.
    Click_Video_Addcomponent

  4. Paste the video URL.
    Insert_video_url.png

your title goes here

The video URL must contain https if the pop-up is displayed on a secure webpage.

  1. Click Insert.
    Click_insert_video
your title goes here
  • Using the Drag and Drop feature, you can move/re-position the video around the Pop-up.
  • Using the Drag Handlers the video can be moved/re-positioned both vertically (column-wise) and horizontally (row-wise).

video_dnd

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add an extra Text box

Use the following steps to add an extra Text box in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, double-click the text to open the Rich Text Editor.
    Click_RTE

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component_icon

  3. On the Add Component dialog box, click Text.
    Click_Text

The Text box gets added.

your title goes here
  • Using the Drag and Drop feature, you can move/re-position the Text box around the Pop-up.
  • Using the Drag Handlers the video can be moved/re-positioned both vertically (column-wise) and horizontally (row-wise).

DND_Textbox

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add Pop-up background customizations

You can customize the Pop-up background color and background image directly in the UI using the Visual Editor.

  • To change the Pop-up Background Color, under CONTROL, choose the color from the existing color palette or enter the hex code of the desired color.
    under_control_click

  • To add a Pop-up Background Image, under CONTROL, click Upload image.
    click_upload_image

  • Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery.
    click_upload_img

your title goes here
  • Only .jpg, and .png image formats that are up to 4 MB in size are supported.
  • The Pop-up Background Image and Color can be changed only using Whatfix Studio and not the Dashboard.

Similarly, you can mix and match multiple components, and create your own custom template.

Customize the Pop-up templates using the code view

your title goes here

Before you customize your template, as a best practise, duplicate the template to create a backup copy. This makes it easy to discard your changes and prevents any unexpected content loss.

Access the Code View of the template
Customize the template using Code View
Use Cases


Access the code view of the template

Use the following steps to access the code view of the Pop-up template:

  1. On the Pop-up edit screen, click the code view icon to access the template code.
    studio_pop-up_editor code view

  2. Once you've edited the code, click the play icon to preview the changes.
    studio_pop-up_editor_ play button


Customize the template using the code view

In the code view, you can directly work on the template's HTML code to make changes.

The template does not allow javascript (JSX) or HTML components of your own. You can find the list of supported components in this article. Copy and paste the relevant JSX and Desktop CSS code of the component you want to use.

your title goes here

Click the following components to expand.

Title

JSX

<WfxTitle id="segment_title_1"
        className="templateTitle"
        titleContent={getRTEContent("segment_title_1")}
        saveListener={contentChangeListener} />

Desktop CSS

.templateTitle {
 margin-left: 5%;
 margin-right: 5%;
 position: relative;
 font-weight: 600;
 font-size: 18px;
 line-height: 25px;
 text-align: center;
 overflow: hidden;
 color: #596377;
 max-height: 100px;
 min-height: 25px;
 width: 90%;
 top: 40px;
}

Description

JSX

<WfxDescription id="segment_desc_1"
        className="templateDescription"
        descContent={getRTEContent("segment_desc_1")}
        saveListener={contentChangeListener} />

Desktop CSS

.templateDescription {
 margin-left: 5%;
 margin-right: 5%;
 position: relative;
 font-weight: normal;
 font-size: 14px;
 width: 401px;
 line-height: 19px;
 text-align: center;
 overflow-y: auto;
 overflow-x: hidden;
 -wrap: break-word;
 color: #6c798e;
 max-height: 235px;
 min-height: 40px;
 width: 90%;
 margin-top: 50px;
}

Button

JSX

<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} />

Desktop CSS

.popupBtn {
 background: #f4f5f7;
 border: none;
 color: white;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 14px;
 font-weight: normal;
 width: 136px;
 height: 34px;
 margin-left: 10px;
 border-radius: 3px;
 vertical-align: top;
 outline: none;
 transition: 0.2s ease;
 word-break: break-all;
 overflow: hidden;
}

.popupSkipBtn {
 background: #f4f5f7;
 border: none;
 color: #6c798e;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 14px;
 font-weight: normal;
 width: 136px;
 height: 34px;
 margin-right: 10px;
 border-radius: 3px;
 vertical-align: top;
 outline: none;
 transition: 0.2s ease;
 word-break: break-all;
 overflow: hidden;
}

Image/GIF

JSX

<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} />

Desktop CSS

.wfxImageContainer {
 height: 90px;
 width: 100%;
 margin-top: 50px;
}

.wfxMedia {
 vertical-align: middle;
 max-width: 100%;
 max-height: 100%;
}

Avatar image/GIF/video

JSX

<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")} />

Desktop CSS

.wfxImage {
 height: 100px;
 width: 100px;
 border-radius: 50%;
}

.wfxImageContainer {
 height: 100px;
 width: 100px;
 top: -36px;
 position: relative;
 margin: 0 auto;
}

.wfxMedia {
 vertical-align: middle;
 max-width: 100%;
 max-height: 100%;
}

Survey forms

JSX

<WfxSurvey id="survey_1"
    className="wfxSurvey"
    surveyURL={getSurveyURL("survey_1")}
    sourceChangeListener={updateSurvey} />

Desktop CSS

.popupCenterAlign {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.WfxSurveyImage {
    width: calc(100% - 60px);
    height: 100%;
    margin: 30px 30px 25px 30px;
    position: relative;
}

.WfxSurveyFrame {
    margin: 30px 30px 25px 30px;
    height: 418px;
    width: calc(100% - 60px);
    position: relative;
    border-width: 0px;
}

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.

JSX

<WfxDiv className="popupTemplateFooter">
</WfxDiv>

Desktop CSS

.popupTemplateFooter {
  padding-top: 30px;
  padding-bottom: 20px;
  text-align: center;
  bottom: 15px;
  left: 0;
  right: 0;
}


Use Cases

Add an extra button

If you want to include an extra button in the pop-up, then you can use the button component.

  1. Copy the button component code.

  2. Open the template code view.
    studio_pop-up_code db

  3. Scroll down to the section where exactly you want to add the button.

  4. Paste the copied code.
    Dashboard_Popup_Customize_button_code

  5. Click the play button to add the button.
    studio_pop-up__play button db

your title goes here

If the additional button doesn't fit then try resizing the pop-up width.

  1. Finally, customize the button color, label, and size.
    studio_Popup_Button_Configuration

Increase the button character limit

By default, the buttons in Whatfix Pop-up templates allow up to 15 characters. You can increase the character limit by including the charlimit parameter in the relevant button component.

  1. Open the template code view.
    studio_pop-up_code db

  2. Scroll down to the button component section for which you want to increase the character limit.

  3. Add the charlimit parameter followed by the value as shown in the following image.
    studio-popup-button-label

  4. Click the play button.
    studio_pop-up__play button db

  5. Click Save to save the character limit changes.
    studio_edit carousel_save

  6. Click the Edit button on the pop-up and change the button label based on the updated character limit.
    studio_pop-up_edit

Add survey forms to any pop-up template

By default, you can embed survey forms in a Pop-up using only the Surveys/Opinions template. However, you can embed survey forms in any template you prefer by using the Survey form component.

  1. Copy the survey form component code.

  2. Open the template code view.
    studio_pop-up_code db

  3. Scroll down to the section where you want to add the survey form.

  4. Paste the copied code.
    studio_popup_surveycode

  5. Click the play button to add the component.
    studio_pop-up__play button db

  6. Click Insert Survey Link and enter the survey form URL.
    clm_pop-up_insert link

Add text to a vivid pop-up template

You won't be able to add text to a Vivid Pop-up template by default. But you can add text to the template by embedding the description component listed above.

  1. Copy the description component code.

  2. Open the template code view.
    studio_pop-up_code db

  3. go to the section in the code where you want to add the text.

  4. Paste the copied code.
    studio_popup_description code

  5. Click the play button to add the component.
    studio_pop-up__play button db

  6. Add the necessary text in the text box that is displayed.
    studio_Pop-up_desc_type something

  7. Click Save.
    studio_edit carousel_save

Similarly, you can mix and match multiple components and create your own custom template.


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
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.