Website

In this guide, we’ll go through how to integrate your AI Assistant into your Website using our Widget or iFrame.

Widget

The Widget allows you to embed your Quickchat AI Agent directly into your website, providing users with a seamless way to interact with the AI. The Widget is typically displayed as a chat bubble in the bottom-right corner of your webpage. When clicked, it expands into a chat window, enabling users to ask questions, get assistance, or access information.

How to embed the Widget on your website

1. Locate your page’s code

   Open your webpage’s HTML file or access the code editor of your website builder.

2. Get the Widget Code

   • Log into the Quickchat AI App.
   • Go to the Website section under the Channels category in the left sidebar.
   • Click the Install tab.
   • Copy the Widget script code.

3. Paste the Code

   Insert the Widget script just before the closing </body> tag on all pages where you want the Widget to appear.

If you use WordPress

Here’s how you can embed the Quickchat AI Widget into a WordPress website:

Using footer.php

1. Log into your WordPress dashboard.
2. Navigate to Appearance > Theme Editor and open the footer.php file.
3. Paste the Widget script code just before the closing </body> tag.
4. Save the changes to apply the Widget to your website.

Here’s a step-by-step video on how to add the Quickchat AI Widget to WordPress using footer.php:

Using a Plugin

1. Install a plugin like Insert Headers and Footers from the WordPress Plugin Directory.
2. Go to the plugin settings (usually found under Settings > Insert Headers and Footers).
3. Paste the Widget script code into the footer section.
4. Save the changes, and the Widget will appear on your site.

Here’s a step-by-step video on how to add the Quickchat AI Widget to WordPress using a plugin:

If you use a Website Builder

If you use platforms like WordPress, Webflow, or Wix, refer to their documentation on adding custom code.

For help, contact us at contact@quickchat.ai.

Customizing the Widget

The Appearance section lets you customize the look and feel of your Quickchat AI Widget to match your branding and user experience goals.

Here’s a description of each option:

• Primary Color: Set the main color for the user’s chat messages.
• Header Background Color: Customize the chat header’s background.
• Header Text Color: Choose a contrasting text color for clear readability.
• AI Avatar Image: Upload an avatar for your AI Agent that appears in the header and messages.
• Widget Bubble: Customize the chat icon that users see before opening the Widget.
• Widget Bubble Size: Choose between small, medium, or large sizes.
• Widget Bubble Position: Place the bubble in bottom-right or bottom-left corner.
• Widget Chat Window Dimensions: Set width (320-720px) and height (520-1020px) of the chat window.
• Animate AI Responses: Show AI responses as they’re being generated (like in ChatGPT).
• Auto-Open Widget: Automatically open the Widget when the page loads.
• Remove Quickchat AI Branding: Create a white-labeled experience.
• Animate Chat Header Collapsing: Enable smooth header animation after the first message.

Advanced Features: Custom Parameters

The Quickchat AI widget and iFrame allow you to pass custom parameters on initialization. They can be used to:

• enhance analytics (they are available in the CSV export on the Quickchat platform)
• customize the conversation (Quickchat AI is aware of all provided parameters)

Here are examples of useful custom parameters:

• User name: Mike
• Subscription Tier: VIP
• Most recently purchased item: Silver package (upgraded)
• Next account level: Platinum
• Points required to reach the next account level: 758

Here is an example conversation showing an AI Agent aware of values provided in custom parameters:

In order to add custom parameters like the ones above, include the following like in the script you found under Your Website > Install.

widget:

_quickchat("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

iFrame:

_quickchat_embedded("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

The JSON object can hold up to five keys, and these attributes will be assigned to every new conversation.

Example script:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/chat.js","_quickchat");
  _quickchat("host", "app.quickchat.ai");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat("init", "abcdefghij");
</script>

iFrame

<div id="quickchat-embedded" style="height:600px;overflow: hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/embed.js","_quickchat_embedded");
  _quickchat_embedded("host", "app.quickchat.ai");
  _quickchat_embedded("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat_embedded("init", "0zmn6up7zo");
</script>

iFrame

iFrame allows you to embed your Quickchat AI Agent directly into your website as a chat window. This method provides a simple and flexible way to add your AI Agent to specific locations on your webpage.

How to embed the iFrame

1. Get the Quickchat AI iFrame code

   • Log into the Quickchat AI App.
   • Go to the Website section under the Channels category in the left sidebar.
   • Click the Install tab.
   • Copy the iFrame script code.

2. Open your website’s HTML file or website builder’s code editor

3. Paste the code

   • Insert the iFrame code into the <body> section of your webpage.
   • Place it at the exact spot where you want the chat window to appear on your page.