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

傳遞自訂屬性以覆寫 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 樣式存在於全域且存在於文字記錄元件中。元件層級樣式優先順序更高，並將在聊天小工具上顯示。

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

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

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

支援的屬性和限制條件

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

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

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