Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 2 Next »

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:

  1. Faça download do código do widget (luma-web-widget.zip).
  2. 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.
  3. 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:

  1. Abra a pasta luma-web-widget (baixada na etapa 5 da EnableWebWidgetChannelinSkillsBuilder 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 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. 

  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.

    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.

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:

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

  2. Em caso de várias opções, cartões de respostas são mostradas ao usuário, como mostrado no exemplo a seguir.

  3. A exibição da resposta rápida é suportada durante o bate-papo, como mostrado no exemplo a seguir.

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

  • No labels