Skip to main content
Website Chat puts your AI agent on your own website as a chat bubble. Visitors chat without WhatsApp or a phone number, the same agent answers from the same Knowledge Base, and every conversation lands in your Inbox. Use it for support and sales on your storefront, landing pages or help centre.

​
Before you start

  • A published agent. Website Chat is answered by your workspace’s default agent unless you install an agent-specific snippet (see “Which agent answers” below).
  • Access to your website’s HTML or your store platform’s custom-code setting, unless you use Show on my store with the storefront script already installed.
  • Credits. AI replies in Website Chat use credits the same way WhatsApp replies do. When your credits run out, conversations are handed to your team until you top up (see Plans and credits).

​
Configure the chat

Go to Channels → Website Chat. The page has two tabs, Chat and Design, and a Preview panel on the right that reflects your changes as you make them. Click Save changes in the bar that appears, or Discard to revert.

​
Chat tab

​
Design tab

  • Select Avatar: pick one of the five built-in avatars, or click + to upload your own (JPEG, PNG, GIF or WebP). The avatar appears inside the chat.
  • Select Widget Icon: pick one of the six built-in icons, or upload your own. This is the bubble visitors click to open the chat.
Uploads are saved as soon as they finish (Changes have been saved.); every other change waits for Save changes.

​
Install the widget

There are two ways to put the widget on a site, and they can be combined.

​
Paste the embed code

1

Copy the code

Click Embed Code at the top of the page. The Chat Widget dialog reads: “Copy and paste this code snippet before the </body> tag on every page you want the Messenger to appear.” Click Copy.
2

Add it to your pages

Paste the snippet just before the closing </body> tag of every page that should show the chat, or into your store platform’s custom-code or scripts setting so it loads on all pages.
3

Check the site

Open your site. The bubble appears in the bottom-right corner; click it to open the chat and send a test message. The conversation appears in your Inbox with the source Website Widget.
The snippet identifies your workspace only. Name, messages, avatar and icon are read from Popcorn each time the widget loads, so later changes need no re-installation.

​
Show it on your connected store

If the storefront script from the WhatsApp button is already installed on your store, you do not need a second snippet. Turn on Show on my store and save: the same script loads Website Chat alongside, or instead of, the WhatsApp button, and you can switch between the two channels from Popcorn at any time. See Add a WhatsApp button to your website.

​
What visitors see

  • A round bubble in the bottom-right corner of the page, showing your Widget Icon. On phones it sits closer to the edge.
  • Clicking it opens the chat panel: about 400 pixels wide on desktop, nearly the full screen width on phones.
  • The panel opens with your Welcome Message and, underneath it, your suggested questions.
  • Replies are labelled with the Avatar Name and show the avatar you chose on the Design tab.
  • Closing the panel brings the bubble back; the conversation continues where it left off.

​
Which agent answers

The snippet from Channels → Website Chat uses your workspace’s default agent. To bind Website Chat to a specific agent, open that agent, go to its Channels tab and copy the code under Chat Widget (“Embed and use the agent chat widget on any website you want.”). See Connect knowledge, tools and channels.

​
How Website Chat conversations work

  • A visitor’s first message creates a customer record and a conversation in the Inbox, listed under the source Website Widget. See Inbox overview.
  • When a teammate replies from the Inbox, the visitor sees the reply in the widget immediately.
  • Messages never go through WhatsApp: there is no 24-hour window, WhatsApp message templates do not apply, and media files cannot be sent from the Inbox to a Website Chat conversation.
  • Only one Popcorn widget loads per page. If a page already has one (for example the storefront script with Show on my store on), a second snippet is ignored.

​
Test it before going live

Use the Preview panel on Channels → Website Chat: it is a working chat with your agent that reflects your name, messages and design as you edit them. To test the agent’s answers in depth, use Test Agent on the agent page (see Test and publish).