Add pop-up messages to your Codemonkey Widget

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.

popup_extension.gif

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", "chat_minimized" and "visitor_inactive".
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 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 current_popup in the default starting Module to route the conversation to custom openers.

Configuration

  1. 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 initCodemonkeyWidget() function.

  2. 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.

  3. Define another variable, CERTAINLY_POPUPS, that will hold the rules for the pop-ups.

  4. 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">

  5. Embed the certainly_popups.js extension via the following HTML snippet: <script src="https://scripts.certainly.io/extensions/certainly_popups/certainly_popups.js"></script>

  6. 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:

mceclip3.png

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.

Was this article helpful?

0 out of 0 found this helpful
Have more questions? Submit a request

Comments (0 comments)

Please sign in to leave a comment.