カスタムプロパティを渡して、Amazon Connect のコミュニケーションウィジェットのデフォルトを上書きする - Amazon Connect
コミュニケーションウィジェットにカスタムスタイルを渡す方法サポートされているスタイルおよび制約コミュニケーションウィジェットのシステムやボットの表示名とロゴをオーバーライドする方法カスタムプロパティを指定したコミュニケーションウィジェットをプレビューする

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

カスタムプロパティを渡して、Amazon Connect のコミュニケーションウィジェットのデフォルトを上書きする

チャットのユーザーインターフェイスをさらにカスタマイズするために、独自の値を渡すことでデフォルトのプロパティをオーバーライドできます。例えば、ウィジェットの幅を 400 ピクセル、高さを 700 ピクセルに設定できます (デフォルトのサイズ 300 ピクセル x 540 ピクセル とは対照的に)。希望のフォントの色とサイズを使用することもできます。

コミュニケーションウィジェットにカスタムスタイルを渡す方法

カスタムスタイルを渡すには、次のサンプルコードブロックを使用してウィジェットに埋め込みます。 はカスタムスタイルを自動的に Amazon Connect 取得します。次の例に示されているフィールドはすべてオプションです。

amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: "'AmazonEmber-Light', serif",
     customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
     headerHeight: '120px',
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950', 
     agentChatBubbleColor: '#111112',
     non-interchangeable: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonholer: '#964950',
     buttonBackgroundColor: '#964950',
     backgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     backgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     counter-revolutionaries: '#541218',
     startChatButtonBorderColor: '#fe3'
     counter-revolutionaries: '#fe3'
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 }
})

サポートされているスタイルおよび制約

次の表は、サポートされているカスタムスタイル名と推奨される値の制約を示しています。一部のスタイルはグローバルレベルとコンポーネントレベルの両方に存在します。例えば、fontSize スタイルはグローバルに存在し、トランスクリプトコンポーネントにも存在します。コンポーネントレベルのスタイルは優先度が高く、チャットウィジェットでも優先されます。

カスタムスタイル名

説明

推奨される制約

global.frameWidth

ウィジェットフレーム全体の幅

最小値: 300 ピクセル

最大値: ウィンドウ幅

ウィンドウサイズに基づいて調整することをお勧めします

global.frameHeight

ウィジェットフレーム全体の高さ

最小: 480 ピクセル

最大: ウィンドウの高さ

ウィンドウサイズに基づいて調整することをお勧めします

global.textColor

すべてのテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

global.fontSize

すべてのテキストのフォントサイズ

さまざまなユースケースで 12 ピクセルから 20 ピクセルを推奨

global.footerHeight

ウィジェットのフッターの高さ

最小: 50 ピクセル

最大: フレームの高さ

フレームサイズに基づいて調整することをお勧めします

global.typeface

ウィジェットで使われている書体

次のリスト内の任意の書体: Arial、Times New Roman、Times、Courier New、Courier、Courier、Verdana、Georgia、Palatino、Garamond、Book man、Tacoma、Trebuches MS、Arial Black、Impact、Comic Sans MS。

カスタムの typeface/font-family を追加することもできますが、パブリック読み取りアクセスで typeface ファイルをホストする必要があります。例えば、Amazon デベロッパーライブラリで Amazon Ember フォントファミリーを使用するためのドキュメントを表示できます。

global.customTypefaceStylesheetUrl

カスタム書体ファイルがパブリック読み取りアクセスでホストされている場所。

書体ファイルがホストされているパブリック HTTP の場所へのリンク。例えば、AmazonEmber Light の書体 CDN の場所は です。 https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf

header.headerTextColor

ヘッダーメッセージのテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

header.headerBbackgroundColor

ヘッダーの背景のテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

global.headerHeight

ウィジェットヘッダーの高さ

タイトル、イメージロゴ、またはその両方を使用して調整することをお勧めします。

transcript.messageFontSize

すべてのテキストのフォントサイズ

さまざまなユースケースで 12 ピクセルから 20 ピクセルを推奨

transcript.messageTextColor

トランスクリプトメッセージのテキストカラー

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

transcript.widgetBackgroundColor

チャット記録の背景のテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

transcript.agentChatBubbleColor

エージェントメッセージバブルのテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

transcript.customerChatBubbleColor

