Top
Login
Contents x
Customize Pop-up templates
  • 11 Mar 2024
  • 4 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Customize Pop-up templates

  • Updated On 11 Mar 2024
  • 4 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article Summary

There are two approaches to customizing your pop-up template.

The simplest 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.

Info:

Before you customize your template, as a best practice, duplicate the template to create a backup copy. This makes it easy to discard your changes and prevent 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

You can customize both an existing pop-up and a new pop-up.

Use the following steps to access the code view on the dashboard,

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

  2. Click Pop-ups.
    ia_widget_popups

   3. Edit an existing Pop-up using the edit button.

     studio_pop-up_edit

Your title goes here
You can also edit the code view of the Pop-up while creating it.

   4. Click the code view icon to access the template code.
      studio_pop-up_code db

Note

You can now edit the template code.

      5. Once you've edited the code, click the play button to preview the changes.
       studio_pop-up__play button db

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 below. Copy and paste the relevant JSX and Desktop CSS code of the component you want to use.

ComponentJSXDesktop CSS
Title
JavaScript
JavaScript
JavaScript
<WfxTitle id="segment_title_1"
        className="templateTitle"
        titleContent={getRTEContent("segment_title_1")}
        saveListener={contentChangeListener} />
ActionScript
ActionScript
ActionScript
.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
JavaScript
JavaScript
JavaScript
<WfxDescription id="segment_desc_1"
        className="templateDescription"
        descContent={getRTEContent("segment_desc_1")}
        saveListener={contentChangeListener} />
ActionScript
ActionScript
ActionScript
.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
JavaScript
JavaScript
JavaScript
<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} />
ActionScript
ActionScript
ActionScript
.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
JavaScript
JavaScript
JavaScript
<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} />
ActionScript
ActionScript
ActionScript
.wfxImageContainer {
 height: 90px;
 width: 100%;
 margin-top: 50px;
}
 
.wfxMedia {
 vertical-align: middle;
 max-width: 100%;
 max-height: 100%;
}
Avatar image/GIF/video
JavaScript
JavaScript
JavaScript
<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")} />
ActionScript
ActionScript
ActionScript
.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
JavaScript
JavaScript
JavaScript
<WfxSurvey id="survey_1"
    className="wfxSurvey"
    surveyURL={getSurveyURL("survey_1")}
    sourceChangeListener={updateSurvey} />
ActionScript
ActionScript
ActionScript
.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.
JavaScript
JavaScript
JavaScript
<WfxDiv className="popupTemplateFooter">
</WfxDiv>
ActionScript
ActionScript
ActionScript
<!--JSX -->
<WfxDiv className="popupTemplateFooter">
 
<!--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 from the table above.

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

Info:

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

6. Finally, customize the button colour, 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 image below.
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 the Pop-up only using the Surveys/Opinions template. But using the Survey form component you can embed survey forms in any template you prefer.

1. Copy the survey form component code from the table above.

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

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

4. Paste the copied code.
studio_popup_surveycode

5. Click the play button to add the button.
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 from the table above.

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. For more information, see Custom Pop-up templates.

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