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 Configurar o Widget da web#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 Configurar o Widget da web#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 Configurar o Widget da web#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

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.