チャットボットへのカスタム・スタイルの適用

チャットボットにカスタム・スタイルを適用して、デフォルトの外観を変更できます。 カスタム・スタイルは、チャットボットのデフォルトの Web チャット・ビュー (Direct Line Web チャット) でのみ使用できます。

始める前に

カスタム・スタイルは、チャットボットのデフォルトの Web チャット・ビューにのみ適用できます。 デフォルトの Web チャット・ビューは、Direct Line Web チャット・チャネルです。これは、 オンプレミスで IBM RPA のチャットボット・インスタンスを作成する の場合、または 要求の後に IBM RPA SaaS のチャットボット・インスタンスを取得する場合のデフォルト・チャネルです。

手順

チャット・マッピングを作成または編集する際の スタイリング ステップで、 JSON 構成 フィールドは、カスタム・スタイルを含む JSON データを受け入れます。 JSON 属性 セクションで説明されている 1 つ以上の属性を使用できます。

注:一部の属性にはデフォルト値があります。 これらの値は、Microsoft の Bot Framework SDK 4 の公式資料にある Web Chat customization 資料で確認できます。

JSON 属性

属性名 値のタイプ 説明
accent string Web チャット・コンポーネントのアクセントの色。
backgroundColor string 書き起こしの背景色。
subtle string 2 次コンポーネントの色。
paddingRegular number ほとんどのビジュアル・コンポーネントで使用されるデフォルトの埋め込み。
paddingWide number suggestedAction ボタンに使用される埋め込み。
transitionDuration string バブル、カルーセル、および StackedLayoutの遷移。
fontSizeSmall numberまたはstring sendStatusなどの 2 次コンポーネントに使用されるフォント・サイズ。
monospaceFont string ErrorBox コンマ・スペース区切りストリングに使用されるフォント。
primaryFont string ほとんどのビジュアル・コンポーネントで使用されるフォント。コンマ・スペースで区切られたストリングです。
rootHeight numberまたはstring ほとんどのビジュアル・コンポーネントで使用されるフォント。コンマ・スペースで区切られたストリングです。
rootWidth numberまたはstring ほとんどのビジュアル・コンポーネントで使用されるフォント。コンマ・スペースで区切られたストリングです。
rootZIndex number Web チャットのルート・コンテナーの場合は「z-index」。 これにより、新しいスタッキング・コンテキストが形成されるため、子で使用される「z インデックス」が汚染されることはありません。
avatarBorderRadius numberまたはstring ボットとユーザー・アバターの両方に使用される境界半径。
avatarSize number アバターの高さと幅。
botAvatarBackgroundColor string 背景色はデフォルトでアクセントになります。
botAvatarImage string URL ストリング。 データ URI または Blob botAvatarにすることができます。イニシャルは空ストリングに設定する必要があります。
botAvatarInitials string 通常は 2 文字でレンダリングされます。例: 「WC」。 botAvatarImageを設定する場合は、空ストリングが必要です。
userAvatarBackgroundColor string 背景色はデフォルトでアクセントになります。
userAvatarImage string URL ストリング。 データ URI または BLOB にすることができます。 userAvatarInitials は空ストリングに設定する必要があります。
userAvatarInitials string 通常は 2 文字でレンダリングされます。 「WC」。 userAvatarイメージを設定する場合は、空の文字列が必要です。
showAvatarInGroup true または 'sender' または 'status' Avatar グループ化は、3 つの異なるレベルで設定できます。 同じ送信者 (「送信者」) を共有するアクティビティーにアバターを表示します。 同じ状況 (「状況」、デフォルト) を共有するアクティビティーにアバターを表示します。 すべてのアクティビティーにアバターを表示 (true)。
bubbleBackground string 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleBorderColor string 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleBorderRadius number 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleBorderStyle string 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleBorderWidth number 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleFromUserBackground string 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleFromUserBorderColor string 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleFromUserBorderRadius number 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleFromUserBorderStyle string 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleFromUserBorderWidth number 「バブル」とは、ボットおよびユーザーからのアクティブ化のコンテナーを指します。 以下では、「fromUser」以外のプロパティーは、ボット・アクティビティーのスタイル設定を参照しています。
bubbleFromUserNubOffset number または 'bottom' または 'top' NIB オフセット「bottom」は、下部に NUL をレンダリングします。 正または負の数値は、NIB オフセットを上下にシフトします。 「top」は正のゼロに相当します。 「bottom」は負のゼロに相当します。
bubbleFromUserNubSize number NIB サイズ 0 を指定すると、鋭い角が表示されます。
bubbleFromUserTextColor string ユーザーからのテキストの色。
bubbleImageHeight number イメージの高さ。
bubbleMaxWidth number バブルの最大幅。
bubbleMinHeight number バブルの最小の高さ。
bubbleMinWidth number 小石の最小幅。
bubbleNubOffset number または 'bottom' または 'top' NIB オフセット「bottom」は、下部に NUL をレンダリングします。 正または負の数値は、NIB オフセットを上下にシフトします。 「top」は正のゼロに相当します。 「bottom」は負のゼロに相当します。
bubbleNubSize number NIB サイズ 0 を指定すると、鋭い角が表示されます。
bubbleTextColor string バブル内のテキストの色。
messageActivityWordBreak 'normal' または 'break-all' または 'break-word' または 'keep-all' 使用可能な説明がありません。
connectivityIconPadding number 使用可能な説明がありません。
connectivityMarginLeftRight number 使用可能な説明がありません。
connectivityMarginTopBottom number 使用可能な説明がありません。
connectivityTextSize numberまたはstring 使用可能な説明がありません。
failedConnectivity numberまたはstring 使用可能な説明がありません。
slowConnectivity string 使用可能な説明がありません。
notificationText string 使用可能な説明がありません。
slowConnectionAfter number 低速接続状況は、サービス応答なしで x 時間後にレンダリングされます。
emojiSet booleanまたはRecord<string, string> 絵文字スタイル。 true の場合、Web チャットのデフォルトの絵文字セットが有効になります。 カスタム・オブジェクトは、開発者によって指定された Unicode 絵文字を使用可能にします。 鍵: 顔文字。 値: Unicode 絵文字。
internalLiveRegionFadeAfter number 新規アクティビティーは非ビジュアル・ライブ領域でレンダリングされ、一定時間後に削除されます。 フェード・タイムを変更するには、このプロパティーを変更します。
markdownRespectCRLF boolean マークダウンを解析して、復帰が順守されるようにします。
markdownExternalLinkIconImage string アンカー・リンクに外部を示す新規イメージを割り当てます。
hideScrollToEndButton boolean スクロール・ツー・エンド・ボタンがレンダリングされないようにします。
autoScrollSnapOnActivity booleanまたはnumber 'snap-point' にアクティビティーをスナップします。 true の場合、1 つのアクティビティーを受信した後にスクロールが一時停止します。 数値を指定すると、アクティビティーの数が X になると一時停止します。
autoScrollSnapOnActivityOffset number 一時停止後にオーバースクロールまたはアンダースクロールするピクセル数を指定します。
autoScrollSnapOnPage booleanまたはnumber true の場合、アクティビティーがページをいっぱいにした後にスクロールが一時停止します。 数値 (0 から 1) を指定すると、ページの% が入力された後に一時停止します。
autoScrollSnapOnPageoffset number 一時停止後にオーバースクロールまたはアンダースクロールするピクセル数を指定します。
hideSendBox boolean 送信ボックスのスタイル。
hideUploadButton boolean 送信ボックスのスタイル。
microphoneButtonColorOnDictate string 送信ボックスのスタイル。
sendBoxBackground string 送信ボックスのスタイル。
sendBoxButtonColor string ボタンの色はデフォルトで微妙になります。
sendBoxButtonColorOnDisabled string ボタンの色はデフォルトで微妙になります。
sendBoxButtonColorOnFocus string ボタンの色はデフォルトで微妙になります。
sendBoxButtonColorOnHover string ボタンの色はデフォルトで微妙になります。
sendBoxDisabledTextColor string 無効になっているテキストの色は、デフォルトで微妙な色になります。
sendBoxHeight numberまたはstring 送信ボックスの高さ。
sendBoxMaxHeight numberまたはstring 送信ボックスの最大高さ。
sendBoxTextColor string 送信ボックスのテキスト色。
sendBoxBorderBottom numberまたはstring 送信ボックスの下部境界線のスタイル。
sendBoxBorderLeft numberまたはstring 送信ボックスの左境界線のスタイル。
sendBoxBorderRight numberまたはstring 送信ボックスの右境界線のスタイル。
sendBoxBorderTop numberまたはstring 送信ボックスの上部境界線のスタイル。
sendBoxPlaceholderColor string 送信ボックスのプレースホルダーの色。
sendBoxTextWrap boolean 送信ボックス・テキストを折り返すかどうか。
sendBoxButtonAlignment 'bottom' または 'stretch' または 'top' 送信ボックス・ボタンの位置合わせ。
showSpokenText boolean 発話テキストを表示します。
spinnerAnimationBackgroundImage string スピナー・アニメーション・スタイル。
spinnerAnimationHeight numberまたはstring スピナー・アニメーション・スタイル。
spinnerAnimationWidth numberまたはstring スピナー・アニメーション・スタイル。
spinnerAnimationPadding numberまたはstring スピナー・アニメーション・スタイル。
suggestedActionBackground string 推奨アクション。
suggestedActionBorderColor string 境界線の色はデフォルトでアクセントになります。
suggestedActionBorderRadius numberまたはstring アクション・ボーダーの半径。
suggestedActionBorderStyle string アクション境界線のスタイル。
suggestedActionBorderWidth numberまたはstring アクション境界線の幅。
suggestedActionDisabledBackground string 無効にされた背景は、デフォルトで suggestedActionの背景に設定されます。
suggestedActionDisabledBorderColor string アクション境界線の色が無効になりました。
suggestedActionDisabledBorderStyle string アクション・ボーダーのスタイルが無効になりました。
suggestedActionDisabledBorderWidth numberまたはstring アクション境界線の幅が無効になりました。
suggestedActionDisabledTextColor string 無効になっているテキストの色は、デフォルトで微妙な色になります。
suggestedActionHeight numberまたはstring 使用可能な説明がありません。
suggestedActionImageHeight numberまたはstring 使用可能な説明がありません。
suggestedActionLayout 'carousel' または 'flow' または 'stacked' 使用可能な説明がありません。
suggestedActionTextColor string 使用可能な説明がありません。
suggestedActionsCarouselFlipperCursor string フリッパーの上にマウスオーバーするとカーソルが表示されます。
suggestedActionsCarouselFlipperBoxWidth number フリッパー境界ボックスのサイズ。
suggestedActionsCarouselFlipperSize number フリッパー・ボタンの表示サイズ。
suggestedActionsFlowMaxHeight undefined 推奨アクション・フロー・レイアウト。 デフォルト値は「auto」です。
suggestedActionsStackedHeight numberまたは'auto' 積み上げ高さコンテナーの最大高さ。 デフォルト値は「auto」です。
suggestedActionsStackedOverflow string スタック・オーバーフローのデフォルト値は「auto」です。
suggestedActionsStackedLayoutButtonMaxHeight numberまたはstring suggestedActionsStackedLayoutButtonText折り返しが true の場合、ボタンの高さのデフォルト値は 100% です。
suggestedActionsStackedLayoutButtonTextWrap boolean ボタン・テキスト折り返しを true に設定すると、スタック・モードのボタンのみで長いテキストが折り返されます。
groupTimestamp boolean タイム・スタンプ。
sendTimeout number タイム・スタンプ。
sendTimeoutForAttachments number タイム・スタンプ。
timestampColor string タイム・スタンプの色のデフォルト値は微妙です。
timestampFormat 'absolute'または'relative' タイム・スタンプ形式。
transcriptTerminatorBackgroundColor string トランスクリプトのスタイル。
transcriptTerminatorBorderRadius numberまたはstring トランスクリプトのスタイル。
transcriptTerminatorColor string トランスクリプトのスタイル。
transcriptTerminatorFontSize numberまたはstring トランスクリプトのスタイル。
transcriptActivityVisualKeyboardIndicatorColor string トランスクリプトのスタイル。
transcriptActivityVisualKeyboardIndicatorStyle string トランスクリプトのスタイル。
transcriptActivityVisualKeyboardIndicatorWidth numberまたはstring トランスクリプトのスタイル。
transcriptVisualKeyboardIndicatorColor string トランスクリプトのスタイル。
transcriptVisualKeyboardIndicatorStyle string トランスクリプトのスタイル。
transcriptVisualKeyboardIndicatorWidth numberまたはstring トランスクリプトのスタイル。
newMessagesButtonFontSize numberまたはstring トランスクリプト・オーバーレイ・ボタン。 E.g., カルーセルおよび推奨アクション・フリッパー、下部までスクロール、その他
transcriptOverlayButtonBackground string トランスクリプト・オーバーレイ・ボタン。 E.g., カルーセルおよび推奨アクション・フリッパー、下部までスクロール、その他
transcriptOverlayButtonBackgroundOnDisabled string トランスクリプト・オーバーレイ・ボタン。 E.g., カルーセルおよび推奨アクション・フリッパー、下部までスクロール、その他
transcriptOverlayButtonBackgroundOnFocus string トランスクリプト・オーバーレイ・ボタン。 E.g., カルーセルおよび推奨アクション・フリッパー、下部までスクロール、その他
transcriptOverlayButtonBackgroundOnHover string トランスクリプト・オーバーレイ・ボタン。 E.g., カルーセルおよび推奨アクション・フリッパー、下部までスクロール、その他
transcriptOverlayButtonColor string トランスクリプト・オーバーレイ・ボタン。 E.g., カルーセルおよび推奨アクション・フリッパー、下部までスクロール、その他
transcriptOverlayButtonColorOnDisabled string トランスクリプト・オーバーレイ・ボタン。 E.g., カルーセルおよび推奨アクション・フリッパー、下部までスクロール、その他
transcriptOverlayButtonColorOnFocus string デフォルト値は transcriptOverlayButtonColorです。
transcriptOverlayButtonColorOnHover string デフォルト値は transcriptOverlayButtonColorです。
notificationDebounceTimeout number 新しいデバウンス・タイムアウト値は、新しい通知にのみ影響します。
hideToaster boolean トースター・スタイル
toasterHeight numberまたはstring トースター・スタイル
toasterMaxHeight numberまたはstring トースター・スタイル
toasterSingularMaxHeight numberまたはstring トースター・スタイル
toastFontSize numberまたはstring トースター・スタイル
toastIconWidth numberまたはstring トースター・スタイル
toastSeparatorColor string トースター・スタイル
toastTextPadding numberまたはstring トースター・スタイル
toastErrorBackgroundColor string トースター・スタイル
toastErrorColor string トースター・スタイル
toastInfoBackgroundColor string トースター・スタイル
toastInfoColor string トースター・スタイル
toastSuccessBackgroundColor string トースター・スタイル
toastSuccessColor string トースター・スタイル
toastWarnBackgroundColor string トースター・スタイル
toastWarnColor string トースター・スタイル
typingAnimationBackgroundImage string タイピング・アニメーション。
typingAnimationDuration number タイピング・アニメーション。
typingAnimationHeight numberまたはstring タイピング・アニメーション。
typingAnimationWidth numberまたはstring タイピング・アニメーション。
enableUploadThumbnail boolean サムネールをアップロードします。
uploadThumbnailContentType string サムネールをアップロードします。
uploadThumbnailHeight numberまたはstring サムネールをアップロードします。
uploadThumbnailQuality number サムネールをアップロードします。
uploadThumbnailWidth numberまたはstring サムネールをアップロードします。
videoHeight numberまたはstring ビデオの高さ。