Website chat

Put your bot on your own website: visitors select the chat button in the corner to ask a question, the bot answers with the same flows and knowledge, and the conversations land in Chats next to LINE, Facebook and Instagram.

Overview

Website chat is a channel, and you don’t need an account on any other platform. You can set it up in two places, which show the same thing:

• “Channels” › “Add channel” › “Website chat”; once it’s set up, choose “View setup steps” in the “⋯” menu of the website chat card
• “Settings” › “Website chat”

Setup has three steps: “Set the look”, “Add the code to your website” and “Check the install”. It takes about 5 minutes. After you paste the code, open your website once and the check completes itself.

Note

Website chat is a channel, so the project’s owner or an admin sets it up. Other roles see “You can’t set up website chat” and can select “Request access”.

Conversations with website visitors land in Chats, together with messages from your other channels.

Appearance

Step 1, “Set the look”:

Field	What it does
Brand name	Shown in the chat window’s title bar. If it’s empty, the title says “Chat with us”.
Greeting	Shown next to the chat button and hidden after 6 seconds. Keep it to one sentence.
Brand color	Used for the chat button and the chat window’s title bar.
Brand logo	Also used as the chat button icon. PNG, JPG or GIF; square images work best.
Chat button position	“Bottom right” is where most websites put it; choose “Bottom left” when something (a cart or back-to-top button) already sits bottom right.
Adjust distance from the screen edges	The chat button’s distance from the side and bottom of the screen (px), set separately for desktop and phone, so it doesn’t cover your site’s own buttons.

When you pick a brand color, Chatbotta chooses a dark or white icon and title text and checks the contrast. If the contrast is too low, it suggests another color you can switch to in one click.

“Preview” on the right switches between “Desktop” and “Phone” so you can check as you go, and “Try website chat in a new tab” lets you chat for real. When you’re happy, select “Save look”.

The first thing visitors see after opening the chat comes from the flow with the “On follow” trigger, not from the greeting.

Install on your website

Step 2, “Add the code to your website”: choose what your website is built with, follow the steps on screen and select “Copy code”. The code already has your project ID in it, so paste it as is.

Platform	Where to paste
WordPress	Install the “WPCode – Insert Headers and Footers” plugin, then paste into the Footer box under Code Snippets › Header & Footer. On WordPress.com you need a plan that allows plugins.
Shopify	Online Store › Themes › ⋯ › Edit code: in theme.liquid, on the line above </body>.
SHOPLINE	Apps › Custom Code › Add code, with the position set to Bottom. If your admin has no Apps › Custom Code (most SHOPLINE stores in Taiwan), connect Google Tag Manager under Marketing & tracking › Tracking settings and install with GTM instead.
CYBERBIZ	Website appearance › Theme management › code editor: in theme.liquid, on the line above </body>.
Wix	Settings › Custom code: choose All pages under Add code to pages, and Body - end under Place code in. Wix only loads custom code on a published site with its own domain connected.
Google Tag Manager	A new Custom HTML tag that triggers on All Pages. After saving, Submit and Publish.
Other (HTML)	The template every page uses, on the line above </body>.

The code looks like this (always copy it from Chatbotta):

Paste into your site

<script>
  window.ChatbottaConfig = { chatbotId: 'YOUR_PROJECT_ID' };
</script>
<script src="https://app.chatbotta.com/webchat-widget.js" async></script>

Paste both <script> blocks.

Google Tag Manager

<script>
  window.ChatbottaConfig = { chatbotId: 'YOUR_PROJECT_ID' };
  var s = document.createElement('script');
  s.src = 'https://app.chatbotta.com/webchat-widget.js';
  s.async = true;
  document.head.appendChild(s);
</script>

The GTM code is one block; paste it into a Custom HTML tag. The chat button doesn’t appear until you submit and publish the container.

When the code is in place, select “Done, check the install”.

Check the install

Step 3, “Check the install”: enter the address of a page with the code under “Website address” and select “Check install”. The first time a visitor opens that page, Chatbotta sees the chat button and the step checks itself off. The check can tell you:

• Chat button seen on your site: You’re done. Select “Done”.
• The code is on the page: Open the page once and the check completes.
• Your site uses Google Tag Manager: Make sure the tag is submitted and published, then open the page once.
• The chat code belongs to another project: Paste this project’s code instead.
• Only part of the code is there: The code has two script blocks; copy the full code again and paste it.
• No chat code found: Make sure the code is pasted before the end of body and saved or published. If your site uses a cache, clear it and check again.
• Couldn’t open the address: Check that it’s correct and that the site is public (no login needed).

The website chat card in “Channels” then shows “Waiting for a test message”. Open your site and send a message; once the bot replies, it’s “Connected”.

Public chat link

No website yet? Step 2 has a chat link under “No website yet?”. Share it on social media, behind a button or in a QR code so customers can open it and chat; “Open chat link” lets you try it. Opening this link doesn’t complete the install check.

What visitors see

