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

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

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

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

React ベースのアプリケーションとの webchat の統合については、 ここ で代替方法を参照してください。

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

  1. 統合アイコン の統合ページで、 ウェブチャットのタイルを見つけ、 [開く] をクリックします。 **「Web チャットを開く (Open web chat)」**ウィンドウが開きます。

  2. 「環境」 フィールドで、Web チャット・ウィジェットを接続する環境を選択します。 「確認」 をクリックします。

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

    プレビューパネルには、ウェブページに埋め込んだ際のウェブチャットの表示イメージが表示されます。 There is an error で始まるメッセージが表示される場合は、アシスタントにアクションがまだ追加されていない可能性があります。 アクションを追加した、プレビュー・ペインから会話をテストします。

  3. **「埋め込む (Embed)」**タブをクリックします。

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

    このコード・スニペットには、HTML script エレメントが含まれています。 スクリプトによって、IBM サイトでホストされている JavaScript コードが呼び出され、アシスタントと通信するウィジェットのインスタンスが作成されます。

  4. 「コピー」アイコン **「クリップボードにコピー」**アイコンをクリックして、組み込みスクリプトをクリップボードにコピーします。

  5. 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>
    <!-- copied script elements -->
    </body>
</html>

    このコードを .html という拡張子を持つファイルにコピーし、 script 要素を、前のステップでコピーした埋め込みスクリプトに置き換えます。

    埋め込みスクリプト内の ID ( integrationID serviceInstanceID など) はシークレットとは見なされず、Web サイトにアクセスできるすべてのユーザーに表示されます。 詳しくは、 セキュリティー を参照してください。

  6. お客様のウェブサイトをホスティングしているシステムがインターネットアクセスに制限がある場合（プロキシやファイアウォールを使用している場合など）、ウェブチャットをホスティングしているURLにアクセスできることを確認してください。 詳しくは、 Web チャットホストへのアクセス を参照してください。

  7. ブラウザーで Web ページ (またはローカル・テスト・ファイル) を開きます。 ページに表示されているランチャーアイコン （ウェブチャットのランチャーアイコン ）を確認してください

  8. ランチャー・アイコンをクリックしてチャット・ウィンドウを開きます。

  9. 顧客にアシスタントを使用できるようさせる各 Web ページに、同じ組み込みスクリプトを貼り付けます。

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

これで、アシスタントをテストして、顧客に表示される応答と同じ応答を確認できるようになりました。

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