クライアントの設定

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

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

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

Catalystでは、Catalyst Web Client Hostingコンポーネントを使用して、Webアプリケーションのクライアント部分をホスティングできます。チュートリアルの次のステップで、クライアントをコンソールにデプロイします。

ボットをWebサイトに埋め込む

ConvoKraftボットをアプリケーションに埋め込むには、クライアントディレクトリのabout.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>

コンソールでEcommerceBotを開き、Bots Detailsページで、ボットのnamespaceがこのbot-name属性の値になります。 https://console.catalyst.zoho.com/baas/74779991/project/10644000000029001/Development#/convokraft/bots/50803000000018005

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