How to add Quidget in Bubble to your website

Overview

Integrate Quidget’s AI-powered Web Chat on your website to offer instant support, improving visitor engagement and experience.

Copy your Quidget code

Log in to your Quidget account and go to Test & Install. Copy the installation code provided.

Adding Quidget to your website

1. Open your website’s HTML
   Locate the HTML file where you want to add the chatbot.
2. Insert the code
   Paste the copied Quidget code just before the closing </body> tag.
3. Save and publish your site
   Save the changes and publish your site to make the chatbot live.

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.

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.

How to add Quidget to your Webflow site

Overview

Integrate Quidget’s Web Chat with your Webflow site to provide automated support, improving visitor engagement and experience.

Copy your Quidget code

In the chatbot sidebar menu, go to Test & Install and copy the provided code snippet.

Adding Quidget to Webflow

1. Log in to your Webflow account
   Select the project where you want to add Quidget.
2. Access the site settings
   Click the Webflow icon in the top-left corner and choose Site Settings.
3. Insert the code
   • Navigate to the Custom Code section.
   • Paste the copied Quidget code in the Head Code area.
   • Click Save Changes to apply the code.
4. Publish your site
   Click Publish to activate Quidget’s Web Chat on your Webflow site.

Disabling the chatbot

1. Go to Test & Install in the chatbot sidebar menu.
2. Toggle the switch above the chat preview to off to temporarily disable the chatbot without removing the code.

How to add Quidget to your Framer site

Overview

Integrate Quidget’s AI-powered Web Chat on your Framer site to deliver real-time support and enhance visitor interaction.

Copy your Quidget code

In your chatbot sidebar menu, go to the Test & Install page and copy the code snippet provided.

Adding Quidget to Framer

1. Log in to your Framer account
   Select the website where you want to add Quidget.
2. Open the Settings page
   Click the gear ⚙️ icon in the top-right corner and choose General from the sidebar.
3. Insert the code
   • Scroll to Custom Code and paste your Quidget code at the end of the head tag.
   • Click Save to apply changes.
4. Publish your site
   Click Publish to make Quidget live on your site.

Adding the embed format Web Chat

1. Go to Appearance in Quidget’s sidebar
   Under the Styling tab, switch Widget style from Bubble to Embed, and save.
2. Embed Quidget in Framer
   • Select your page in Framer and click Insert.
   • Choose the Embed component from the Utility section and place it on your page.
   • In the sidebar, select HTML type and paste the embed code.
3. Publish your site
   Click Publish to activate the embedded chatbot.

Disabling the chatbot

1. Go to the Test & Install page in your chatbot sidebar menu.
2. Toggle the switch above the chat preview to off to deactivate the chatbot without removing the code.

How to add Quidget to your Wix site

Overview

Integrate Quidget’s Web Chat with your Wix site to offer AI-powered assistance, enhancing visitor engagement and interaction.

Copy your Quidget code

In your chatbot sidebar menu, go to the Test & Install page and copy the provided code snippet.

Adding Quidget to Wix

1. Log in to your Wix account and open your site editor
   Select the site where you want to embed Quidget.
2. Open the custom code section
   • Click the plus (+) icon and choose Embed Code.
   • Navigate to Marketing Tools > Custom Code.
3. Add the code to Wix
   • Click Add Code under the Head section.
   • Paste your Quidget code, name it “Quidget” (e.g.), and save.
4. Publish your site
   Save and publish your site to activate Quidget.

Disabling the chatbot

1. Go to the Test & Install page in your chatbot sidebar menu.
2. Toggle the switch above the chat preview to off to deactivate the chatbot without removing the code.

How to add Quidget to your WordPress site

Overview

Quidget lets you easily integrate a chatbot onto your WordPress site. This setup helps you provide instant AI-powered assistance to visitors.

1. Log in to your WordPress admin dashboard Go to: yourdomain.com/wp-admin/ You can also access it through your hosting provider’s control panel.
2. Install and activate the Quidget plugin

• In the left sidebar of your WordPress admin dashboard, click Plugins.

