In this article, we'll explain how to add pop-up messages to your Certainly Widget. This functionality increases 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.
Each pop-up rule is made of the following properties: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.>