As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # Passe propriedades personalizadas para substituir os padrões no widget de comunicação no Connect Customer Para personalizar ainda mais a interface de usuário do chat, você pode substituir as propriedades padrão transmitindo seus próprios valores. Por exemplo, você pode definir a largura do widget como 400 pixels e a altura como 700 pixels (em contraste com o tamanho padrão de 300 pixels por 540 pixels). Você também pode usar as cores e tamanhos de fonte de sua preferência. ## Como transmitir estilos personalizados para o widget de comunicação Para transmitir estilos personalizados, use o bloco de código de exemplo a seguir e incorpore-o ao seu widget. Connect Customer recupera os estilos personalizados automaticamente. Todos os campos mostrados no exemplo a seguir são opcionais. ``` 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. }) ``` ## Restrições e estilos compatíveis A tabela a seguir lista os nomes de estilos personalizados com suporte e as restrições de valores recomendadas. Existem alguns estilos nos níveis global e de componentes. Por exemplo, o estilo `fontSize` existe globalmente e no componente de transcrição. Os estilos de nível de componente têm maior prioridade e serão homenageados no widget de chat. | Nome do estilo personalizado | Description | Restrições recomendadas | | --- | --- | --- | | `global.frameWidth` | Largura de todo o quadro do widget | Mínimo: 300 pixels
Máximo: largura da janela
Recomendado ajustar com base no tamanho da janela | | `global.frameHeight` | altura de todo o quadro do widget | Mínimo: 480 pixels
Máximo: altura da janela
Recomendado ajustar com base no tamanho da janela | | `global.textColor` | Cor para todos os textos | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `global.fontSize` | Tamanho da fonte para todos os textos | 12 pixels a 20 pixels recomendados para diferentes casos de uso | | `global.footerHeight` | Altura do rodapé do widget | Mínimo: 50 pixels
Máximo: altura do quadro
Recomendado ajustar com base no tamanho do quadro | | `global.typeface` | A fonte tipográfica usada no widget. | Qualquer tipo de fonte tipográfica desta lista: Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Book man, Tacoma, Trebuches MS, Arial Black, Impact, Comic Sans MS.
Você também pode adicionar uma typeface/font família personalizada, mas precisa hospedar o arquivo de tipo de letra com acesso público de leitura. Por exemplo, é possível ver a documentação para usar a família de fontes Amazon Ember na [biblioteca de desenvolvedores da Amazon](https://developer.amazon.com/en-US/alexa/branding/echo-guidelines/identity-guidelines/typography). | | `global.customTypefaceStylesheetUrl` | Local em que o arquivo de tipo de fonte personalizado está hospedado com acesso público de leitura. | Link para o local HTTP público em que o arquivo de tipo de fonte está hospedado. Por exemplo, a localização do CDN do tipo AmazonEmber Light é `https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf` | | `header.headerTextColor` | Cor do texto para a mensagem de cabeçalho | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `header.headerBackgroundColor` | Cor do texto para o fundo do cabeçalho | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `global.headerHeight` | Altura do cabeçalho do widget | É recomendável ajustar com base no uso do título, do logotipo da imagem ou de ambos. | | `transcript.messageFontSize` | Tamanho da fonte para todos os textos | 12 pixels a 20 pixels recomendados para diferentes casos de uso | | `transcript.messageTextColor` | Cor do texto para mensagens de transcrição | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `transcript.widgetBackgroundColor` | Cor do texto para o fundo da transcrição | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `transcript.customerMessageTextColor` | Cor do texto das mensagens do cliente | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `transcript.agentMessageTextColor` | Cor do texto das mensagens do atendente | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `transcript.systemMessageTextColor` | Cor do texto para mensagens de sistema | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `transcript.agentChatBubbleColor` | Cor de fundo para balões de mensagens do atendente | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `transcript.customerChatBubbleColor` | Cor de fundo dos balões de mensagem do cliente | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `transcript.systemChatBubbleColor` | Cor de fundo para balões de mensagens do sistema | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `footer.buttonFontSize` | Tamanho da fonte para o texto do botão de ação | Recomendado ajustar com base na altura do rodapé | | `footer.buttonTextColor` | Cor do texto do botão de ação | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `footer.buttonBorderColor` | Cor da borda do botão de ação | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `footer.buttonBackgroundColor` | Cor do fundo do botão de ação | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `footer.BackgroundColor` | Cor do fundo do rodapé | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `footer.startCallButtonTextColor` | Cor do texto do botão de início da chamada | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `footer.startCallButtonBorderColor` | Cor da borda do botão de início da chamada | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `footer.startCallButtonBackgroundColor` | Cor do fundo do botão de início da chamada | Qualquer valor de cor válido para CSS. Para obter mais informações, consulte [Valores de cores legais de CSS](https://www.w3schools.com/cssref/css_colors_legal.php). | | `logo.logoMaxHeight` | Altura máxima do logotipo | Mínimo: 0 pixels
Máximo: altura do cabeçalho
Recomendado ajustar com base no tamanho da imagem e altura do quadro | | `logo.logoMaxWidth` | Largura máxima do logotipo | Mínimo: 0 pixels
Máximo: largura do cabeçalho
Recomendado ajustar com base no tamanho da imagem e largura do quadro | | `composer.fontSize` | Tamanho da fonte para o texto do compositor | 12 pixels a 20 pixels recomendados para diferentes casos de uso | | `fullscreenMode` | Habilita o modo de tela cheia no widget quando o tamanho da tela do celular é detectado em um navegador da web. | Tipo: booliano | A seguir estão os elementos que compõem o widget de comunicação. ![Elementos que compõem o widget de comunicação.](http://docs.aws.amazon.com/pt_br/connect/latest/adminguide/images/chatwidget-elements.png) ## Como transmitir nomes e logotipos de exibição do sistema de substituição e do bot para o widget de comunicação Para substituir as configurações do nome de System/Bot exibição e do logotipo definidas no site do Connect Customer administrador, incorpore o seguinte bloco de código ao trecho de código do widget. Todos os campos mostrados no exemplo a seguir são opcionais. ``` 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}}" }, }) ``` ### Restrições e propriedades compatíveis | Nome do estilo personalizado | Description | Restrições recomendadas | | --- | --- | --- | | `header.headerMessage` | Texto para a mensagem de cabeçalho | Tamanho mínimo: 1 caractere
Tamanho máximo: 11 caracteres
Recomendado ajustar com base na largura do cabeçalho | | `header.logoUrl` | URL apontando para a imagem do logotipo | Tamanho máximo: 2.048 caracteres
Deve ser um URL válido apontando para um arquivo .png, .jpg ou .svg | | `header.logoAltText` | Texto para substituir o atributo alt do banner do logotipo | Tamanho máximo: 2.048 caracteres | | `transcript.systemMessageDisplayName` | Texto para substituir o nome de exibição SYSTEM\_MESSAGE | Tamanho mínimo: 1 caractere
Tamanho máximo: 26 caracteres | | `transcript.botMessageDisplayName` | Texto para substituir o nome de exibição do bot | Tamanho mínimo: 1 caractere
Tamanho máximo: 26 caracteres | | `footer.textInputPlaceholder` | Texto para substituir o espaço reservado na entrada de texto | Tamanho mínimo: 1 caractere
Tamanho máximo: 256 caracteres | | `footer.endChatButtonText` | Texto para substituir o texto do botão de encerramento do chat | Tamanho mínimo: 1 caractere
Tamanho máximo: 256 caracteres
Recomendado ajustar com base no tamanho do botão | | `footer.closeChatButtonText` | Texto para substituir o texto do botão para fechar o chat | Tamanho mínimo: 1 caractere
Tamanho máximo: 256 caracteres
Recomendado ajustar com base no tamanho do botão | | `footer.startCallButtonText` | Texto para substituir o texto do botão de início de chamada | Tamanho mínimo: 1 caractere
Tamanho máximo: 256 caracteres
Recomendado ajustar com base no tamanho do botão | ## Visualizar o widget de comunicação com propriedades personalizadas Visualize seu widget de comunicação com as propriedades personalizadas antes de colocá-lo em produção. Valores personalizados podem quebrar a interface do usuário do widget de comunicação se não forem definidos corretamente. Recomendamos testá-lo em diferentes navegadores e dispositivos antes de lançá-lo para seus clientes. A seguir estão alguns exemplos de coisas que podem falhar quando valores impróprios são usados e as correções sugeridas. + **Problema:** a janela do widget ocupa muito espaço da tela. **Correção:** use `frameWidth` e `frameHeight` menores. + **Problema:** o tamanho da fonte é muito pequeno ou muito grande. **Correção:** ajuste o tamanho da fonte. + **Problema:** há uma área em branco abaixo do final do chat (rodapé). **Correção:** use um `frameHeight` menor ou `footerHeight` maior. + **Problema:** o botão de finalizar chat é muito pequeno ou muito grande. **Correção:** ajuste `buttonFontSize`. + **Problema:** o botão de finalizar chat está saindo da área do rodapé. **Correção:** use um `footerHeight` maior ou `buttonFontSize` menor.