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

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

  • Copy the Secret Key, the Header Code and finally the Body Code and retain them in an easily accessible location such as notepad or a text editor tool. These details will be used later when adjusting the web widget code on your website. You can use the copy icon to the right of each section to simplify the operation. 

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

    • Welcome Description: The Welcome Description allows for communicating a brief overview, purpose, and capabilities of the bot. Specify a custom message to welcome the user when they open the web widget for the first time. The maximum number of characters is 580. 

    • The Welcome Title and Description are part of the welcome screen. The Welcome message appears for a registered user only during their first interaction with the bot. However, for a guest user (an unregistered user), the welcome message appears every time they come and launch the web widget.

  • 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.
  • Você pode definir o Status do widget da web como Ativo.
  • 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 Enable the Web Widget Channel seção acima).

  2. Open the index.html page of your web portal in a text editor. Paste the following details in your index.html page:

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

    2. Paste the Header Code from the Web Widget configuration page (copied in step 4 in Enable the Web Widget Channel section above) into your index.html. The Header code includes the CSS stylesheet associated with the web widget. To learn how to customize the stylesheet to change the appearance of the web widget, see the Customize Web Widget Styles article. See the example below of a sample index.html page. 

      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. Paste the Body Code from the Web Widget configuration page (copied in step 4 in Enable the Web Widget Channel section above) in the index.html. The Body Code (which includes the secret key) contains the following javascript, which is used to embed the web chat control on your website. 

      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: This consists of the following parameters:

        • Bot Name: The name of the Bot you are chatting with. You can edit the botname as required on your index.html page. This bot name appears on the web widget chat window as shown below. It does not need to match with the bot name inside the Bot Builder interface.

          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.

        • Client User ID: Is an ID assigned to each unique user of your website. If the user logs into the web portal using their credentials, then those credentials (email ID or username) are passed to the web widget to auto-authenticate the users. If the client user ID is not passed to the web widget, then the user continues as a guest, and is prompted for registration.

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

        • Domain: The domain URL is the URL used to communicate with the Luma Virtual Agent platform. This URL is pre-populated in the Body code. Ensure that the correct domain URL is provided in the body, failing which it will not connect to the Luma Virtual Agent instance. 

  3. Save your index.html page with the changes and refresh the web portal and cache to load the web widget automatically on the screen for users as shown in the following sample page.

    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. On subsequent chat sessions, the web widget will show the previous conversation history for authenticated users. For guest users, the welcome message is displayed every time the user chat on the web widget.

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"));

The following list of properties can be edited by using the above object:

  • 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