In this article, we'll explain how to add pop-up messages to your Codemonkey Widget. This functionality increases the engagement of your website audience with your Codemonkey 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:
|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 CVar
|trigger (str)||The following options are available:
|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
|delay (int)||Controls after how much time, specified in milliseconds, the active pop-up message should be rendered. If the trigger is set to
|repeat_after (int)||Controls how often the active pop-up rule should be rendered. If set to
|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).|
|Overrides the default starting Module of the Codemonkey bot. If empty, then the bot will start from the default starting Module. It is recommended to leave it empty and use the CVar
- Declare the configuration object for your Codemonkey Widget inside a variable called certainly_settings. Make sure you do not init the Codemonkey Widget via the
- 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:
- 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 Codemonkey 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.