---
title: "概要"
url: https://docs.catalyst.zoho.com/ja/convokraft/sdk/js/overview/
description: "Catalystアプリケーションに強力なチャットBotアシスタントを統合する機能を持つCatalyst ConvoKraftサービスが提供するJS SDKパッケージについて学びます。"
last_updated: 2026-02-23T12:39:41Z
service: ConvoKraft
type: general
---

# ConvoKraft JavaScript Client SDK

### 概要

ConvoKraft JavaScript SDKを使用すると、Webアプリケーションに簡単にConvoKraft Botを追加でき、ユーザーはプログラムされたチャットウィンドウを通じてBotと直接対話できます。

このドキュメントでは、JavaScript SDKをCatalyst Webアプリケーションに統合し、アプリケーションの特定の要件に応じてConvoKraft Botをカスタマイズする手順について詳しく説明します。

このSDKは、以下の最小バージョンを含むすべてのモダンWebブラウザをサポートしています：

<table class="content-table">
        <thead>
            <tr>
                <th>ブラウザ</th>
                <th>バージョン</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Microsoft Edge</td>
                <td>12+</td>
            </tr>
            <tr>
                <td>Mozilla Firefox</td>
                <td>21+</td>
            </tr>
            <tr>
                <td>Google Chrome</td>
                <td>23+</td>
            </tr>
            <tr>
                <td>iOS Safari</td>
                <td>6+</td>
            </tr>
            </tbody>
</table>

### SDK統合

ConvoKraft JS SDKをアプリケーションに組み込むために、Webアプリケーションのソースコードの`index.html`ファイルに以下のコードスニペットを追加してください：

```html
&lt;script src="https://console.catalyst.zoho.com/convokraft/assets/js/convokraft-chat-sdk.js"&gt;
&lt;/script&gt;

```

チャットウィンドウを従来のチャットBotの位置、つまりCatalyst Webアプリケーション画面の右下隅に表示するために、以下のコードスニペットをWebアプリケーションに含めるようにしてください。さらに、サイズ、位置、外観を変更し、必要に応じてチャットウィンドウを完全にカスタマイズできます。詳細については[このセクション](https://docs.catalyst.zoho.com/ja/convokraft/sdk/js/customization-of-a-bot)で説明します。

```html
&lt;div class="anchor_convokraft_toBottom"&gt;
&lt;convokraft-chat-bot bot-name="test" project-id="6687000000009014" org-id="74535893"&gt;&lt;/convokraft-chat-bot&gt;
&lt;/div&gt;
Style - 
&lt;style&gt;
div.anchor_convokraft_toBottom {
width: 330px;
height: 450px;
position: fixed;
bottom: 0;
right: 0;
}
&lt;/style&gt;

```

> **注意:**

1. **convokraft-chat-sdk.js**は**&lt;convokraft-chat-bot/&gt;**タグの後に含めるようにしてください。

2. このSDKは固定位置指定で最適に動作するため、**&lt;convokraft-chat-bot/&gt;**タグを囲むコンテナは固定位置指定のものにしてください。