Create a ticketBook a demo

Website

You can instantly launch your chatbot to your website with one click on WotNot.

Follow the steps mentioned below if you are looking to add the WotNot chatbot on your website, webpage or web application.

Installing the chat bubble

To install the chat bubble on all the pages of your website, follow these steps:

Step 1: Copy the code snippet

  • Goto Settings > Web > Installation

  • Enter the domain where you want to launch your chatbot

  • Copy the "Widget installation code"

NOTE:

Each WotNot account only supports one domain.

Sub-domains are allowed. Like blog.wotnot.io, app.wotnot.io etc.

Step 2: Paste the code snippet on your website

Copy the JS Snippet provided in this section, and paste it anywhere in your website's code between the <body> ... </body> tags.

You must include the snippet on every page you want your Chatbot to appear on.

If you DO NOT see your bot on your website:

  • Check if the bot status is "Active" i.e. switch is turned on.

  • Check if your bot has a deployed version. If not, deploy it once.

Installing an iframe

Embeds the chat widget inside a section of a webpage. To install an iframe:

  1. Goto Bot builder

  2. Choose the 3 dots menu of the bot you want to iframe

  3. Choose "Embed"

  4. Copy and paste the iframe code on your webpage

The iframe code consists of the following:

//Sample Iframe code
<iframe width="640" height="480" src="https://embed.wotnot.io/KYi3WCJkk9if101023723428bvMtch1n/bot/cJWQqh5anku8082500522107fJTkw94W?display_header=false&history_retention=false" frameborder="0"></iframe>

Width and height — you can adjust these to meet your webpage needs.

display_header — you can configure if you want to show/hide the chatbot header.

history_retention — you can configure to retain the chat history on page refresh, or always start a new conversation.

Inject data into the chatbot

If you want to send external data to the chatbot, you can use this option. This is pretty useful if your use case involves the chatbot being installed inside a post-login environment where the bot is supposed to have context of the user talking to it (i.e. name, email, plan, account id etc.)

Using Query params

With this method, when the WotNot snippet is loaded on the website for the first time, the defined query params and their values will be stored in the WotNot variable.

For example, if your URL is the followingwww.wotnot.io?cust_id=1234&plan=9896

You can choose to store the values of cust_id and plan on the trigger action block.

Using JSON

With this method, you can inject a JSON payload inside the WotNot’s code snippet and map the objects to be stored in the trigger action block.

To do this you need to add the following object with your desired fields in the WotNot code snippet

data-session-payload='{"field1": "value", "field2: "value"}

Now, let's take an example to understand this.

Assume you are using the chatbot in your web app and you already know who is the user initiating the chat. For your agents to be aware of the user details, you can add their name, email, customer_id, plan, etc. to the WotNot code snippet.

<script src="" data-session-payload='{"name": "Charles", "phone": "8164848686"}' defer></script>

We have stored the “name” and “phone" fields to WotNot variables on the trigger action block.

NOTE:

  • WotNot reads this object only once when the code snippet is fired. Sending data after the code snippet loads will not be read.

  • Dynamically add the data-session-payload object to the WotNot code snippet

NOTE:

Use the following object paths to store the selected button's text, payload, or text message in a variable within the trigger block for WhatsApp Meta Cloud.

  • For selected button's payload

    • entry[0]['changes'][0].value.messages[0].button.payload

  • For selected button's text

    • entry[0]['changes'][0].value.messages[0].button.text

  • For a text message

    • entry[0]['changes'][0].value.messages[0].text.body

PreviousPublishing agentsNextWordPress

Last updated

Was this helpful?