在 Amazon Connect 中傳遞自訂屬性以覆寫通訊小工具中的預設值 - Amazon Connect
如何傳遞通訊小工具的自訂樣式支援的型式和條件限制如何覆寫通訊小工具的系統與機器人顯示名稱和標誌預覽使用自訂屬性的通訊小工具

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

在 Amazon Connect 中傳遞自訂屬性以覆寫通訊小工具中的預設值

若要進一步自訂聊天使用者介面，您可以傳遞自己的值以覆寫預設屬性。例如，您可以將小工具寬度設定為 400 像素，將高度設定為 700 像素 (與 300 像素 x 540 像素的預設大小相反)。您也可以使用您喜歡的字體顏色和大小。

如何傳遞通訊小工具的自訂樣式

若要傳遞自訂樣式，請使用下列範例程式碼區塊，並將其嵌入 Widget。 會自動 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',
     buttonholer: '#964950',
     buttonBackgroundColor: '#964950',
     backgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     backgroundColor: '#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 樣式存在於全域且存在於文字記錄元件中。元件層級樣式優先順序更高，並將在聊天小工具上顯示。

自訂樣式名稱

Description

建議限制

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、Verdana、Georgia、Palatino、Garamond、Book man、Tacoma、Trebuches MS、Arial Black、Impact、Comic Sans MS。

您也可以新增自訂字體/字型系列，但您必須託管可公開讀取存取的字體檔案。例如，您可以在 Amazon 開發人員程式庫中檢視使用 Amazon Ember 字型系列的文件。

global.customTypefaceStylesheetUrl

託管自訂字體檔案且具有公開讀取存取權的位置。

連結至託管字體檔案的公有 HTTP 位置。例如，AmazonEmber Light Typeface CDN 位置為 https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf

header.headerTextColor

標題郵件的文字顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

header.headerBackgroundColor

標頭背景的文字顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

global.headerHeight

小工具標頭的高度

建議根據使用標題和/或影像標誌進行調整。

transcript.messageFontSize

所有文字的字體大小

針對不同的使用案例，建議使用 12 到 20 像素

transcript.messageTextColor

文字記錄訊息的文字顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

transcript.widgetBackgroundColor

文字記錄背景的文字顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

transcript.customerMessageTextColor

客戶訊息的文字顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

transcript.agentMessageTextColor

客服人員訊息的文字顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

transcript.systemMessageTextColor

系統訊息的文字顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

transcript.agentChatBubbleColor

客服人員訊息氣泡的背景顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

transcript.customerChatBubbleColor

客戶訊息氣泡的背景顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

transcript.systemChatBubbleColor

系統訊息氣泡的背景顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

footer.buttonFontSize

動作按鈕文字的字型大小

建議根據頁尾高度進行調整

footer.buttonTextColor

動作按鈕文字的色彩

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

footer.buttonBorderColor

動作按鈕框線的顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

footer.buttonBackgroundColor

動作按鈕背景的顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

footer.BackgroundColor

頁尾背景的顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

footer.startCallButtonTextColor

開始通話按鈕文字的顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

footer.startCallButtonBorderColor

開始通話按鈕框線的顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

footer.startCallButtonBackgroundColor

開始通話按鈕背景的顏色

任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。

logo.logoMaxHeight

標誌的最大高度

下限：0 像素

最大值：標頭高度

建議根據影像大小和框架高度進行調整

logo.logoMaxWidth

標誌的最大寬度

下限：0 像素

最大值：標頭寬度

建議根據影像大小和框架寬度進行調整

composer.fontSize

編寫器文字的字型大小

針對不同的使用案例，建議使用 12 到 20 像素

fullscreenMode

在 Web 瀏覽器中偵測到行動裝置畫面大小時，在小工具上啟用全螢幕模式。

類型：布林值

以下是構成通訊小工具的元素。

組成通訊小工具的元素。

如何覆寫通訊小工具的系統與機器人顯示名稱和標誌

若要覆寫 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"
 },
})

支援的屬性和限制

自訂樣式名稱 Description 建議限制

header.headerMessage

 標頭訊息的文字

長度下限：1 個字元

長度上限：11 個字元

建議根據標頭寬度進行調整

header.logoUrl

 指向標誌影像的 URL

長度上限：2048 個字元

必須是指向 .png、.jpg 或 .svg 檔案的有效 URL

header.logoAltText

 用來覆寫標誌橫幅 alt 屬性的文字

長度上限：2048 個字元

transcript.systemMessageDisplayName

 用來覆寫 SYSTEM_MESSAGE 顯示名稱的文字

長度下限：1 個字元

長度上限：26 個字元

transcript.botMessageDisplayName

 用來覆寫 BOT 顯示名稱的文字

長度下限：1 個字元

長度上限：26 個字元

footer.textInputPlaceholder

 用來覆寫文字輸入預留位置的文字

長度下限：1 個字元

長度上限：256 個字元

footer.endChatButtonText

 用來覆寫結束聊天按鈕文字的文字

長度下限：1 個字元

長度上限：256 個字元

建議根據按鈕寬度進行調整

footer.closeChatButtonText

 用來覆寫關閉聊天按鈕文字的文字

長度下限：1 個字元

長度上限：256 個字元

建議根據按鈕寬度進行調整

footer.startCallButtonText

 用來覆寫開始通話按鈕文字的文字

長度下限：1 個字元

長度上限：256 個字元

建議根據按鈕寬度進行調整

預覽使用自訂屬性的通訊小工具

在投入生產之前，請務必先預覽使用自訂屬性的通訊小工具。如果設定不正確，自訂值可能會破壞通訊小工具的使用者介面。我們建議您先在不同的瀏覽器和裝置上進行測試，然後再將其發布給客戶。

以下是使用不正確的值時可能會中斷的幾個例子以及建議的修復。

  • 問題：小工具視窗佔用過多畫面。

    修復：使用較小的 frameWidth 和 frameHeight。

  • 問題：字體大小太小或太大。

    修復：調整字體大小。

  • 問題：結束聊天 (頁尾) 下方有一個空白區域。

    修復：使用較小的 frameHeight 或較大的 footerHeight。

  • 問題：結束對話按鈕太小或太大。

    修復：調整 buttonFontSize。

  • 問題：結束聊天按鈕位於頁尾區域之外。

    修復：使用較小的 buttonFontSize 或較大的 footerHeight。