本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

传递自定义属性以覆盖 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 管理员网站中设置的 System/Bot 显示名称和徽标配置，请将以下代码块嵌入到您的控件代码片段中。以下示例中显示的所有字段均为可选字段。

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"
 },
})

支持的属性和限制

预览使用了自定义属性的通信小部件

在将其投入生产之前，请务必先预览使用了自定义属性的通信小部件。如果设置不当，自定义值可能会破坏通信小部件的用户界面。建议您在将其发布给客户之前，在不同的浏览器和设备上进行测试。

以下是使用不正确值时可能出现故障的几个示例，以及建议的修复方法。