Versions Compared

Version Old Version 4 New Version Current
Changes made by

sneha.tripathi

sneha.tripathi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Abra a pasta luma-web-widget (baixada na etapa 5 da EnableWebWidgetChannelinSkillsBuilder 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 EnableWebWidgetChannelinSkillsBuilder 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
      languagexml
      titleExemplo de código de cabeçalho
      linenumberstrue
      <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 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
      languagexml
      titleExemplo de código de corpo
      linenumberstrue
      <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
          titleObservaçã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
    titleObservaçã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.

...

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.