Website

There are three ways to put your Quickchat AI Agent on the web — pick whichever fits the surface you want to show:

• Widget — the floating chat bubble in the corner of your site. Best for general-purpose support.
• Embed — an inline chat window that sits exactly where you want it on a page. Best for embedding the AI inside a specific app screen, help-centre page, or product detail page.
• Chat Page — a hosted, full-screen chat experience served by Quickchat (no installation, no code). Best when you want to share a link with someone (e.g., support email, internal Slack, beta testers) without touching their browser.

Install your chosen surface from Channels → Your Website → Install. The page has three sub-tabs that mirror the structure of this article: Install (snippets + access), Appearance (visual styling), and Text Content (the prompts and labels visible to the visitor).

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.

Chat Page

Chat Page is a hosted, full-screen version of your AI Agent that lives on a Quickchat URL. There’s nothing to install — share the link and your visitors can chat with your Agent directly in their browser. Use it when:

• You want a chat experience but don’t have a website (or don’t want to touch its code).
• You’re sharing the AI internally with a small group (beta testers, support team, sales prospects) and need an access-controlled link instead of a public widget.
• You want to send the AI as a follow-up channel in email, Slack, or your CRM.

Configure who can open the Chat Page from Install → Chat Page Access (see Access control below).

Access control

The Install tab has two access controls that apply to your deployment:

Widget & Embed access

A master toggle at the top of the Install tab. When enabled, the Widget and Embed scripts work normally on visitors’ browsers. When disabled, the Widget and Embed are unavailable on your site even if the script is still pasted in — useful for taking the AI offline temporarily without removing the snippet, or for restricting public access while you keep the Chat Page open to invited users.

Chat Page Access

Independent of the Widget & Embed toggle, you can restrict who can open the Chat Page:

• Anyone — the Chat Page URL is public. Anyone with the link can use it.
• Invited users only — only Chat Users you’ve invited (by email) can use the Chat Page. They’ll need to authenticate.
• Nobody — the Chat Page is fully disabled.

To grant access under Invited users only, click Invite Chat Users next to the radio — that takes you to Account Settings → Chat Users, where you can send invitations by email and manage who has access.

Customizing

The Appearance and Text Content sub-tabs let you tailor how the Widget, Embed, and Chat Page look and what copy your visitors see. All three deployment surfaces share these settings — change them once and they apply everywhere your Agent is deployed.

The right pane of the Install/Appearance/Text Content tabs has its own preview controls — toggle between Widget, Embed, and Chat Page previews, and between Desktop and Mobile viewports, to see your changes before you publish.

Appearance

Visual styling for the chat surfaces, grouped into Branding, Size & Position, and Behavior:

• Widget theme — System, Light, or Dark default. Visitors can override from the widget.
• Header logo — image displayed in the top-left of the chat header (max 5 MB).
• Header background color and Header content color — choose either a custom colour or Auto/Black/White for the content.
• Message bubble color — the colour of user-sent message bubbles and interactive elements.
• Launcher icon — image shown on the chat launcher before it’s opened (max 5 MB).
• Launcher size and Launcher position — small/medium/large, and bottom-right or bottom-left.
• Chat window dimensions — width (320–720px) and height (520–1020px) of the widget 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 — hide the “Powered by quickchat.ai” footer for a fully white-labeled experience.
• Conversation rating — let visitors rate the conversation at the end. Results appear in Insights → Conversation Rating.

Text Content

The Text Content sub-tab controls every piece of copy visible to the visitor:

• Header text — text shown at the top of the chat window.
• Initial message — the first message from the AI Agent at the start of each conversation (e.g., “Hey, do you need help?”).
• Display as floating bubble — toggle that shows the initial message as a floating speech bubble next to the launcher to grab attention before the visitor clicks.
• Conversation starters — up to 3 example messages shown to the visitor before they start typing. Clicking one sends it as the first message — useful for nudging visitors towards your AI’s strengths (“How do I install the widget?”, “What integrations do you support?”).
• Input placeholder — hint text in the empty message input.
• Disclaimer text — text shown behind the conversation, typically informing users they’re talking to an AI. We recommend keeping this clear and visible.

Advanced Features: Custom Parameters

The Quickchat AI Widget and Embed 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 and Embed use the same call signature:

_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",
});

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

Tip

Custom parameters with snake_case names (e.g. order_id, customer_tier) can be injected directly into API Actions as {{metadata_order_id}}, {{metadata_customer_tier}}, etc. See AI Action Variables for details.

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://bubble.quickchat.ai/chat.js","_quickchat");
  _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>

Embed

<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://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _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>

Embed

Embed lets you place the Quickchat AI Agent directly inside a page as an inline chat window, instead of a floating bubble. Use it when you want the chat to sit in a specific spot on the page — a help-centre column, a contact page, an in-app sidebar, etc.

How to add the Embed

1. Get the Embed code

   • Log into the Quickchat AI App.
   • Go to Channels → Your Website in the left sidebar.
   • Click the Install tab.
   • Copy the Embed snippet (it includes both the <div id="quickchat-embedded"> container and the loader script).

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

3. Paste the code

   • Insert the Embed snippet into the <body> of your page.
   • Place it at the exact spot where you want the chat window to appear. The <div> controls the size — adjust the inline style="height:600px" to match the slot in your layout.