- 30 Aug 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Customize Pop-up templates
- Updated On 30 Aug 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
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. Use the the built-in customization options to make changes.
The other option uses the code view to make 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.
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
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:
-
On the Whatfix Guidance dashboard, click Widgets.
-
Click Pop-ups.
3. Edit an existing Pop-up using the edit button.
4. Click the code view icon to access the template code.
You can now edit the template code.
5. Once you've edited the code, click the play button to preview the changes.
Customize the template using the code view
In the code view, work directly 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.
Component | JSX | Desktop CSS |
---|---|---|
Title | JavaScript JavaScript
| ActionScript ActionScript
|
Description | JavaScript JavaScript
| ActionScript ActionScript
|
Button | JavaScript JavaScript
| ActionScript ActionScript
|
Image/GIF | JavaScript JavaScript
| ActionScript ActionScript
|
Avatar image/GIF/video | JavaScript JavaScript
| ActionScript ActionScript
|
Survey forms | JavaScript JavaScript
| ActionScript ActionScript
|
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
| ActionScript ActionScript
|
Use cases
If you want to include an extra button in the Pop-up, then use the button component.
1. Copy the button component code from the table above.
2. Open the template code view.
3. Scroll down to the section where exactly you want to add the button.
4. Paste the copied code.
5. Click the Play button to add the button.
If the additional button doesn't fit then try resizing the pop-up width.
6. Finally, customize the button colour, label, and size.
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.
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.
4. Click the play button.
5. Click Save to save the character limit changes.
6. Click the Edit button on the pop-up and change the button label based on the updated character limit.
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.
3. Scroll down to the section where exactly you want to add the survey form.
4. Paste the copied code.
5. Click the play button to add the button.
6. Click Insert Survey Link and enter the survey form URL.
You won't be able to add text to a Vivid Pop-up template by default. However, 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.
3. Go to the section in the code where you want to add the text.
4. Paste the copied code.
5. Click the play button to add the component.
6. Add the necessary text in the text box that is displayed.
7. Click Save.
Similarly, you can mix and match multiple components and create your own custom template. For more information, see Custom Pop-up templates.