ページに Web チャットを組み込む

ウェブチャットウィジェットをウェブサイトに追加するには、HTMLソースに生成されたスクリプト要素を埋め込む必要があります。

ウェブチャットの統合は、すべてのAIアシスタントに自動的に含まれ、各環境ごとに個別に設定されます。

Reactベースのアプリケーションとウェブチャットの統合については、こちらをご覧ください。

ウェブチャットをウェブサイトに追加するには

統合ページで、ウェブチャットタイルを見つけ、[開く]をクリックします。 「Web チャットを開く (Open web chat)」ウィンドウが開きます。
環境]フィールドで、Webチャットウィジェットに接続させたい環境を選択します。 「確認 (Confirm)」をクリックします。

「Web チャット」ページが開き、選択された環境における Web チャット統合の設定が示されます。

プレビューペインは、ウェブチャットがウェブページに埋め込まれたときにどのように見えるかを表示します。 There is an errorで始まるメッセージが表示されたら、まだAIアシスタントにアクションを追加していない可能性があります。アクションを追加した、プレビュー・ペインから会話をテストします。
Embedタブをクリックします。

Web チャット構成に基づいてコード・スニペットが生成されます。このコード・スニペットは、Web チャットが表示される Web ページに自分で (または Web 開発者が) 追加します。

このコード・スニペットには、HTML script エレメントが含まれています。スクリプトは、IBMのサイトでホストされているJavaScriptコードを呼び出し、AIアシスタントと通信するウィジェットのインスタンスを作成する。
Copy to clipboardアイコンをクリックして、埋め込みスクリプトをクリップボードにコピーします。
Web チャット・ウィジェットが表示される Web ページの HTML ソースを編集します。コード・スニペットをページに貼り付けます。コードを終了 </body> タグのできるだけ近くに貼り付けて、ページがより速く表示されるようにします。

生成された組み込みスクリプト内の integrationID プロパティー値や region プロパティー値は変更しないでください。

Web チャットを稼働中の Web サイトに追加する準備ができていない場合は、ローカル HTML ファイルを使用して素早く Web チャットをテストします。以下の HTML コードをテスト・ページのソースとして使用します。
```
<html>
<head></head>
<body>
    <title>My Test Page</title>
    <p>The body of my page.</p>
    &lt;!-- copied script elements --&gt;
    </body>
</html>
```
このコードを拡張子'.htmlのファイルにコピーし、'script要素を前のステップでコピーした埋め込みスクリプトに置き換える。

埋め込みスクリプトの識別子（'integrationID'serviceInstanceID など）は秘密とはみなされず、あなたのウェブサイトにアクセスできる人なら誰でも見ることができます。詳しくはセキュリティーを参照。
ウェブサイトをホストするシステムのインターネットアクセスが制限されている場合（プロキシやファイアウォールを使用している場合など）、ウェブチャットをホストする URL がアクセス可能であることを確認してください。詳細については、ウェブチャットホストへのアクセスを参照してください。
ブラウザーで Web ページ (またはローカル・テスト・ファイル) を開きます。ページにというランチャーアイコンが表示されているはずです。
ランチャー・アイコンをクリックしてチャット・ウィンドウを開きます。
同じ埋め込みスクリプトを、AIアシスタントを利用させたい各ウェブページに貼り付けます。

同じスクリプトのタグを、何ページでも必要なだけ、Web サイトのページに貼り付けることができます。ユーザーがAIアシスタントに助けを求めることができるようにしたい場所に追加してください。ただし、これを追加するのは、各ページで 1 回のみにしてください。

AIアシスタントをテストし、顧客と同じようにその反応を見ることができる。

ただし、この Web チャットを実動で使用する前に、ご使用のサイトや顧客のニーズに合わせて、この Web チャットをカスタマイズしなければならないことがあります。詳しくは、ウェブチャット開発の概要をご覧ください。