• A round chat button sits in the corner of your site. If you set a greeting, it appears next to the button and hides after 6 seconds.
• Visitors can type right after opening the chat. While it connects, a loading view shows; if it can’t connect, it shows “Can’t connect right now” with “Retry” instead of a window that silently doesn’t work.
• The chat window’s own words follow the visitor’s browser: English browsers get English, everything else gets Traditional Chinese. The bot’s replies stay in the language of your flows and knowledge.
• A message that didn’t go through is marked “Not sent”, and the visitor can resend it.
• Visitors who come back in the same browser continue their earlier conversation.

Hand off to a person

Website visitors are often anonymous passers-by. When a conversation goes to a person (the flow reaches a “Hand off to a person” step, or you take over in Chats), the chat window shows “A person will take over this chat” and “Leave a message here and we’ll reply as soon as we can.” Your replies from Chats appear in the visitor’s window as “Support team”.

You can also let visitors continue on LINE or Messenger so you can reach them later. Set this up under “When visitors want a person” in step 1; only connected channels are listed:

• Hand off to your LINE Official Account: The visitor selects “Continue on LINE” and gets a 6-digit code (valid for 30 minutes). They copy it, select “Open LINE”, add your account and send the code. The website conversation moves to LINE, and the chat window shows “Linked to LINE”. With more than one LINE Official Account, choose which one in “LINE Official Account to hand off to”; paused accounts aren’t offered.
• Hand off to Facebook Messenger: Choose a connected Page. The visitor selects “Continue on Messenger” and is taken to that Page’s Messenger; once linked, the chat window shows “Linked to Messenger”.

After the move, your team sees the whole website conversation in Chats, so the visitor doesn’t have to repeat themselves, and the conversation continues on LINE or Messenger. If no LINE account or Page is connected yet, this section says “No LINE Official Account or Facebook Page is connected yet. Connect one to turn on hand-off here.” If a channel you chose is disconnected later, visitors no longer see that option.

For an overview, see website visitors to LINE (in Chinese).

JavaScript API

Once the install code loads, your site can control the chat through window.Chatbotta, for example to have the bot introduce a product on its page or to pass in a member number. “Advanced: control the chat window with JavaScript” at the bottom of step 2 has an example too.

Method	What it does
Chatbotta.open() / Chatbotta.close()	Open or close the chat window, for example from your own “Contact us” button
Chatbotta.triggerFlow('STEP_ID')	The bot starts talking from that step. For a new visitor, this step replaces the welcome flow; for a returning visitor, it follows the existing conversation
Chatbotta.sendMessage('text')	Send a message as the visitor; the bot answers it like any other message
Chatbotta.setVariables({ field_name: value })	Set this visitor’s fields by name so steps in your flows can use them
Chatbotta.on('ready' | 'open' | 'close', fn)	Run your code when the chat is ready, opened or closed

triggerFlow and sendMessage open the chat window too. To prepare things in the background without opening it, add { open: false }. When the chat is ready, the page also gets a chatbotta:ready event.

<script>
  function withChatbotta(fn) {
    if (window.Chatbotta) fn(window.Chatbotta)
    else window.addEventListener('chatbotta:ready', function () { fn(window.Chatbotta) }, { once: true })
  }
  withChatbotta(function (chat) {
    chat.setVariables({ member_id: 'A123' })
    chat.triggerFlow('PASTE_STEP_ID')
  })
</script>

window.Chatbotta is available as soon as the install code loads. Calls made before the chat window is ready wait in a queue and run in order once it is.

Where do I find the step ID?

In your flow, select the step to open “Step settings”, expand “Advanced” and select “Copy” next to “Step ID”. The step must be published before your website can start it.

Open fields to your website first

So visitors can’t tamper with your data, only fields opened to your website can be set: in the “Fields” panel, open the field’s actions menu and choose “Let your website set it”, then publish. Only text and number fields work; up to 20 fields per call, and text up to 1,000 characters. Fields that aren’t open, don’t exist or have the wrong format are skipped with a [Chatbotta] warning in the browser console. These values come from the visitor’s browser, so never use them to decide permissions or discounts.

Troubleshooting

The chat button doesn’t appear on my site

• Check the address with step 3, “Check the install”, and follow what it says
• Make sure the code is somewhere every page loads, and that both <script> blocks are there
• With GTM, make sure the tag triggers on All Pages and the container is published (saving alone does nothing)
• If your site uses a cache or CDN, clear it and try again
• Look for errors in the browser’s developer console; if your site has a Content Security Policy, it must allow app.chatbotta.com

The chat button covers other buttons

Switch to “Bottom left”, or change the desktop and phone distances under “Adjust distance from the screen edges”.

Visitors don’t see the LINE or Messenger option

The hand-off options only appear once a person takes over the conversation, and only connected channels are listed. In “Channels”, check that the LINE Official Account or Page is “Connected”, then check “When visitors want a person” in step 1.

The JavaScript API does nothing

• Make sure you call it after the install code loads, or use the withChatbotta pattern above
• The step passed to triggerFlow must be published
• If the console shows a [Chatbotta] warning, check the step ID or field settings it mentions

If the chat works but the bot doesn’t reply, see Bot not replying?.

Related

Channels Statuses, reauthorizing and disconnecting

Connect a LINE Official Account

Connect Facebook and Instagram

Add an AI chat window to your website (in Chinese)