ウェブチャットウィジェットは、<script> タグ 1 行で任意のウェブページに置けるチャットバブルです。訪問者は自社の AI とチャットし、人が引き継いだときもその返信は同じバブルにリアルタイムで表示されます。
wk_… のようなトークン）が入っています。そこで Copy snippet を使い、サイトに入れる前に Preview widget で確認してください。設定を参照してください。サイトへの追加
閉じ </body> タグの直前にスニペットを貼り付けます。
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here"></script>ウィジェットは独自のフレームで読み込まれるため、自社サイトのスタイルやスクリプトと衝突しません。
オプション
| 属性 | 働き |
|---|---|
data-key |
必須。Settings にあるデスクのウィジェットキー。 |
data-position |
right（既定）または left。バブルを置く角。 |
data-offset |
角からのピクセル数（既定 20）。 |
data-lang |
ウィジェットの言語を固定します（例: ja）。指定しなければ、訪問者ごとにその人のブラウザの言語になります。 |
同じ角に reCAPTCHA のバッジが表示されるページでは、重ならないようウィジェットが自動的に上にずれます。
ウィジェットが話す言語
何も指定しなければ、ウィジェットは訪問者それぞれのブラウザの言語に従います。英語サイトを訪れた日本語の訪問者には日本語のバブルが出ます。設定は不要で、同じページの訪問者どうしが別の言語を見ることもあります。
1 つの言語に固定したい場合（読み手が誰であれ 1 つの市場に向けたサイトなど）は、data-lang を追加します。
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here" data-lang="ja"></script>11 言語に翻訳済みです。英語、日本語、韓国語、中国語（簡体字・繁体字）、スペイン語、フランス語、ドイツ語、ポルトガル語、アラビア語、ロシア語です。アラビア語は右から左に表示され、中国語は訪問者の字体に合わせます。台湾・香港・マカオでは繁体字、それ以外では簡体字です。それ以外の言語は、中途半端に翻訳されたバブルを見せる代わりに英語にフォールバックします。つまり data-lang="it" は英語になります。
data-lang に従います。AI の回答は顧客が書いた言語に従います。そして AI が答えられるのはその言語で書かれたナレッジベースの記事だけです。英語の記事が日本語の質問に答えることはありません。2 つの言語で顧客対応をするなら、記事も両方の言語で書いてください。ナレッジベースを参照してください。ホスト型のウェブフォームも同じです。アドレスに ?lang=ja を付ければ固定され、付けなければ訪問者に従います。
ブランドカラー
色を選ぶまでは、チャットは当社のティール色です。自社の色を選ぶと、チャットのヘッダーとボタン、顧客自身のメッセージ、チャットを開いている間のランチャーの閉じる（✕）ボタン、そしてホスト型のウェブフォームにその色が使われます。
- デスクの Settings を開く。Web chat のセクションで、Chat bubble icon のすぐ下にある Brand colour（ブランドカラー）を探します。
- 色を選び、Save colour をクリック。
- 気が変わったら。Reset to default で当社のティール色に戻ります。
色はおよそ 5 分以内にサイトに反映され、スニペットを貼り直す必要はありません。アイコンと同じく、変更できるのはデスクの Admin と Owner だけです。
自前のバブルアイコンを使う
既定では、サイト上のランチャーは当社のティール色のバブルに吹き出しアイコン（💬）です。自前の PNG に差し替えて、ウィジェットを自社サイトの一部らしく見せられます。アップロードした画像はボタン全体になります。56 ピクセルのランチャー全面を占め、その背後に当社のティールの円を描くことはもうありません。
- デスクの Settings を開く。Web chat のセクションで Chat bubble icon を探します。
- Upload PNG をクリックしてファイルを選びます。ボタンの横のプレビューバブルに、ランチャーの見え方がそのまま表示されます。
- 気が変わったら。Reset to default で当社の吹き出しアイコンに戻ります。
| 画像 | 条件 |
|---|---|
| 形式 | PNG |
| 推奨サイズ | 正方形、112×112 ピクセル以上 |
| 表示サイズ | ランチャー全面、56×56 ピクセル |
| 形 | 画像自体が決めます — 透過背景を強く推奨します |
| ファイルサイズ | 最大 256 KB |
ランチャーは 56×56 ピクセルで描画されるため、112×112 以上の元画像にしておくと高解像度の画面でもマークが鮮明に保たれます。影はこちらで付け、あなたの図柄の輪郭に沿うので、PNG に影を焼き込む必要はありません。
ランチャーのアイコンは画像なので、ブランドカラーで塗り替えられることはありません。アップロードしたアイコンが、そのまま訪問者に見える姿です。あなたの画像の背後に当社の円を描かなくなったので、透過 PNG を使えば、訪問者に見える色は自社の図柄の色そのものになります。
訪問者に見えるもの
- バブルを開き、名前、メールアドレス、最初のメッセージを入力します。
- AI が回答します。自社のナレッジから、出典付きで、チャットの中で。自社チームの誰かを待つ必要はありません。
- 人が引き継げます。その返信は数秒のうちに同じチャットに表示されます。
訪問者が残したメールアドレスが、次回その人を識別する手がかりになります。顧客ストアを参照してください。
data-key と、フォームが送信している場所を更新してください。ウェブチャットは 5 つの到達経路のうちの 1 つです。顧客からの到達経路と、チャットが始まったあとのチケットの流れを参照してください。