---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/ecommerce-bot/deluge/configure-client/
description: "Catalyst ConvoKraft、Deluge関数、およびZoho CRMを使用して、ECサイト向けの会話型セールスアシスタントボットを構築します。Webサイトのユーザーと対話し、注文を管理します。"
last_updated: 2026-02-23T12:39:41Z
service: All Services
type: tutorial
related_links:
  - name: "ConvoKraft JS SDK"
    url: /ja/convokraft/sdk/js/overview/
---

# クライアントの設定

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

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

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

> **Note :** 各ファイルのコードを確認し、内容を十分に理解してください。

Catalystでは、[Catalyst Web Client Hosting](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)コンポーネントを使用して、Webアプリケーションのクライアント部分をホスティングできます。チュートリアルの[次のステップ](https://docs.catalyst.zoho.com/ja/tutorials/ecommerce-bot/deluge/deploy-to-console/)で、クライアントをコンソールにデプロイします。

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

ConvoKraftボットをアプリケーションに埋め込むには、クライアントディレクトリのabout.htmlファイルに以下のJavaScriptコードスニペットを追加して保存してください。また、ConvoKraftボットの外観をカスタマイズするために、クライアントアプリケーションに素早く組み込むことができる定義済みメソッドを含む[ConvoKraft Javascript SDK](https://docs.catalyst.zoho.com/ja/convokraft/sdk/js/overview/)パッケージも提供しています。

```xml
<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>

```

> **Note :** zipファイルのファイルを置き換えると、上記のコードスニペットは`about.html`ファイルに既に含まれています。上記のコードの`bot-name`、`project-id`、`org-id`属性に正しい値を追加するだけで済みます。

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

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