Configuration of the Certainly Widget: Nontechnical explanation

This article provides a nontechnical explanation of the configuration of the Certainly Widget.

Below, we'll explain how to go live using the Certainly Widget, as well as how to customize both its behavior and styling.

We'll address:

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. 

copyscript.jpg

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

mceclip0.png

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.

Enable autoload

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.

autoloadbot.jpg

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.

debugger.jpg

You can display or hide the debugger via the script with the debuggerMode parameter.

Identify each chat instance when multiple bots are deployed

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

botgreetingtext__1_.jpg

Clear past conversations

By default, a bot is set to display prior conversations to returning users.

However, you can ensure that previous messages are deleted by disabling the "Show Previous Conversations" feature. Once disabled, any page reload will result in the chat starting from scratch. To do so, navigate to Bot Settings > Channels > Certainly Widget. Select the Widget tab under "Default Styling", then scroll to the "Conversation" section shown here:
conversations

Alternatively, set the mode property to clear_past_conversations directly in the script.

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.

urllink.gif

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:

Find more info and the code snippets for these properties in our technical article.

 

Widget size

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.

To edit this, navigate to Bot Settings > Channels > Certainly Widget, then select the Widget tab under "Default Styling", as 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.
widgetsize1

Or, adjust using the width and height properties within the script.

Widget position

Similar to Widget size, the "Widget Position" fields allow you to adjust where the widget is located within the browser window. You can decide where the widget button lies in respect to the right and bottom side margins, measured in pixels.

It is also possible to adjust the z-index, 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.

widgetposition

You can also edit the right, bottom, and zIndex properties via the script using our technical resource.

Button icon

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 buttonLogoOpen and buttonLogoClose in our technical article.

Button dimensions

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 buttonWidth and buttonHeight in our technical guide.

Button color

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.

backgroundcolor.jpg

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:

buttoncolor.jpg

Note that you can also adjust the color of the "Send button" from this screen. A customized example is shown below.

send_button.jpg

You can also use our technical article to learn how to customize the buttonColor in the script.

Background color

The background color of the widget can be set to a specific color code, as shown below, or you can make it transparent.
widgetbackgroundcolor

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.

Fonts

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:

mceclip2.png

Or select the option "Custom Font" to define your own font-face inside the editor and apply it to the Certainly Widget:

mceclip0.png

Here, you can see an example font-face declaration for the font "akzidenz-grotesk":

@font-face {
font-family:"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");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

#app {
font-family: akzidenz-grotesk;
}

Message styling

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.

messagestyling.jpg

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:

widgetstylingoptions.png

You can view all the message styling options in our technical description of the chatMessage object.

Looking for something not addressed above? Just reach out to our Customer Success team!