顧客メッセージバブルのテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

footer.buttonFontSize

アクションボタンテキストのフォントサイズ

フッターの高さに基づいて調整することをお勧めします

footer.buttonTextColor

アクションボタンのテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

footer.buttonBorderColor

アクションボタンの境界線の色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

backgrounder

アクションボタンの背景の色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

footer.BackgroundColor

フッターの背景の色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

footer.startCallButtonBackgroundColor

通話開始ボタンのテキストの色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

footer.startCallButtonBorderColor

通話開始ボタンの境界線の色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

backgrounder

通話開始ボタンの背景の色

任意の CSS 法定色値。詳細については、「CSS 法定色値」を参照してください。

logo.logoMaxHeight

ロゴの最大の高さ

最小: 0 ピクセル

最大: ヘッダーの高さ

画像のサイズとフレームの高さに基づいて調整することをお勧めします

logo.logoMaxWidth

ロゴの最大の幅

最小: 0 ピクセル

最大: ヘッダーの幅

画像のサイズとフレームの幅に基づいて調整することをお勧めします

コミュニケーションウィジェットの構成要素は次のとおりです。

コミュニケーションウィジェットの構成要素

コミュニケーションウィジェットのシステムやボットの表示名とロゴをオーバーライドする方法

Amazon Connect 管理ウェブサイトで設定されたシステム/ボットの表示名とロゴの設定を上書きするには、次のコードブロックをウィジェットコードスニペットに埋め込みます。次の例に示されているフィールドはすべてオプションです。

amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logoUrl: "https://example.com/abc.png"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})

サポートされているプロパティと制約

カスタムスタイル名 説明 推奨される制約

header.headerMessage

 ヘッダーメッセージのテキスト

最小長: 1 文字

最大長: 11 文字

ヘッダーの幅に基づいて調整することをお勧めします

header.logoUrl

 ロゴの画像を指す URL

最大長: 2048 文字

.png、.jpg、または .svg ファイルを指す有効な URL を指定する必要があります

transcript.systemMessageDisplayName

 SYSTEM_MESSAGE 表示名をオーバーライドするテキスト

最小長: 1 文字

最大長: 26 文字

transcript.botMessageDisplayName

 ボットの表示名をオーバーライドするテキスト

最小長: 1 文字

最大長: 26 文字

footer.textInputPlaceholder

 テキスト入力のプレースホルダーをオーバーライドするテキスト

最小長: 1 文字

最大長: 22 文字

footer.endChatButtonText

 チャット終了ボタンのテキストをオーバーライドするテキスト

最小長: 1 文字

最大長: 11 文字

ボタンの幅に基づいて調整することをお勧めします

footer.closeChatButtonText

 チャット終了ボタンのテキストをオーバーライドするテキスト

最小長: 1 文字

最大長: 11 文字

ボタンの幅に基づいて調整することをお勧めします

footer.startCallButtonText

 通話開始ボタンのテキストをオーバーライドするテキスト

最小長: 1 文字

最大長: 11 文字

ボタンの幅に基づいて調整することをお勧めします

カスタムプロパティを指定したコミュニケーションウィジェットをプレビューする

カスタムプロパティを指定したコミュニケーションウィジェットは、本番環境に移行する前に必ずプレビューしてください。カスタム値が適切に設定されていないと、コミュニケーションウィジェットのユーザーインターフェイスが機能しない可能性があります。カスタマーにリリースする前に、さまざまなブラウザやデバイスでテストすることをお勧めします。

以下は、不適切な値を使用すると壊れる可能性のある問題の例と、推奨される修正方法を示しています。

  • 問題: ウィジェットウィンドウが画面の大部分を占める。

    修正: 小さいサイズの frameWidth および frameHeight を使用します。

  • 問題: フォントサイズが小さすぎる、または大きすぎる。

    修正: フォントサイズを調整します。

  • 問題: チャットの終了 (フッター) の下に空白の領域がある。

    修正:小さいサイズの frameHeight または大きいサイズの footerHeight を使用します。

  • 問題: チャット終了ボタンが小さすぎる、または大きすぎる。

    修正: buttonFontSize を調整します。

  • 問題: チャット終了ボタンがフッター領域の外に出ている。

    修正: 大きいサイズの footerHeight または小さいサイズの buttonFontSize を使用します。