傳遞自定義屬性以覆蓋通信小部件中的默認值

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

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

要傳遞自定義樣式，請使用下面的示例代碼塊並將其嵌入到小部件中。 Amazon Connect 自動擷取自訂樣式。下列範例中顯示的所有欄位均為選填。

amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: 'Times New Roman', 
 },
 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	小器具中使用的字體。	從此列表中的任何字體：宋體，新羅馬時報，時代，快遞新，快遞，宋體，格魯吉亞，帕拉蒂諾，Garamond，書人，塔科馬，防跳 MS，宋體黑色，影響，漫畫 SANS MS。
header.headerTextColor	標題郵件的文字顏色	任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。
header.headerBbackgroundColor	標題背景的文字顏色	任何 CSS 合法的顏色值。如需詳細資訊，請參閱 CSS 合法的顏色值。
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 像素 最大：標題寬度 建議根據圖像大小和框寬進行調整

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

如何傳遞通訊 Widget 的覆寫系統和機器人顯示名稱和標誌

若要覆寫在 Amazon Connect 管理網站中設定的系統/機器人顯示名稱和標誌設定，請將下列程式碼區塊嵌入 Widget 程式碼片段中。下列範例中顯示的所有欄位均為選填。

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

支援的屬性和約束

自訂樣式名稱	描述	建議限制
header.headerMessage	標頭訊息的文字	長度下限：1 個字元 長度上限：11 個字元 建議根據頭寬度進行調整
header.logUrl	指向標誌影像的網址	長度上限：2048 個字元 必須是指向 .png、.jpg 或 .svg 檔案的有效網址
transcript.systemMessageDisplayName	要取代SYSTEM_MESSAGE顯示名稱的文字	長度下限：1 個字元 長度上限：26 個字元
transcript.botMessageDisplayName	要覆寫 BOT 顯示名稱的文字	長度下限：1 個字元 長度上限：26 個字元
footer.textInputPlaceholder	要覆寫文字輸入中預留位置的文字	長度下限：1 個字元 長度上限：22 個字元
footer.endChatButtonText	覆寫結束對話按鈕文字的文字	長度下限：1 個字元 長度上限：11 個字元 建議根據按鈕寬度進行調整
footer.closeChatButtonText	覆寫關閉聊天按鈕文字的文字	長度下限：1 個字元 長度上限：11 個字元 建議根據按鈕寬度進行調整
footer.closeStartCallButtonText	覆蓋開始呼叫按鈕文本的文本	長度下限：1 個字元 長度上限：11 個字元 建議根據按鈕寬度進行調整

使用自訂內容預覽您的通訊小工具

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

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

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

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

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

  修復：調整字體大小。

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

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

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

  修復：調整 buttonFontSize。

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

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