翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # カスタムプロパティを渡して、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', agentMessageTextColor: '#ef18d3', systemMessageTextColor: '#ef18d3', customerMessageTextColor: '#ef18d3', agentChatBubbleColor: '#111112', systemChatBubbleColor: '#111112', customerChatBubbleColor: '#0e80f2', }, footer: { buttonFontSize: '20px', buttonTextColor: '#ef18d3', buttonBorderColor: '#964950', buttonBackgroundColor: '#964950', footerBackgroundColor: '#0e80f2', startCallButtonTextColor: '#541218', startChatButtonBorderColor: '#fe3', startCallButtonBackgroundColor: '#fe3', }, logo: { logoMaxHeight: '61px', logoMaxWidth: '99%', }, composer: { fontSize: '20px', }, fullscreenMode: true // Enables fullscreen mode on the widget when a mobile screen size is detected in a web browser. }) ``` ## サポートされているスタイルおよび制約 次の表は、サポートされているカスタムスタイル名と推奨される値の制約を示しています。一部のスタイルはグローバルレベルとコンポーネントレベルの両方に存在します。例えば、`fontSize` スタイルはグローバルに存在し、トランスクリプトコンポーネントにも存在します。コンポーネントレベルのスタイルは優先度が高く、チャットウィジェットでも優先されます。 | カスタムスタイル名 | 説明 | 推奨される制約 | | --- | --- | --- | | `global.frameWidth` | ウィジェットフレーム全体の幅 | 最小値: 300 ピクセル 最大値: ウィンドウ幅 ウィンドウサイズに基づいて調整することをお勧めします | | `global.frameHeight` | ウィジェットフレーム全体の高さ | 最小: 480 ピクセル 最大: ウィンドウの高さ ウィンドウサイズに基づいて調整することをお勧めします | | `global.textColor` | すべてのテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `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。 カスタムの書体/フォントファミリーを追加することもできますが、書体ファイルにパブリック読み取りアクセスを設定してホストする必要があります。例えば、[Amazon デベロッパーライブラリ](https://developer.amazon.com/en-US/alexa/branding/echo-guidelines/identity-guidelines/typography)で 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 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `header.headerBackgroundColor` | ヘッダーの背景のテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `global.headerHeight` | ウィジェットのヘッダーの高さ | タイトル、イメージロゴ、またはその両方を使用するかどうかによって調整することをお勧めします。 | | `transcript.messageFontSize` | すべてのテキストのフォントサイズ | さまざまなユースケースで 12 ピクセルから 20 ピクセルを推奨 | | `transcript.messageTextColor` | トランスクリプトメッセージのテキストカラー | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `transcript.widgetBackgroundColor` | チャット記録の背景のテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `transcript.customerMessageTextColor` | 顧客メッセージのテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `transcript.agentMessageTextColor` | エージェントメッセージのテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `transcript.systemMessageTextColor` | システムメッセージのテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `transcript.agentChatBubbleColor` | エージェントメッセージのバブルの背景色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `transcript.customerChatBubbleColor` | 顧客メッセージのバブルの背景色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `transcript.systemChatBubbleColor` | システムメッセージのバブルの背景色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `footer.buttonFontSize` | アクションボタンテキストのフォントサイズ | フッターの高さに基づいて調整することをお勧めします | | `footer.buttonTextColor` | アクションボタンのテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `footer.buttonBorderColor` | アクションボタンの境界線の色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `footer.buttonBackgroundColor` | アクションボタンの背景の色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `footer.BackgroundColor` | フッターの背景の色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `footer.startCallButtonTextColor` | 通話開始ボタンのテキストの色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `footer.startCallButtonBorderColor` | 通話開始ボタンの境界線の色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `footer.startCallButtonBackgroundColor` | 通話開始ボタンの背景の色 | 任意の CSS 法定色値。詳細については、「[CSS 法定色値](https://www.w3schools.com/cssref/css_colors_legal.php)」を参照してください。 | | `logo.logoMaxHeight` | ロゴの最大の高さ | 最小: 0 ピクセル 最大: ヘッダーの高さ 画像のサイズとフレームの高さに基づいて調整することをお勧めします | | `logo.logoMaxWidth` | ロゴの最大の幅 | 最小: 0 ピクセル 最大: ヘッダーの幅 画像のサイズとフレームの幅に基づいて調整することをお勧めします | | `composer.fontSize` | コンポーザーテキストのフォントサイズ | さまざまなユースケースで 12 ピクセルから 20 ピクセルを推奨 | | `fullscreenMode` | ウェブブラウザでモバイル画面サイズが検出された場合に、ウィジェットで全画面表示モードを有効化 | 型: ブール値 | コミュニケーションウィジェットの構成要素は次のとおりです。 ![\[コミュニケーションウィジェットの構成要素\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-elements.png) ## コミュニケーションウィジェットのシステムやボットの表示名とロゴをオーバーライドする方法 Amazon Connect 管理ウェブサイトで設定されたシステム/ボットの表示名とロゴ設定を上書きするには、次のコードブロックをウィジェットコードスニペットに埋め込みます。次の例に示されているフィールドはすべてオプションです。 ``` amazon_connect('customDisplayNames', { header: { headerMessage: "Welcome!", logoUrl: "https://example.com/abc.png", logoAltText: "Amazon Logo Banner" }, 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 を指定する必要があります | | `header.logoAltText` | ロゴバナーの alt 属性をオーバーライドするテキスト | 最大長: 2048 文字 | | `transcript.systemMessageDisplayName` | SYSTEM\$1MESSAGE 表示名をオーバーライドするテキスト | 最小長: 1 文字 最大長: 26 文字 | | `transcript.botMessageDisplayName` | ボットの表示名をオーバーライドするテキスト | 最小長: 1 文字 最大長: 26 文字 | | `footer.textInputPlaceholder` | テキスト入力のプレースホルダーをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字 | | `footer.endChatButtonText` | チャット終了ボタンのテキストをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字 ボタンの幅に基づいて調整することをお勧めします | | `footer.closeChatButtonText` | チャット終了ボタンのテキストをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字 ボタンの幅に基づいて調整することをお勧めします | | `footer.startCallButtonText` | 通話開始ボタンのテキストをオーバーライドするテキスト | 最小長: 1 文字 最大長: 256 文字 ボタンの幅に基づいて調整することをお勧めします | ## カスタムプロパティを指定したコミュニケーションウィジェットをプレビューする カスタムプロパティを指定したコミュニケーションウィジェットは、本番環境に移行する前に必ずプレビューしてください。カスタム値が適切に設定されていないと、コミュニケーションウィジェットのユーザーインターフェイスが機能しない可能性があります。カスタマーにリリースする前に、さまざまなブラウザやデバイスでテストすることをお勧めします。 以下は、不適切な値を使用すると壊れる可能性のある問題の例と、推奨される修正方法を示しています。 + **問題:** ウィジェットウィンドウが画面の大部分を占める。 **修正:** 小さいサイズの `frameWidth` および `frameHeight` を使用します。 + **問題:** フォントサイズが小さすぎる、または大きすぎる。 **修正:** フォントサイズを調整します。 + **問題:** チャットの終了 (フッター) の下に空白の領域がある。 **修正:**小さいサイズの `frameHeight` または大きいサイズの `footerHeight` を使用します。 + **問題:** チャット終了ボタンが小さすぎる、または大きすぎる。 **修正:** `buttonFontSize` を調整します。 + **問題:** チャット終了ボタンがフッター領域の外に出ている。 **修正:** 大きいサイズの `footerHeight` または小さいサイズの `buttonFontSize` を使用します。