Skip to main content
Screenshot 2026 08 31 183423
Available on all plans.

​
Installing the chat bubble

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

​
Getting your code Snippet

  • Goto Settings > Web > Installation
  • Enter the domain where you want to launch your chatbot
  • Copy the “Widget installation code”
Screenshot 2026 08 31 165042 3

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

​
Verifying it works

After adding the snippet, verify that the agent is active and has a deployed version.
  • Open the agent in WotNot and make sure its status is Active.
  • Confirm that the latest version of the agent has been deployed.
  • Open the published website and check whether the WotNot widget appears
  • Open the widget and send a test message to confirm that the agent responds correctly.
If the widget does not appear, check the Active status and deployed version first. An agent without a deployed version will not appear on your website.

​
Subdomains

Each WotNot account only supports one domain. For example, if your main website is w, you can also use the widget on subdomains such as blog.wotnot.io or app.wotnot.io

​
Embedding in a page section

​
The iframe method

Embeds the chat widget inside a section of a webpage. To install an iframe:
  1. Go to 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
Recording 2026 08 31 181002 The iframe code consists of the following:
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.

​
Passing data into the widget

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

​
From URL query parameters

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

​
From a JSON payload in the snippet

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
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.
We have stored the “name” and “phone” fields to WotNot variables on the trigger action block. Image
  • 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

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

​
Why this matters

Use an inline iframe when the chatbot is part of a page experience, such as a support section, product page, onboarding flow, or account dashboard. Use the floating widget when you want visitors to access the chatbot from anywhere on the website without taking up page space.

​
Platform guides

Use the platform-specific instructions below to add the WotNot snippet to your website. The shared installation, deployment, embedding, and data-passing behaviour described above applies to all platforms.

​
WordPress

1

Copy the code snippet

Go to Settings > Web > InstallationEnter the domain where you want to launch your chatbotCopy the “Widget installation code”Screenshot 2026 08 31 165042 1
2

Adding the code on WordPress

Using a plugin:
  1. Go to WordPress Dashboard > Plugins > Add New.
  2. Search and install Insert Headers and Footers.
  3. Click Install Now, then Activate the plugin.
  4. Navigate to Settings > Insert Headers and Footers.
  5. Paste your WotNot chatbot script into the Scripts in Header section.
  6. Click Save to apply the changes.
  7. If the chatbot does not appear immediately, try purging your website cache. This may be required if you’re using a caching plugin or a CDN like Cloudflare.
Using Elementor:
Every page Installation
  1. Navigate to Elementor > Custom Code (Pro version required).
  2. Click Add New.
  3. Name your script (e.g., Chatbot).
  4. Paste the chatbot script.
  5. Set Location to Head and Condition to Entire Site.
  6. Click Publish.
Page-Specific Installation
  1. Edit the page using Elementor.
  2. Add an HTML widget.
  3. Paste your chatbot script.
  4. Save and update the page.

​
Framer

1

Copy the code snippet

Go to Settings > Web > InstallationEnter the domain where you want to launch your chatbotCopy the “Widget installation code”Screenshot 2026 08 31 165042 2
2

Add the code on Framer

Installing on all pages:
  1. Open your website project on Framer
  2. Goto Settings > Site Settings > General
  3. Scroll down to “Custom code” and paste the code under “Start of <body> tag”.
  4. Click “Save” to apply the changes
  5. “Publish” your site to view the bot on your webpage Image
Installing on selected pages:
  • Open your website project on Framer
  • Goto Settings > Page settings > select the page
  • Scroll down to “Custom code” and paste the code under “Start of <body> tag”.
  • Click “Save” to apply the changes
  • “Publish” your site to view the bot on your webpage Image

​
Google Tag Manager

1

Copy the code snippet

Go to Settings > Web > InstallationEnter the domain where you want to launch your chatbotCopy the “Widget installation code”
2

Adding the code on Google Tag Manager

  1. Login to your Tag Manager account
  2. Click “Add a new tag”
  3. Click tag configuration and select “Custom HTML” Image
  4. Paste the widget code here
  5. Click trigger and choose “All pages” Image
You may create a trigger to only show the chatbot on a few pages.

​
Squarespace

1

