Page Comparison

...

1. Abra a pasta luma-web-widget (baixada na etapa 5 da 1776025657 Ativar o canal do Widget da web seção acima).
   
   

2. Abra a página index.html do portal da web em um editor de texto. Cole os seguintes detalhes na página index.html:

   1. Cole o conteúdo da página de índice da pasta luma-web-widget na sua página index.html.

   2. Cole o código do cabeçalho  da página de configuração do Widget da web  (copiado na etapa 4 na 1776025657 Ativar o canal do Widget da web seção acima) em  index.html. O código do cabeçalho inclui a folha de estilo CSS associada ao widget da web. Para saber como personalizar a folha de estilo para alterar a aparência do widget da web, consulte o artigo Personalizar estilos de widget da web . Veja o exemplo abaixo de uma amostra da página index.html. 

      Code Block
      language xml title Exemplo de código de cabeçalho linenumbers true
      <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'> <link href='luma-web-widget.css' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <style> .luma-chat-toggle { position: fixed; background: #FFF; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 2px 32px rgba(0,0,0,0.16); cursor: pointer; } </style>

      
      

   3. Cole o código do corpo da página de configuração do Widget da web  (copiado na etapa 4 na 1776025657 Ativar o canal do Widget da web seção acima) no index.html. O código do corpo (que inclui a chave secreta) contém o javascript a seguir, que é usado para incorporar o controle de bate-papo da web em seu site. 

      Code Block
      language xml title Exemplo de código de corpo linenumbers true
      <div id='botHere'> <div class="luma-chat-toggle" onclick="toggleChatWidget()"> <i class="bot-icon"></i> </div> <script type='text/javascript' src='luma-web-widget.js'></script> <script> LumaBot({ botName: 'LumaChatBot', user: { clientUserId: 'xxxxx-xxxxx-xxxxx-xxxxxxxx', additionalProperties: { } }, secretkey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', domain: 'https://luma3.serviceaide.com' }, document.getElementById('botHere')); // Function to call init for LumaBot function toggleChatWidget() { LumaBot.toggleChatWidget(); } </script> </div>

      O código de Corpo consiste no seguinte:

      1. Recipiente div: o elemento "div" é passado como um parâmetro ao Bot Luma, que o usa para iniciar o Bot.

      2. Script: consiste nos seguintes parâmetros:

         • Nome do bot: o nome do bot com o qual você está batendo papo. Você pode editar o botname conforme necessário em sua página index.html. Esse nome de bot aparece na janela de bate-papo do widget da web, como mostrado abaixo. Não é necessário fazer a correspondência com o nome do bot na interface do Criador de bot.

           Info
           title Observação
           Na página de exemplo index.html, o nome do bot é "LumaChatBot".

           

         • Objeto de usuário: consiste em dois parâmetros – ID de usuário do cliente e Nome de exibição do usuário.

         • ID de usuário do cliente: é uma ID atribuída a cada usuário exclusivo do seu site. Se o usuário entrar no portal da web usando as respectivas credenciais, essas credenciais (ID de email ou nome de usuário) serão passadas ao widget da web para autenticar automaticamente o usuário. Se a ID de usuário do cliente não for transmitida ao widget da web, o usuário continuará como convidado e será solicitado a fazer o registro.

         • Chave secreta: o código exclusivo gerado no Criador de bot que é usado para autenticar as chamadas de API feitas ao bot.

         • Domínio: o URL do domínio é o URL usado para se comunicar com a plataforma da Agente virtual Luma. Esse URL é pré-preenchido no código do corpo. Certifique-se de que o URL de domínio correto seja fornecido no corpo, caso contrário, ele não se conectará à instância da Agente virtual Luma. 

3. Salve a página index.html com as alterações e atualize o portal da web e o cache de modo a carregar o widget da web automaticamente na tela para os usuários, conforme mostrado na página de exemplo a seguir.

   Info
   title Observação
   Como o Widget da web é preenchido automaticamente na tela, os usuários não precisam configurar nada para exibi-lo.

   
   

4. Clique no ícone de bate-papo para abrir o widget da web, que na primeira interação mostra a habilidade de boas-vindas, como mostrado na página de exemplo a seguir. 
   

5. Em sessões de bate-papo subsequentes, o widget da web mostrará o histórico da conversa anterior para os usuários autenticados. Para usuários convidados, a mensagem de boas-vindas é exibida sempre que o usuário bate-papo no widget da web.

...

• lumaChatContainer
• lumaChatHeaderContainer
• lumaTextBot
• lumaTextUser
• lumaTextAgent
• messageInfoBot
• messageInfoUser
• botFaceIcon
• agentIcon
• welcomeContainer
• welcomeImage
• brokenBot
• downloadLink
• chatInput
• attachFile
• connectionStart
• cardText
• cardTitle
• cardSubTitle
• cardButton
• quickReplyTitle
• quickReplySubTitle
• quickReplyButton

Ativar retorno de chamada no widget da web

Você pode permitir o retorno de chamada no widget da web incorporado ao seu site. Isso permite que o bot execute uma ação em suas páginas da web, como navegar para uma nova guia, ir para uma seção na página, redirecionar para uma nova página da web ou atribuir valor a um atributo sem exibir as informações para o usuário final.

Veja a seguir o código de exemplo para ativar o retorno de chamada no widget da web. Os usuários finais são redirecionados para a página Contatos no site quando a habilidade Consultas de suporte ao cliente (identificador da habilidade: customer_support_queries) é solicitada. Você pode personalizar o código e adicioná-lo ao código do corpo no arquivo index.html para alterar o comportamento conforme necessário.

<script>
    LumaBot({
      botName: "LumaChatBot",
      user: {
        clientUserId: '<USER ID>',
        additionalProperties: {
        }
      },
      secretkey: '<YOUR SECRET KEY>',
      domain: "<YOUR DOMAIN>",
      styleOptions: {
        lumaChatContainer: {
          width: '400px'
        }
      }
    },
      document.getElementById("botHere"));
    function toggleChatWidget() {
      LumaBot.toggleChatWidget();
    }
    LumaBot.getIncomingMessages(callback);
    function callback(data) {
      console.log(data);
      if (data) {
        if (data && data.conversationContext && data.conversationContext.conversationAttributes.skillIdentifier === 'customer_support_queries') {
          console.log("moving to another page");
          window.location.href = "./contact/index.html";
        }
        if (data && data.conversationContext && data.conversationContext.conversationAttributes.skillIdentifier === 'corporate_office_location') {
          console.log("moving to another page");
          window.location.href = "./customer-support/index.html";
        }
      }
    }
  </script>

Bate-papo com o bot

Assim que o serviço estiver em execução, você poderá enviar e receber mensagens do bot.

...