はじめに

ウィジェットの設置

スクリプト 1 行で、どのウェブサイトにもチャットウィジェットを置けます。React・Vue・Next.js などの SPA でも、ページ移動を自動で追跡します。

#インストールコード

ダッシュボード → プロジェクト → インストールコード タブから、プロジェクト ID 入りのコードをコピーし、すべてのページの </body> の前に置きます。共通レイアウト（ヘッダー / フッターのテンプレート）に 1 回入れるだけで十分です。

プロジェクト設定の 許可ドメイン にサイトのドメインを登録すると、他サイトでの無断利用を防げます。空のままにすると、すべてのドメインで動作します。

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

#ログイン会員の連携

ログイン中の会員情報を渡すと、お客様が名前やメールを再入力する必要がなくなり、コンソールと AI ボットが誰と話しているか分かります。

スクリプトより先に window.CliptalkSettings を定義するか、ログイン後に Cliptalk.identify() を呼び出します。

フィールド	説明
`id`	会員 ID（サイト内部の識別子）
`name`	名前
`email`	メールアドレス
`phone`	電話番号
`hash`	（任意）サーバーで作った署名。コネクタの認証なし本人確認に使います

パスワード、マイナンバー、カード番号などの機密情報は絶対に渡さないでください。

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

#言語

ウィジェットの言語（と AI ボットのあいさつ・案内文）は、次の順で決まります。

CliptalkSettings.locale
ページの <html lang="…">
URL の先頭パス（/en、/jp、/tw …）
ブラウザの言語

多言語サイトで言語を切り替えるときは Cliptalk.setLocale('ja') を呼ぶと、ウィジェットもすぐに切り替わります。

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

#ページ情報

ウィジェットは、お客様が見ているページの URL とタイトルを自動で送ります。オペレーターはコンソールでどのページにいるかを確認でき、AI ボットは「この商品の在庫はありますか？」のような質問に、今のページを基準に答えます。追加設定は不要です。