---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/ecommerce-bot/nodejs/configure-client/
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クライアントホスティング](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)コンポーネントを使用して、Webアプリケーションのクライアント部分をホストできます。[先ほど作成した](https://docs.catalyst.zoho.com/ja/tutorials/ecommerce-bot/nodejs/configure-function/)関数と一緒に、チュートリアルの[このステップ](https://docs.catalyst.zoho.com/ja/tutorials/ecommerce-bot/nodejs/deploy-to-console/)でクライアントをコンソールにデプロイします。

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

ConvoKraftボットをアプリケーションに埋め込むには、クライアントディレクトリの`contact.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 :** 上記のコードのボット名、プロジェクトID、組織ID属性に正しい値を設定してください。コンソールで`EcommerceBot`を開き、Bots Detailsページでボットのnamespaceが`bot-name attribute`の値となります。

このページのURLを取得します。以下のように表示されます：
[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`です。