How to insert the chatbot in an iframe

An iframe will look like an open chat on your website. Below, you'll find a description of how to implement your chatbot in an iframe, as well as examples of the parameters you can append to the script. 

We will cover these topics:

• Inserting the chatbot in an iframe
• Adding parameters to your iframe script
• Passing Custom Variables (CVars) when loading the iframe
• Making the bot require action before starting the conversation

Inserting the chatbot in an iframe

What follows here is how the code snippet should look if you're trying to insert the chatbot in an iframe without any additional alterations. Consider this the default setting.

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>

To use this code for your chatbot, you will have to replace the InsertUUIDhere string with the deployment UUID of your bot. To find the deployment UUID, navigate to Bot Settings>Channels>Certainly widget, and locate id in the widget script. The value of id is the deployment UUID.

Alternatively, you can append a number of parameters in order to change the styling or behavior of the script. 

Before making changes to the default script, you should be aware of a few things:

• Prior to adding the first parameter, you must add "/?" after the UUID:

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?"

• If you're adding more than one parameter, you must add "&" after the first parameter:

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?ref=InsertReferralIDhere&mode=clear_past_conversations"

Adding parameters to your iframe script

Below you'll find a list of the following ways in which you can append parameters in your iframe script:

• Clear_past_conversations
• Referral ID
• Background
• Enabling No Delay Mode
• Passing webchat_key
• All parameters used together

Clear_past_conversations

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?mode=clear_past_conversations"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>

Referral ID

For appending the referral ID to the script, we recommend also including the "clear_past_conversations" parameter. It does technically work without it, but the user experience can be quite jarring if it is a returning end user.

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?mode=clear_past_conversations&ref=InsertReferralIDhere"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>

Background

The snippet of code that follows makes the background transparent.

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?mode=clear_past_conversations&background=transparent"
height=360 width=360 frameborder=0 name="bot-iframe" style=""></></iframe>

If you want to make the background a specific color, you'll need to first find which HTML color code you want, and after that, you must add "%23" to replace the "#" of the HTML color code, as shown here:

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?background=%23F2F2F2"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>

Enabling No Delay Mode

This parameter removes all delay. We recommend using this when testing your bot, as it speeds up the process of testing your conversation flows. 

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?no_delay_mode=true"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>

Passing webchat_key

This parameter is useful when you want to embed more than one bot on a single page. You can only embed two different bots, not two instances of the same bot.

<iframe src="https://app.certainly.io/webchat/InsertFirstUUIDhere/?webchat_key=1"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>
<iframe src="https://app.certainly.io/webchat/InsertSecondUUIDhere/?webchat_key=2"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>
</body>

All parameters used together

The parameters noted above are able to be used all together in the same iframe script, as shown here:

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?ref=InsertReferralIDhere&mode=clear_past_conversations&background=transparent&no_delay_mode=true&webchat_key=1"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>

Passing Custom Variables (CVars) when loading the iframe

This is a very interesting feature that allows setting a group of CVars that the bot will recognize and use in the conversation decisions and/or messages. Usually these variables are added as a json object dictionary, but they can also be "stringified" in the following format as a URL query param:

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?cvars=key1^*Value1!*^|key2^*Value2!*^"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>

It is important to note that both CVar names and values must be URL encoded inside the agreed markup delimiters:

.../?cvars=key1^*Value1!*^|key2^*Value2!*^

Making the bot require action before starting the conversation

By passing the "autoload=true" parameter, the iframed bot will wait for the user to click/tap on the input field to start the first conversation.

<iframe src="https://app.certainly.io/webchat/InsertUUIDhere/?autoload=true"
height=360 width=360 frameborder=0 name="bot-iframe"style=""></></iframe>