• Click Add Plugin at the top of the page.

• In the search bar, type “Quidget”.
• Locate the Quidget plugin, then click Install Now.

• Once installed, click Activate.

3. Get your Web Chat ID from Quidget

• Go to the Test & Install page in your Quidget account.
• Click on the WordPress button.
• In the popup that appears, click Copy ID — this is your Web Chat ID.

4. Add your Web Chat ID to the plugin

• In the WordPress admin dashboard sidebar, find and click on the Quidget Chat section.
• Paste your Chat ID into the field labeled “Web Chat ID”.
• Click Save Changes.

How to add Quidget to your Shopify site

Overview

Quidget enables seamless integration of an AI-powered chatbot into your Shopify store, enhancing customer interaction and support.

Copy your Quidget code

Go to the Test & Install page in your chatbot sidebar menu and copy the provided code snippet.

Adding Quidget to Shopify

1. Log in to your Shopify dashboard.
2. Click on Online Store from the menu under the Sales Channels section.
3. Edit your theme by clicking the ellipsis icon next to your current theme and selecting Edit code.
4. Find and open the theme.liquid file from the sidebar.
5. Paste your Quidget code in the <head> section, between the opening <head> tag and the closing </head> tag.
6. Click the Save button.
7. Your chatbot will be live on your website and should appear across all your store’s pages.

Disabling the chatbot

To temporarily disable your chatbot without removing the code:

1. In your Quidget account, go to the Test & Install page in your chatbot sidebar menu.
2. Toggle the switch above the chat preview to the off position.
3. This disables the chatbot on your Shopify site while preserving the code for future use.

How to add Quidget to your website using Google Tag Manager

Overview

Using Google Tag Manager (GTM) simplifies the process of integrating Quidget with your website, allowing the chatbot to appear across all your pages efficiently.

Copy your Quidget code

Go to the Test & Install page in your chatbot sidebar menu and copy the provided code snippet.

Setting up Google Tag Manager

1. Create a GTM account and container:
   • Sign in to your Google account.
   • Go to Google Tag Manager and click Create Account.
   • Name your account and container, select Web as the platform, and click Continue.
   • Accept the Terms of Service.
   • You’ll receive a container code snippet. Paste it into your website’s pages as instructed by GTM.

Adding Quidget’s code to your GTM container

1. In GTM, click New Tag.
2. In the Tag Configuration section, select Custom HTML.
3. Paste your Quidget code into the HTML field.
4. Active checkbox “Support document.write”.
5. Open the Advanced Settings and find the “Additional Tag Metadata” option.
6. In the Key field, enter the text “data-id”.
7. In the Value field, enter the script ID that you copied from the Quidget website.
8. Click Triggering and select All Pages.
9. Save the tag and name it (e.g., “Quidget”).
10. Return to GTM’s home and click Submit to apply changes.

Disabling the chatbot

To temporarily disable the chatbot without removing its code:

1. Go to the Test & Install page in your chatbot sidebar menu.
2. Toggle the switch above the chat preview to the off position.
3. This keeps the code intact while preventing the chatbot from displaying.

How to add Quidget to your Squarespace site

Overview

Integrating Quidget with your Squarespace site is quick. By adding the chatbot’s embed code to the footer section, it will appear across all your website pages.

Copy your Quidget code

In your chatbot sidebar menu, go to the Test & Install page and copy the provided code snippet.

Adding Quidget to Squarespace

1. Log in to your Squarespace dashboard.
2. Click Edit in the top-left corner.
3. Scroll down and click Edit Footer.
4. Click the Add Block button in the corner.
5. Choose Embed from the available options.
6. Open the Embed Block section and select Code Snippet.
7. Paste your Quidget code.
8. Save your changes, then click Done.

Disabling the chatbot

To temporarily disable the chatbot without removing its code:

1. Go to the Test & Install page in your chatbot sidebar menu.
2. Toggle the switch above the chat preview to the off position.
3. This keeps the code intact while preventing the chatbot from displaying.