Log In

Embed Your Chatbot: Integration Guide

Learn how to easily integrate your chatbot into your website using iFrame or JavaScript.

Embedding Methods

Method 1: Using an iFrame (Simpler Integration)

Embedding your chatbot using an iFrame provides a simpler way to integrate the widget, as it essentially embeds another HTML document within your page.

Steps:

  1. Obtain Your Chatbot iFrame Code: Get your chatbot iFrame code snippet from here after testing your bot. This code will contain the `<iframe>` tag with the URL of your chatbot widget. 
    <iframe src="YOUR_CHATBOT_IFRAME_URL?token=YOUR_UNIQUE_TOKEN" width="300" height="500" frameborder="0" style="border: none;" allowfullscreen></iframe>

    • src="YOUR_CHATBOT_IFRAME_URL?token=YOUR_UNIQUE_TOKEN": This is the URL of your chatbot widget designed to be embedded in an iFrame. Replace YOUR_CHATBOT_IFRAME_URL and YOUR_UNIQUE_TOKEN with the values provided.
    • width="300" and height="500": These attributes define the initial dimensions of the iFrame in pixels. Adjust these values as needed.
    • frameborder="0": This removes the border around the iFrame.
    • style="border: none;": An alternative way to remove the border using inline CSS.
    • allowfullscreen: This attribute allows the chatbot to potentially display in fullscreen mode if supported.

  2. Paste the Code into Your Website's HTML: Locate the section in your HTML file where you want the chatbot to appear and paste the `<iframe>` code. 
    
<div class="chatbot-container" style="position: fixed; right: 20px; bottom: 20px; z-index: 1000;">
    <iframe src="YOUR_CHATBOT_IFRAME_URL?token=YOUR_UNIQUE_TOKEN" width="300" height="500" frameborder="0" style="border: none; border-radius: 10px;" allowfullscreen></iframe>
</div>

    You might want to wrap the iFrame in a `<div>` with CSS to control its positioning (e.g., fixed to the bottom right corner).

  3. Adjust Dimensions and Styling (Optional): You can modify the `width`, `height`, and `style` attributes of the `<iframe>` tag to adjust its size and basic appearance. For more advanced styling, you might need to consult your chatbot platform's options.

Method 2: Using JavaScript (Recommended for Customization)

Embedding your chatbot using JavaScript offers the most flexibility for customization and seamless integration with your website's existing elements.

Steps:

  1. Obtain Your Chatbot Widget Code: Get your chatbot iFrame code snippet from here after testing your bot. 
    <script src="YOUR_CHATBOT_WIDGET_URL" data-token="YOUR_UNIQUE_TOKEN" defer></script>

    • src="YOUR_CHATBOT_WIDGET_URL": This is the URL where the chatbot's JavaScript code is hosted. Replace this with the actual URL provided.
    • data-token="YOUR_UNIQUE_TOKEN": This is a unique identifier for your chatbot instance. Replace YOUR_UNIQUE_TOKEN with your specific token.
    • defer: This attribute ensures that the script is executed after the HTML document has been fully parsed, which is generally recommended for chatbot widgets to avoid blocking page rendering.

  2. Paste the Code into Your Website's HTML: Locate the `<body>` section of the HTML file(s) where you want to embed the chatbot. It's generally recommended to place the script tag just before the closing `</body>` tag. 
    
<body>
    <!-- Your website content here -->

    <script src="YOUR_CHATBOT_WIDGET_URL" data-token="YOUR_UNIQUE_TOKEN" defer></script>
</body>

Troubleshooting

If you encounter any issues embedding your chatbot, we're here to help! Contact us or your website platform's support team for assistance.

  • Ensure you follow your website platform's documentation for embedding code.
  • Ensure you have correctly copied and pasted the entire code snippet.
  • Verify that your unique token or API key is included in the code.
  • Check for any JavaScript errors on your website that might be interfering with the chatbot widget.
  • If using an iFrame, ensure the `src` URL is correct and accessible.
Contact Us