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のタイトルを設定するために使用します。

サンプルコード：

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

show-convokraft-header

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

サンプルコード：

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

bot-name

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

サンプルコード：

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

lt-prop-conversation

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

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

サンプルコード：

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

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

サンプルコード：

<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に設定されています。

サンプルコード：

<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のいずれかに設定できます。

サンプルコード：

<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属性は自動的に有効になります。

サンプルコード：

<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のさまざまな要素のスタイルを設定するために使用します。スタイルは以下のように設定できます：

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

<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"}'>
</convokraft-chat-bot>