Getting started

Install the widget

One script tag adds the chat widget to any website. On SPAs such as React, Vue, and Next.js, page changes are tracked automatically.

#Install code

Copy the snippet that includes your project ID from Dashboard → project → Install code, and place it before </body> on every page. Putting it once in a shared layout (header/footer template) is enough.

Add your site domain under Allowed domains in project settings to stop other sites from using the widget. Leave it empty to allow every domain.

<script src="https://app.cliptalk.net/widget/{PROJECT_ID}" async></script>

#Signed-in customers

Pass the signed-in customer so they do not re-enter their name and email, and so the console and AI bot know who they are talking to.

Define window.CliptalkSettings before the script, or call Cliptalk.identify() after login.

Field	Description
`id`	Customer ID (your internal identifier)
`name`	Name
`email`	Email
`phone`	Phone number
`hash`	(Optional) A signature created on your server. Used for unauthenticated identity checks on a connector

Never send secrets such as passwords, national ID numbers, or card numbers.

<script>
  window.CliptalkSettings = {
    user: {
      id: 'user_1001',
      name: 'Alex Kim',
      email: 'clip@example.com',
      phone: '010-1234-5678'
    },
    locale: 'en'   // optional: ko | en | ja | zh-TW | zh-CN
  };
</script>
<script src="https://app.cliptalk.net/widget/{PROJECT_ID}" async></script>

#Language

The widget language (and the AI bot’s greeting and system prompts) is chosen in this order.

CliptalkSettings.locale
The page’s <html lang="…">
The first URL segment (/en, /jp, /tw …)
The browser language

On a multilingual site, call Cliptalk.setLocale('en') when the visitor switches language and the widget updates immediately.

document.querySelector('#lang-en').onclick = () => {
  window.Cliptalk.setLocale('en');
};

#Page context

The widget automatically sends the URL and title of the page the customer is viewing. Agents see that page in the console, and the AI bot answers questions like “Is this product in stock?” against the current page. No extra setup is required.