This article provides a nontechnical explanation of the configuration of the Certainly Widget. We'll explain how to go live using the Certainly Widget, as well as how to customize both its behavior and styling. Below, we'll cover:
- How to implement the Certainly Widget
- How to customize the behavior of the Certainly Widget
- How to style the Certainly Widget
Feel free to grab your web designer before we dive any deeper!
How to implement the Certainly Widget
The widget script will enable the chatbot icon on your website. To access this, open the right sidebar menu on your bot-building canvas and select Bot Settings. Navigate to Channels > Certainly Widget.
Underneath the title "Embed the Chatbot Widget on your website" is the script you'll need to copy. The script should be pasted right before the </body> tag on your website. Then a button will be displayed on the lower right side of the website.
This is the standard out-of-the-box Certainly Widget. Keep reading to learn how to change the widget's behavior and style it!
You can also check out our technical explanation of implementing the Certainly Widget.
How to customize the behavior of the Certainly Widget
In this section, we’ll explore the various ways you can alter the behavior of the Certainly Widget. We'll help you:
- Find your bot’s deployment ID
- Resume existing conversations with end users
- Enable autoload
- Display the debugger alongside the chat
- Identify each chat instance when multiple bots are deployed
- Set the webchat greeting text
- Clear past conversations
- Pass Custom Variables through your script
- Start the widget at a specific Module
- Enable voice control
Find more info and the code snippets for these properties in our technical article.
Find your bot’s deployment ID
The deployment ID (
id) of your chatbots links the script specifically to your bot. The value may also include some referrer ID as a URL parameter, which will take the bot to launch the conversation on that specific Module.
The bot deployment ID can be found in Bot Settings. After you navigate to Channels > Certainly Widget, you just need to locate “id” in the widget script. The value found here is the deployment ID for that bot.
Resume existing conversations with end users
When the widget is placed within a secured area (behind log-in session), it may be handy to store the uId (
uid) of the end user together with other session metadata, so the host can use it later in another browser or device to resume the existing conversation with that logged-in user.
The uId identifies an existing Certainly conversation. If specified, Certainly will resume the existing conversation instead of starting a new session. You can retrieve the uId through the certainly.getUid() method.
Using autoload (
autoload) can make your bot automatically pop up. This is great if you want to initiate contact with the customer using your bot. Please note, this functionality does have some channel limitations.
The autoload functionality can be configured directly from the bot-building canvas. Access Bot Settings from the right sidebar menu, navigate to Channels > Certainly Widget, then select the Autoloading tab in the Default Styling section.
To use this feature, you have to set a specific time in seconds, a scroll down in pixels, or a mix of both.
You’ll want to consider how best to engage the end user with the bot. For some, it can be better to wait a certain amount of time before the chatbot pops up, to be sure the user is on a relevant site and won’t immediately bounce. Engagement can also be translated into scrolling: if a customer scrolls down, it could be a sign they are looking for something or reading.
When the bot pops up, it only showcases the bot avatar and greeting message until the user clicks the text field. When the text field is clicked, the bot starts firing messages based on the starting Module or referral URLs you’ve inserted into the script.
For live bots, be aware that when you add a time and/or scroll in pixels, lines of code must be added to your chatbot’s script.
Display the debugger alongside the chat
Displaying the debugger is especially useful when developing your bots. By adjusting this property, you can follow the path the bot takes through the conversation and identify areas needing improvement while you're testing your bot on your website.
Below you can see the debugger displayed when testing. Click the gray left arrow at the bottom center to hide it.
You can display or hide the debugger via the script with the
Identify each chat instance when multiple bots are deployed
webchatKey is a unique identifier for the webchat widget. It is helpful when you have multiple widgets deployed on the same webpage and want to, for instance, link particular actions to them.
Set the webchat greeting text
You can edit the greeting (
greetingText) at the top of your widget in Bot Settings, accessed via the right sidebar menu. This could be a welcome message for site visitors or your bot's name. The greeting appears directly below your bot’s avatar.
Clear past conversations
mode property can be set to
"clear_past_conversations" to ensure that the bot deletes previous messages when a user returns. Then any page reload will result in the chat starting from scratch.
Pass Custom Variables through your script
It can be useful to pass Custom Variables (
cvars) through your script when, for example, you want to assign a specific tag to customers who have access to a particular webpage. These Custom Variables can then be used throughout a conversation.
Start the widget at a specific Module
Want to integrate your bot on several pages but greet users in different ways? You can do this by using referral URLs.
To find a Module's referral URL, you will have to go to the Message or Connections tab of the Module that you want to be the starting Module for that page. Once there, you'll click “Copy URL link”. A pop-up window will appear, and you can then copy the script for your website.
This script should be inserted in an HTML file before the </body> tag. You can do this with a number of different Modules and insert them into the different subpages you have. In that way, the chatbot will start differently on multiple pages.
You can also learn about passing a Module ID of the bot as
ref in the technical explanation of this property.
Enable voice control
As of October 20th, 2020, the Certainly Widget supports voice control. Certainly Voice leverages the browser's built-in text-to-speech and speech-to-text functionalities. To enable this feature, refer to our technical explanation of the voice properties.
How to style the Certainly Widget
In this section, we’ll address the various ways you can style the Certainly Widget. Styling can be a crucial part of integrating your chatbot onto your website, as the format, look, and call to action can be essential to attracting traffic to your bot.
We’ll explain how to edit the following properties to customize the widget's appearance:
- Window dimensions
- Button icon
- Button dimensions
- Button positioning
- Button color
- Background color
- Message styling
Find more info and the code snippets for these properties in our technical article.
If you want to adjust the size of the chat, you can change the width and height of the webchat window. These are measured in pixels. You will want to make sure that these properties are set in accordance with each other to maintain the desired ratio.
You can edit this in the Certainly Widget Default Styling options of Bot Settings > Channels, shown below. The “Widget Size” fields allow you to adjust the dimensions by pixels or the percentage of the browser window you want the widget to take up.
Or, adjust using the
height properties within the script.
The standard chatbot widget icon can be replaced with a custom image. You can also change the icon based on whether the webchat window is closed or open. To do this, you'll need the URL of the photo you want to replace the standard icon with.
To adjust the icon, read about
buttonLogoClose in our technical article.
If you want to change the size of the widget icon, you can adjust the width and height of the button in pixels. Make sure the width and height are set in accordance with each other. If you have customized your button icon, set these dimensions to align with the width and height of the image you have selected.
Learn how to adjust the
buttonHeight in our technical guide.
You can decide where the widget button lies in respect to the right and bottom side margins of the browser window. These are measured in pixels. Set the distance from the
bottom side margins via the script using our technical resource.
It is also possible to adjust the
zIndex, which specifies the stack order. This determines where the widget is in relation to other elements on the webpage. The greater the stack order, the further to the front the Certainly Widget will be.
You can change the color of the chatbot widget’s button. Navigate to Bot Settings > Channels > Colors, then select the desired color for "Opening button" under “Widget”. If you're using a custom image as a button icon, that image will take priority over your color settings.
The button color changes when the widget is opened. Here, you can see an example of the default button colors as well as an instance where a different color has been selected:
Note that you can also adjust the color of the "Send button" from this screen. A customized example is shown below.
You can also use our technical article to learn how to customize the
buttonColor in the script.
The background color of the widget can be set to a specific color code, as shown below, or you can make it transparent.
Adjust this under “Background” in the Colors tab of the Certainly Widget Default Styling options. Alternatively, refer to our technical guide to set the
background color within the script.
You can choose between different fonts available by default, or you can use a custom font. Navigate to Bot Settings > Channels > Certainly Widget. Under the Font tab, you can select one of the predefined fonts:
Or select the option "Custom Font" to define your own font-face inside the editor and apply it to the Certainly Widget:
Here, you can see an example font-face declaration for the font "akzidenz-grotesk":
src:url("https://use.typekit.net/af/5556ca/000000000000000000013635/27/l?subset_id=1&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/5556ca/000000000000000000013635/27/d?subset_id=1&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/5556ca/000000000000000000013635/27/a?subset_id=1&fvd=n4&v=3") format("opentype");
This is where you can get super specific when it comes to aligning with your brand identity and styling preferences!
In Bot Settings > Channels > Certainly Widget > Colors, several color options can be selected beyond those we've already discussed in this article. This includes the font and background colors of the bot message buttons, as well as the font, links, and background colors of both the bot and user messages.
And, with some simple script adjustments, you can even change the following:
- Color of background and text of Cards
- Border and shadow of Cards
- Background color and box shadows of the widget header
- Background color and border of the user input field
Here is one example of how a bot could be styled differently from the default settings:
You can view all the message styling options in our technical description of the
Looking for something not addressed above? Just reach out to our Customer Success team!