Configurar o Widget da web

A Agente virtual Luma oferece suporte a vários canais de bate-papo diferentes, mas para algumas organizações, é fundamental fornecer acesso por meio de um site de intranet ou internet da empresa. O Widget da web é uma pequena parte do código que pode ser facilmente incorporada em um site para permitir a inicialização de uma sessão de bate-papo com um bot.

Para configurar o Widget da web em um site, um administrador precisa concluir estas três etapas gerais:

Faça download do código do widget (luma-web-widget.zip).
Configure o Widget da web em seu portal da web usando a chave secreta, o código de cabeçalho e corpo da guia Canais de Configuração na interface do Criador de bot.
Ative o canal do widget da web no Criador de bot.

Ativar o canal do Widget da web

Para ativar o Widget da web na interface do Criador de bot, siga este procedimento:

Clique no menu Bots do painel de navegação à esquerda e clique em Configuração.
A página Configuração é exibida.
Na página Configuração , clique na guia Canais , como mostrado abaixo.
Clique no bloco Widget da web na lista de canais.
A página de configuração do Widget da web é exibida como mostrada abaixo. Você pode definir o Status do widget da web como Ativo.
Alterne Disparar habilidade de boas-vindas quando a janela de bate-papo for minimizada e reaberta para ATIVADA a fim de exibir a habilidade de boas-vindas toda vez que a janela de bate-papo for minimizada ou reaberta.

Copie a Chave secreta, o Código do cabeçalho e, por fim, o Código do corpo e salve-os em um local de fácil acesso, como o bloco de notas ou uma ferramenta de edição de texto. Esses detalhes serão usados posteriormente ao ajustar o código do widget da web em seu site. Você pode usar o ícone de cópia à direita de cada seção para simplificar a operação.
Na seção Código do widget, clique no ícone de download para fazer download da pasta luma-web-widget.zip , que inclui o arquivo index.html, o arquivo luma-web-widget.js e o arquivo web-widget.css com imagens.
A seção Personalizar tela de boas-vindas apresenta uma mensagem de introdução para os usuários que estão entrando pela primeira vez e aos usuários Convidados. Um desafio comum para os usuários que interagem com um bot de bate-papo é entender o que o bot pode e não pode fazer. Esta é uma maneira de instruí-los sobre o que o bot pode fazer. Personalizar a tela de boas-vindas consiste em:
- Título de boas-vindas: uma mensagem de saudação para os usuários quando eles abrem a janela de bate-papo do bot. O número máximo de caracteres é 45.
- Descrição de boas-vindas: a descrição de boas-vindas permite comunicar uma breve visão geral, o propósito e os recursos do bot. Especifique uma mensagem personalizada para dar as boas-vindas ao usuário quando ele abrir o widget da web pela primeira vez. O número máximo de caracteres é 580.
- O título e a descrição de boas-vindas fazem parte da tela de boas-vindas. A mensagem de boas-vindas é exibida para um usuário registrado apenas durante sua primeira interação com o bot. No entanto, para um usuário convidado (um usuário não registrado), a mensagem de boas-vindas é exibida sempre que ele inicia o widget da web.
Na seção Personalizar cor do widget, você pode personalizar a paleta de cores ao digitar ou selecionar a cor primária necessária. Também é possível selecionar a cor na lista de cores comuns.
Alterne o botão Mostrar tela de boas-vindas para ATIVADO. Isso garante que a tela de boas-vindas seja exibida quando um novo usuário abrir o widget pela primeira vez.
Clique em Salvar para ativar o canal do Widget da web. Você poderá desativar o widget da web se não desejar que esse canal fique disponível para os usuários.

Instalar o Widget da web em seu site

Tirando os testes, a configuração do widget da web em seu site pode levar de 10 a 30 minutos, dependendo da familiaridade que você tem com o site e a incorporação de HTML.

Para configurar o widget da web em seu portal da web, siga este procedimento:

Abra a pasta luma-web-widget (baixada na etapa 5 da EnableWebWidgetChannelinSkillsBuilder seção acima).
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 EnableWebWidgetChannelinSkillsBuilder 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.
  Exemplo de código de cabeçalho
```
<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 EnableWebWidgetChannelinSkillsBuilder 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.
  Exemplo de código de corpo
```
<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.
      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.
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.
Observação

Como o Widget da web é preenchido automaticamente na tela, os usuários não precisam configurar nada para exibi-lo.
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.
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.

Estilizar elementos HTML individuais

Você pode estilizar elementos HTML individuais dinamicamente especificando o objeto a seguir no código de Corpo da página index.html.

Exemplo de código de corpo

LumaBot({
    botName: "LumaChatBot",
    user: {
        clientUserId: '<USER ID>',
        additionalProperties: {
        }
    },
    secretkey: '<YOUR SECRET KEY>',
    domain: "<YOUR DOMAIN>",
    styleOptions: {
        lumaChatContainer: {
            height: '400px',
            right: '0px',
            bottom: '0px',
            width: '25%'
        }
    },
},document.getElementById("botHere"));

A seguinte lista de propriedades pode ser editada usando o objeto acima:

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.

Exemplo de código de corpo

<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.

Caso ocorra algum problema com a configuração, entre em contato com a equipe de Suporte da Serviceaide.

Informações adicionais

Veja a seguir a lista de informações adicionais ao usar o widget da web:

O bot exibe uma contagem de mensagens não lidas, como mostrado no exemplo a seguir. Para exibir as mensagens, clique no ícone do bot.
Em caso de várias opções, cartões de respostas são mostradas ao usuário, como mostrado no exemplo a seguir.
A exibição da resposta rápida é suportada durante o bate-papo, como mostrado no exemplo a seguir.
Durante o bate-papo, o bot exibe a linha do tempo do bate-papo com a hora da mensagem para fácil referência, como mostrado no exemplo a seguir.

Dicas de solução de problemas

Durante o bate-papo com o bot, você pode encontrar problemas. Para obter mais informações sobre solução de problemas do widget da web, consulte Solução de problemas do Widget da web.