Copy the code snippet

Go to Settings > Web > InstallationEnter the domain where you want to launch your chatbotCopy the “Widget installation code”
2

Adding the code on Squarespace

On the entire website:In-order to embed the chatbot on entire website, you can follow the following steps;
  1. Go to Settings > Advanced > Code Injection
  2. Scroll down until you see ‘Footer’ section
  3. Paste the WotNot code snippet in the ‘Footer’ section
On a single page:In-order to embed the bot on single page, you can follow the following steps;
  1. Go to ‘Channel Configuration -> Web -> Configuration’
  2. Copy the WotNot ‘Code Snippet’
  3. Go to desired page where you want to embed the bot
  4. Hover and select the page setting (menu gear against the page name)
  5. Under the page settings screen, select ‘Advanced’
  6. Click on ‘Page Header Code Injection’
  7. Paste the snippet in the block editor
  8. Click on ‘Save’ to apply changes

​
Webflow

1

Copy the code snippet

Go to Settings > Web > InstallationEnter the domain where you want to launch your chatbotCopy the “Widget installation code”
2

Adding the code on Webflow

  1. Goto website account on Webflow
  2. From the menu, select “Site settings” Image
  3. Select “Custom code” Image
  4. Paste the WotNot code snippet under the “Head code” section and save changes.
  5. Publish the changes

​
Shopify

1

Copy the code snippet

Go to Settings > Web > InstallationEnter the domain where you want to launch your chatbotCopy the “Widget installation code”
2

Adding the code on Shopify

  1. Login and goto Admin dashboard
  2. Select “Online Store” > Pages (Choose the pages you want to add)
  3. Once the page opens, look for a small “< >” source code icon at the top-right of the content editor and click it.
  4. Now, paste your WotNot chatbot code Image
  5. Click the source code icon again to go back to the normal editor view. You should now see a preview of your chatbot on the page.
  6. Your chatbot is now added to your Shopify site!

​
Wix

1

Copy the code snippet

Go to Settings > Web > InstallationEnter the domain where you want to launch your chatbotCopy the “Widget installation code”
2

Adding the code on Wix

  1. Click on the “Design Site” button in the top-right corner to open the Wix Editor. Image
  2. Scroll to the section of your website where you want the chatbot to appear.
  3. Click the “+” (Add Elements) button on the left sidebar. Image
  4. Scroll down and click on “Embed Code”. Then select “iTunes Button” and choose “Custom Code”. Image
  5. Click on “+ Add Custom Code” in the top-right corner. Paste your WotNot chatbot embed code into the code editor.
  6. Under “Add Code to Pages”, choose whether to add the chatbot to all pages or select specific ones. Under “Place Code In”, select where you want the code to be placed (e.g., “Body - end”).
  7. Click “Apply” to save your changes.

​
Troubleshooting

Check these items first:
  • Make sure the agent status is Active.
  • Confirm that a version of the agent has been deployed.
  • Make sure the WotNot snippet is installed correctly.
  • Check that the snippet is placed in the correct location for your platform.
  • Open the published website rather than only the platform’s editor or preview.
The most common cause is an agent that has not been deployed.
The snippet is probably not installed on every page where the widget is required.Check your website’s global code settings and confirm that the WotNot snippet is included on every required page.If you intentionally installed the snippet only on selected pages, verify that those pages are included in your platform configuration.
Check the following:
  • Confirm that the agent is Active.
  • Confirm that a version has been deployed.
  • Verify that the WotNot snippet is loading correctly on the page.
  • Check whether another website script, security policy, or browser extension is preventing the widget from loading.
  • Test the website in an incognito/private browser window.
If data passed through query parameters or JSON is not available in the agent:
  • Check that the fields are mapped correctly in the Trigger block.
  • Verify that the variable names match the values being passed.
  • If using URL parameters, confirm that the parameters are present in the page URL.
  • If using JSON, confirm that the data-session-payload object is present when the WotNot snippet loads.
  • Remember that WotNot reads the payload only once, when the snippet fires. Data added later will not be picked up.
If the widget’s appearance is affected by your website’s CSS or you need additional visual customization, review the Custom CSS options available for the web chat widget.
Last modified on October 21, 2026