Qual é o meu plano?
Complemento Agentes de IA - Avançado

As mensagens em rich text, como botões e carrosséis, não são compatíveis com Salesforce. Portanto, criamos nossos próprios scripts para você adicionar no Salesforce como recursos estáticos para ativar botões como mensagens avançadas nos fluxos de diálogo. Isso deve ser feito por um administrador do Salesforce.

  • Roteiros
    • Baixar e carregar scripts no Salesforce
    • Editar o widget de chat para fazer referência a scripts personalizados
  • Componente do Lightning
    • Baixar o componente do Lightning
    • Instalar e implantar o componente 
  • Configurações do Salesforce
    • Atualizar configuração de implantações de serviço do widget de chat incorporado
  • Remover HTML da transcrição do chat
  • Personalizações recomendadas

Plug-ins

Esses scripts ativam todos os recursos de personalização e o CSS para renderizar mensagens avançadas. 

Baixar o plug-in

  1. Baixe o assets.zip aqui. 
  2. Descompacte o arquivo zip e você encontrará uma pasta chamada rich-message-plugin e verá dois arquivos:
    • CustomEvents_AddButtons.js
    • CustomEvents_AddButtons_Stylesheet.css

Carregar o plug-in

Os dois arquivos precisam ser adicionados como recursos estáticos. Para fazer isso:

  1. No Salesforce, acesse Configuração > Código personalizado > Páginas do Visualforce -> Console do desenvolvedor (isso abre uma nova janela).
  2. Na nova janela, selecione Arquivo > Novo > Recurso estático.
  3. Defina os campos conforme abaixo:
    • Nome: CustomEvents_AddButtons
      • Observação: você pode renomear isso se desejar e essa é a referência que você usará no código do widget posteriormente e não precisa de .js ou .css, respectivamente.
    • Tipo MIME: text/javascript ou text/css, dependendo do arquivo que você está carregando
  4. Clique em Enviar.
  5. Repita as etapas 2 a 4 para o arquivo CustomEvents_AddButtons_Stylesheet.css.

Editar o widget de chat para fazer referência ao plug-in personalizado

  1. No código-fonte do seu site, localize o trecho do widget do snap-in.
  2. Adicione as seguintes linhas acima de embedded_svc.init():
embedded_svc.settings.externalScripts = ["CustomEvents_AddButtons"];
embedded_svc.settings.externalStyles = ["CustomEvents_AddButtons_Stylesheet"];

 

Componente do Lightning

O componente de iluminação ativa o indicador de digitação e substitui o componente de mensagem de chat padrão por um que possa entender a lógica HTML.

Baixar o componente do Lightning

Dentro da pasta zip que você baixou anteriormente, há uma pasta rich-message-lightning-web-component.

Instalar e implantar o componente

Se esta é a primeira vez que você implanta um componente da web, consulte o guia de teste aqui.

Instalar

  1. Crie o projeto no VS Code - você precisará ter a extensão do Salesforce ativada e baixar a CLI do Salesforce.

    1. Crie um projeto selecionando SFDX: Criar projeto em Visualização > Paleta de comandos.

      Aceite o modelo padrão e dê a ele o nome do projeto lwcchatpack.

    2. Em force-app/main/default, clique com o botão direito do mouse na pasta lwc e selecione SFDX: Criar componente web do Lightning.

      vs_code_salesforce.png

    3. Insira lwcchatpack para o nome do novo componente e aceitar os padrões.

    4. Substitua os arquivos que foram criados automaticamente pelos que foram baixados do Google Drive e adicione o novo arquivo CSS. Salve tudo.

Implantar

    1. Na Visualização > Paleta de comandos, insira SFDX: Autorizar uma organização.
      Quando solicitado, aceite o padrão do projeto e pressione Enter para aceitar o alias padrão. Se for solicitado que você conceda acesso, clique em Permitir.

    2. Clique com o botão direito do mouse na pasta padrão e selecione SFDX: Implantar esta origem na organização.

Se a implantação para o seu editor de código não funcionar, você pode fazer isso na CLI inserindo o seguinte:

cd Filepath/where/project/lives
sfdx force:source:deploy -p force-app/main/default

 

Atualizar configurações do Salesforce

Para que esse novo componente seja utilizado, ele precisa estar ativado no widget de chat.

Isso é controlado pelo "serviço incorporado", que já está sendo usado por você hoje (esse é o widget que você está usando).

Para atualizar as configurações, navegue até Configurações > Implantação de serviço incorporado, selecione o widget relevante, clique em Visualização e edite as configurações de chat.

Você verá a seção "Personalizar com o componente do Lightning", onde poderá substituir o componente padrão "mensagem de chat" pelo que instalamos acima - lembre-se de usar o nome do projeto lwccatpack que usamos anteriormente.

Screenshot_2023-01-25_at_10.22.57.png

Remover HTML da transcrição do chat

Agora que adicionamos o recurso de personalização e opções avançadas, queremos garantir que a transcrição do chat ainda seja legível.

Podemos alterar isso para que o HTML seja renderizado adicionando um gatilho de transcrição do Chat.

Configuração > Gerenciador de objetos > Transcrição do chat > Gatilho > Novo

trigger regexReplace on LiveChatTranscript (before insert, before update) {
for(LiveChatTranscript chatTranscript : Trigger.new){
if(String.isNotBlank(chatTranscript.Body)){
chatTranscript.Body=chatTranscript.Body.replaceAll('&lt;','<').replaceAll('&gt;','>').replaceAll('&quot;','"').replaceAll('&amp;','&'); 
}
}
}
image__37_.png


Recomendações 

Ajustar a largura da caixa de chat

Para uma experiência melhor, recomendamos aumentar a largura da caixa de chat. Sugerimos, no mínimo, 350 pixels, mas o ideal seria 450 pixels.

Para ajustar isso, no código do widget, encontre a linha abaixo e defina o valor desejado.

embedded_svc.settings.widgetWidth =

Ajustar a cor e a fonte padrão

Dentro do arquivo css no código do widget, encontre o seletor de cores. Por padrão, ele será roxo, mas isso pode ser ajustado no CustomEvents_AddButtons_Stylesheet.css que carregamos no início. 

Caso você precise substituir a cor definida, por exemplo, se você quiser ter estrelas amarelas, mas sua marca roxa para o restante das cores, basta adicionar a tagimportant;.

Powered by Zendesk