Skip to main content

Website

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.
How to add to WordPress using footer.php

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

Your browser does not support the video tag.

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.
How to add to WordPress using a Plugin

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

Your browser does not support the video tag.

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 Attributes​

You can add custom attributes to enhance data collection from conversations.

By default, the exported conversation data includes the following columns:
conversation ID, timestamp, message ordinal number, role (AI, User, or Human Agent for Handed Off cases), and message content.

To enhance this export, you can add custom attributes to messages via the Widget. These attributes will appear as additional columns in the conversation export.

To add custom attributes, include the following in the Widget or iFrame script:

_quickchat("custom_params", PARAM);

Replace PARAM with a JSON object. For example, with:

{userId: 12, website: "mywebsite.com"}

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

Example script:

<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", "server.quickchat.ai");
  *quickchat("custom*params", { userId: 12, website: "mywebsite.com" });
  *quickchat*embedded("init", "aaaaaaaaa");
</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.