Interested in adding pop-up messages to your Certainly Widget? Great! This proactive messaging will increase the engagement of your website audience with your Certainly bot.
The implementation requires the addition of the certainly_popups.js extension to your web deployment. Below, we'll explore the various properties of the pop-up object, how to configure the pop-up messages, and some example use cases.
The pop-up object
Each pop-up rule is made of the following properties:
| Property | Description |
| id (str) |
A unique identifier for the rule. It cannot be shared between multiple rules. It will be passed as a Custom Variable (CVar) to the conversation so that you can use it to customize the starting flow of your chatbot. The id of the active pop-up is passed to the conversation under CVarcurrent_popup. |
| trigger (str) |
The following options are available: "page_load" and "chat_minimized". Other triggers are under development, reach out to support@certainly.io to learn more. |
| condition (bool or function) |
Whether the rule is active or not. It can be used to customize the scenario in which the pop-up should be active. For instance, a function could check for the current page URL and set the condition to either trueor false. |
| delay (int) |
Controls after how much time, specified in milliseconds, the active pop-up message should be rendered. If the trigger is set to "page_load", then it refers to how long the rendering should wait once the webpage has been loaded. If the trigger is set to "chat_minimized", then it refers to how long the rendering should wait once the chat has been minimized. If the trigger is set to "visitor_inactive", then it refers to how long the visitor should be inactive on the site for the pop-up message to be rendered. |
| repeat_after (int) |
Controls how often the active pop-up rule should be rendered. If set to 0, then it will be rendered every time. If set to 2, then it will be rendered upon the first visit, and then again on the third visit. |
| desktop (bool) |
Whether the rule should be enabled on desktop devices. |
| mobile (bool) |
Whether the rule should be enabled on mobile devices. |
| messages (array) |
A list of objects containing a language property (str) and a texts property (array). |
|
start_from_module
(string) |
Overrides the default starting Module of the Certainly bot. If empty, then the bot will start from the default starting Module. It is recommended to leave it empty and use the CVar current_popup in the default starting Module to route the conversation to custom openers. |
Configuration
- Declare the configuration object for your Certainly Widget inside a variable called certainly_settings. Make sure you do not init the Certainly Widget via the initCertainlyWidget() function.
- Ensure that the configuration object includes Custom Variable language and that it is set up to match the language of your bot's pop-up messages.
- Define another variable, CERTAINLY_POPUPS, that will hold the rules for the pop-ups.
- Embed the certainly_popups.css default stylesheet via the following HTML snippet: <link rel="stylesheet" href="https://scripts.certainly.io/extensions/certainly_popups/certainly_popups.css">
- Embed the certainly_popups.js extension via the following HTML snippet: <script src="https://scripts.certainly.io/extensions/certainly_popups/certainly_popups.js"></script>
- At the end, your deployment should look like this:
Note that you can specify as many pop-up rules as you want. However, please keep in mind that in the case of conflicts between two or more rules with the same trigger, only the first one in the list will be rendered.
Example use cases
Here, you can find different example scenarios and their corresponding rules.
Pop-up for a specific product page
If you want to show a custom message on a specific page, but not on others. For instance, you want to render a custom message on the following product page: https://shopname.com/products/blue-jeans
Pop-up for a specific URL parameter
In the case that you want to match a referral parameter in the current URL. For example, the URL is as follows: https://shopname.com/products/product_title?ref=social_media
Catching the referral pop-up on chat start
The active pop-up ID is passed to the Certainly bot under CVar current_popup. You can catch it in your bot's default starting Module as shown here:
This way, the bot will actually start a conversation from the <md>Blue Jeans Start Module whenever the visitor is visiting the page https://shopname.com/products/blue-jeans. We recommend leaving your default starting Module with empty messages, and to use it only as a router for the actual conversation openers of your bot.