WotNot Help Center
Create a ticketBook a demoProduct
  • 👋Welcome!
  • 🏁Getting Started
    • Building a chatbot
    • Testing a chatbot
    • Publishing your bot
      • Web
        • Embed chatbots on website
      • WhatsApp
        • Meta
        • 360Dialog
        • Twilio
        • GupShup
        • TechAlpha
      • Instagram
      • Facebook Messenger
      • SMS
      • Mobile app
      • API
    • Utility Tools
    • Contacts
      • Scheduling a Contact Report
      • Exporting a Contact List
      • Blocking contacts
    • Chatbot Appearance
      • Custom CSS
      • Image dimensions
      • Pop-up messages
  • ⚒️Bot builder
    • Action blocks
      • Trigger
      • Send message
      • Collect input
      • Buttons
      • Reply buttons
      • Carousel
      • Agent
      • Answer AI
      • Set AI
      • Send an email
      • List
      • Condition
      • Talk to human
      • Dynamic data
      • Javascript
      • Collect file
      • Form
      • Webhook
      • Flow
      • Jump
      • Options
      • Calendar
      • Delay
      • Codeblock
      • Slider
      • Image gallery
      • Send WhatsApp
      • Send SMS
      • Send Email
      • Send Status
      • WhatsApp flow
      • Catalogue
    • Outbound bots
      • Building One Off Campaign
      • Building Ongoing Campaign
    • Variables
    • Cloning bots
    • Requesting edit access
    • Connecting action blocks
    • Creating a loop
  • ✨AI Studio
    • Building a GPT chatbot
    • Knowledge base
    • Custom Answers
    • Functions
    • Prompts
    • AI credits
    • Refresh frequency
  • 💬Live Chat
    • Overview
    • Building a bot with live chat
    • Creating views
    • Adding labels
    • Saved replies
    • Settings
  • 🔗Integrations
    • Overview
    • HTTP request
    • Ready integrations
      • Google Calendar
      • Google Sheets
      • Google Analytics
        • Using Javascript
      • Salesforce
      • HubSpot
      • Calendly
      • Slack
      • Airtable
      • Zendesk
      • Freshdesk
      • DialogFlow
      • Zoho CRM
    • Events
    • Zapier
    • Public APIs
  • 💬WhatsApp Business API
    • Getting a WhatsApp API
      • Getting WhatsApp API (Old approach)
      • Sandbox WhatsApp API
    • Facebook Business Manager (FBM) Verification
    • Creating a WhatsApp Template
    • Cost
    • Messaging Limits, Quality Rating
    • Official Business Account (Green tick verification)
  • 📊Reporting
    • Overview
    • Chatbot Report
    • Agent Report
    • Outbound Report
    • Link analytics
    • Weekly email report
  • 🛠️Troubleshooting
    • Getting notification for leads
    • JS functions to trigger chat widget
    • Opt-out management
    • Setting up link tracking
    • How do I hard refresh my browser?
    • Cookies
    • Notifications
    • Tracking Facebook Pixel
    • Setting up SSO login
    • Inviting teammates
    • Teams
  • 🧑‍💻Support
    • Creating a ticket
    • Book a demo
    • Purchasing a subscription
    • Cancelling a subscription
    • Refund policy
    • Reset password
    • Deleting account
Powered by GitBook
On this page
  • Step 1: Get the embed code of the chatbot
  • Step 2: Copy and paste the Embed code
  • Embed as chat bubble
  • Embed as iframe

Was this helpful?

  1. Getting Started
  2. Publishing your bot
  3. Web

Embed chatbots on website

Embed the chatbot as a chat bubble or as an iframe on your webpage.

PreviousWebNextWhatsApp

Last updated 10 months ago

Was this helpful?

Wotnot supports two ways of adding the chatbot on your website,

  1. Embed as a chat bubble

  2. Embed as an iframe

Step 1: Get the embed code of the chatbot

To embed a chatbot on a webpage, simply click on the 3 dots icon on the bot management screen and choose 'Embed'.

Step 2: Copy and paste the Embed code

Copy & paste the code snippet on the website where you want to embed the chatbot.

There are 2 ways to embed.

Embed as chat bubble

Shows up as a small bubble on the corner of your website. Bubble can open/close on click.

Always make sure you add the chat widget code on the <body> of the website HTML so that it displays on all pages of your website.

Chat bubble code
<script src='https://app.wotnot.io/chat-widget/KYi3WCJkk9if101023723428bvMtch1n.js' defer></script>

Embed as iframe

Embeds the chat widget inside a section of a webpage. The chatbot is fixed and does not open/close.

You can enable or disable the header of the embed i.e. the green portion you see on top by writing display_header=false.

Also, you can add a frameborder using the field frameborder="1".

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

You can change the height and the width of the chatbot or chatbot screen based on your preference by making changes in the above code, under "Height" & "Width" option by using either pixels (px) or percent (%)

🏁
Embed code of the chat widget
Chat bubble
Embedded as an iframe