How to Embed Quidget Chat Inside a Website, WebApp, or Custom Interface

Overview

Unlike traditional floating chat bubbles, Quidget can be embedded directly inside a page, app, or dashboard as a permanent chat component. This allows for a seamless integration into an interface where users can interact with AI support naturally.

Step-by-Step Guide to Embedding Quidget Chat in a Custom Container

1. Copy Your Quidget Chat Script

   • Log in to your Quidget dashboard.
   • Go to Test & Install.
   • Copy the chat script provided.

2. Modify the Chat Script to Target a Specific Container
   By default, Quidget loads as a floating chat bubble. To embed it inside a specific part of your site, you need to define a container where the chat will appear. Add These Attributes to the Chat Script:

   • data-target="container-id" → Replace container-id with the actual ID of your HTML container.
   • data-options='{ "chatView": "permanent" }' → This forces the chat to always be visible inside the container.

   Example of Modified Chat Script:

   <script async
    src="https://your-quidget-script-url"
    data-id="your-quidget-id" 
    data-target="web-chat-container" 
    data-options='{ "chatView": "permanent" }'>
   </script>
   

3. Create the HTML Container for the Chat
   Now, add a <div> element where the chat will be displayed. The id of this container should match the data-target value from the script.

   Example: <div id="web-chat-container"></div> This div acts as the placement area for Quidget, ensuring it appears inside the selected section instead of floating as a separate chat bubble.

4. Insert the Code Before the </body> Tag
   To ensure proper loading and performance, place both the chat script and the container before the closing </body> tag in your website or webapp.

5. Example:
   

Disabling the chatbot

1. Go to the Test & Install page in Quidget’s sidebar.
2. Toggle the switch above the chat preview to off to temporarily disable the chatbot.