本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。 # 传递自定义属性以覆盖 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、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 位置。例如，L AmazonEmber ight 字体 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` | 在 Web 浏览器中检测到移动屏幕尺寸时，在小部件上启用全屏模式。 | 类型：布尔值 | 以下是构成通信小部件的元素。 ![\[构成通信小部件的元素。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-elements.png) ## 如何传递通信小部件的覆盖系统和机器人显示的名称和徽标 要覆盖 Amazon Connect 管理员网站中设置的 System/Bot 显示名称和徽标配置，请将以下代码块嵌入到您的控件代码片段中。以下示例中显示的所有字段均为可选字段。 ``` 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` | 指向徽标图像的网址 | 长度上限：2048 个字符 必须是指向 .png、.jpg 或 .svg 文件的有效网址 | | `header.logoAltText` | 用于覆盖徽标横幅 alt 属性的文本 | 长度上限：2048 个字符 | | `transcript.systemMessageDisplayName` | 覆盖 SYSTEM\$1MESSAGE 显示名称的文字 | 最小长度是 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`。 + **问题：**结束聊天按钮位于页脚区域之外。 **修复方法：**使用较大的 `footerHeight` 或较小 `buttonFontSize`。