Should your website have live chat? Add an AI chat widget to your site in 5 minutes

A visitor browsing your website has a small question about a product. If they can’t find the answer, they won’t email you; they’ll just close the tab. The chat button in the bottom-right corner (Webchat) exists to catch that question the moment it comes up. This article helps you weigh your options for website customer service and shows how to embed AI website chat in your own site.

Three options for website customer service

• Live human agents: the best experience, but it needs staff on shifts; after hours and on holidays it’s as good as absent
• Traditional chat plugins: essentially a message form or canned replies; visitors are long gone before they get an answer
• AI chatbot + human backup: AI answers most common questions instantly from your knowledge base and hands the rest to a person. This is currently the most cost-effective approach

Step 1: Get your chatbot ready

Website chat is just a “channel”; your chatbot is what answers the questions. If you don’t have one yet, follow this guide to create a project and put your common Q&As into the AI knowledge base. The same bot can serve LINE and your website at the same time, with nothing to rebuild.

Step 2: Set up the look of website chat (Webchat)

In your project, go to “Channels”, select “Add channel” and choose “Website chat”, or go to “Settings” › “Website chat” (see the website chat help):

• Set the brand name, greeting, brand color and logo so the chat window matches your site’s style
• Choose the chat button position (bottom left/bottom right) and its distance from the screen edges on desktop and phone
• If needed, under “When visitors want a person”, choose a connected LINE Official Account or Facebook Page so visitors can continue the conversation on LINE or Messenger

Step 3: Embed it in your website

In the “Add the code to your website” step, copy the code and paste it before </body> on every page of your site. It looks like this:

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

• Regular websites / WordPress: paste it into your theme’s footer or insert it with a plugin
• Google Tag Manager: the settings page provides a GTM version; add it as a Custom HTML tag and publish the container

Advanced: have your website start the conversation

Once embedded, your site’s JavaScript can control the chat window through window.Chatbotta. For example, when a visitor is on your plans page, have the bot speak first from the “plan introduction” step and pass their member number into the conversation:

<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('STEP_ID_OF_PLAN_INTRO_STEP')
  })
</script>

• Step ID: in your flow, select the step to open “Step settings”, expand “Advanced” and select “Copy” next to “Step ID”. The step must already be published
• Fields: first choose “Let your website set it” for the field in the “Fields” panel; only text and numbers are accepted
• More: you can also open and close the window or send a message as the visitor. See the website chat JavaScript API help for details

Step 4: Test and manage

• Open your website in a private window, click the chat button and ask a few questions
• Website visitors’ conversations arrive in Chats, managed together with LINE, Messenger and Instagram conversations
• When a person is needed, staff take over directly in Chats, and the visitor sees the human agent’s replies in the chat window

Want to learn more about everything website AI customer service can do? See the website AI customer service (Webchat) feature overview.

FAQ