クライアントの設定

それでは、クライアントコンポーネントを設定しましょう。初期化したクライアントディレクトリには以下が含まれています：

• フロントエンドアプリケーションのHTMLコード用のindex.htmlファイル
• CSSコード用のmain.cssファイル
• JavaScriptコード用のmain.jsファイル
• client-package.json設定ファイル

このzipファイルをダウンロードし、中のすべてのファイルをコピーして、クライアントディレクトリに作成されたデフォルトのクライアントファイルと置き換えることができます。このgitリポジトリには、デフォルトのファイル以外にも追加のファイルが含まれています。クライアントコード全体と必要な画像やアイコンファイルがすべてパッケージされていますので、zipファイルとしてダウンロードしてください。

Catalystでは、Catalyst Webクライアントホスティングコンポーネントを使用して、Webアプリケーションのクライアント部分をホストできます。先ほど作成した関数と一緒に、チュートリアルのこのステップでクライアントをコンソールにデプロイします。

ウェブサイトへのボットの埋め込み

ConvoKraftボットをアプリケーションに埋め込むには、クライアントディレクトリのcontact.htmlファイルに以下のJavaScriptコードスニペットを追加して保存してください。また、ConvoKraftボットの外観をカスタマイズするためにクライアントアプリケーションにすぐに組み込める定義済みメソッドを含むConvoKraft Javascript SDKパッケージも提供しています。

<script src="https://console.catalyst.zoho.com/convokraft/assets/js/convokraft-chat-sdk.js">
</script>
<style>
div.anchor_zia_toBottom {
width: 330px;
height: 450px;
position: fixed;
bottom: 0;
right: 0;
}
</style>
<div class="anchor_zia_toBottom">
<convokraft-chat-bot bot-name="ecommercebot_2" project-id="10644000000029001" org-id="74779991">
</convokraft-chat-bot>
</div>

このページのURLを取得します。以下のように表示されます： https://console.catalyst.zoho.com/baas/74779991/project/10644000000029001/Development#/convokraft/bots/50803000000018005

ここで「74779991」がorgID、「10644000000029001」がprojectIDです。