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

# Botのカスタマイズ

ConvoKraft JS SDKは、アプリケーションの特定の要件に合わせてチャットウィンドウのさまざまな要素をカスタマイズすることをサポートしています。以下の属性は、Webアプリケーションのソースコードの`index.html`ファイル内の**<convokraft-chat-bot>**タグで使用する必要があります：

* `lt-prop-convokraft-title`
* `show-convokraft-header`
* `bot-name`
* `lt-prop-conversation`
* `show-help`
* `show-typing-suggestions`
* `show-action-suggestions`
* `lt-prop-styles`

### lt-prop-convokraft-title

この属性は、チャットウィンドウUIのタイトルを設定するために使用します。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-bot-title="Ask convokraft">
</convokraft-chat-bot>

```

### show-convokraft-header

この属性は、チャットウィンドウのヘッダーを表示するかどうかをConvoKraft Botに知らせるために使用されます。この属性の値は、要件に応じて`true`または`false`に設定できます。デフォルトでは`true`に設定されています。値が`false`に設定されている場合、チャットウィンドウのヘッダーは表示されません。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" show-convokraft-header="false">
</convokraft-chat-bot>

```

### bot-name

この属性の値として特定のBot名（bot namespace）を指定すると、ConvoKraftはその特定のBotとのみ会話します。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "ecommercebot" ></convokraft-chat-bot>

```

### lt-prop-conversation

この属性は、Bot会話内のメッセージの配置を設定するために使用します。この属性の値は`true`または`false`のいずれかに設定できます。

* `true`の場合、チャットウィンドウ内のすべてのメッセージ会話が会話ビューに変換されます（ユーザーメッセージは右揃え、ConvoKraftの応答はチャットウィンドウの左揃えになります）。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" lt-prop-conversation="true">
</convokraft-chat-bot>

```

* `false`の場合、チャットウィンドウ内のすべてのメッセージ会話は左揃えになります。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" 
lt-prop-conversation="false">
</convokraft-chat-bot>

```

### show-help

この属性は、チャットウィンドウの入力エリアの横にヘルプアイコンを有効にするために使用できます。ヘルプアイコンをクリックすると、onboarding screenが表示されます。

onboarding screenには、そのConvoKraft Bot用に設定されたSample SentencesまたはAction suggestionsが含まれています。この属性の値は`true`または`false`に設定できます。デフォルトでは`false`に設定されています。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true">
</convokraft-chat-bot>

```

### show-typing-suggestions

この属性は、入力エリアでメッセージを入力している間にaction suggestionsを同時に表示するために使用されます。この属性の値は`true`または`false`のいずれかに設定できます。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true" show-history="true" show-typing-suggestions="true">
</convokraft-chat-bot>

```

### show-action-suggestions

この属性は、各チャット会話の最後にaction suggestionsを表示するために使用できます。この属性の値は`true`または`false`のいずれかに設定できます。

この属性が有効になっている場合、`show-typing-suggestions`属性は自動的に有効になります。

**サンプルコード：**

```javascript
<convokraft-chat-bot lt-prop-convokraft-title="Ask convokraft" bot-name = "aqualordappointmentbooker" show-help="true" show-history="true" show-action-suggestions="true">
</convokraft-chat-bot>

```

### lt-prop-styles

この属性は、チャットウィンドウUIのさまざまな要素のスタイルを設定するために使用します。スタイルは以下のように設定できます：

<table class="content-table">
        <thead>
            <tr>
                <th>属性名</th>
                <th>用途</th>
                <th>値</th>
                <th>例</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>`headerBg`</td>
                <td>チャットウィンドウヘッダーの背景色を設定します。</td>
                <td>任意の色の値を指定できます。</td>
                <td>#5acc42</td>
            </tr>
            <tr>
                <td>`headerText`</td>
                <td>チャットウィンドウヘッダーのテキスト色を設定します。</td>
                <td>任意の色の値を指定できます。</td>
                <td>black</td>
            </tr>
            <tr>
                <td>`headerFont`</td>
                <td>チャットウィンドウヘッダーテキストのフォントファミリーを設定します。</td>
                <td>任意のフォントファミリー名を指定できます。</td>
                <td>sans-serif</td>
            </tr>
            <tr>
                <td>`userBg`</td>
                <td>チャットウィンドウ内のユーザーメッセージコンテナの背景色を設定します。</td>
                <td>任意の色の値を指定できます。</td>
                <td>#5acc42</td>
            </tr>
            <tr>
                <td>`userText`</td>
                <td>ユーザーメッセージコンテナ内のテキスト色を設定します。</td>
                <td>任意の色の値を指定できます。</td>
                <td>black</td>
            </tr>
            <tr>
                <td>`userFont`</td>
                <td>ユーザーメッセージコンテナ内のテキストのフォントファミリーを設定します。</td>
                <td>任意のフォントファミリー名を指定できます。</td>
                <td>Comic Sans MS</td>
            </tr>
            <tr>
                <td>`botBg`</td>
                <td>チャットウィンドウ内のConvoKraftメッセージコンテナの背景色を設定します。</td>
                <td>任意の色の値を指定できます。</td>
                <td>#ddd</td>
            </tr>
            <tr>
                <td>`botText`</td>
                <td>ConvoKraftメッセージコンテナ内のテキスト色を設定します。</td>
                <td>任意の色の値を指定できます。</td>
                <td>#222</td>
            </tr>
            <tr>
                <td>`botFont`</td>
                <td>ConvoKraftメッセージコンテナ内のテキストのフォントファミリーを設定します。</td>
                <td>任意のフォントファミリー名を指定できます。</td>
                <td>Arial</td>
            </tr>
            <tr>
                <td>`bodyBg`</td>
                <td>チャットウィンドウ本体の背景色を設定します。</td>
                <td>任意の色の値を指定できます。</td>
                <td>#ddd</td>
            </tr>
            </tbody>
</table>

`lt-prop-styles`属性の場合、スタイルとその値は以下のサンプルコードに示すようにJSON形式で指定する必要があります：

```javascript
&lt;convokraft-chat-bot  lt-prop-conversation="true" 
lt-prop-styles='{"headerBg":"#5acc42", "headerText":"black", "headerFont":"sans-serif", "userBg":"#5acc42", "userText":"black", "botBg":"#ddd", "botText":"#222", "userFont":"Comic Sans MS", "botFont":"Arial", "bodyBg":"#ddd"}'&gt;
&lt;/convokraft-chat-bot&gt;

```