Table of Contents
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.
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:
...
Open the index.html page of your web portal in a text editor. Paste the following details in your index.html page:
...
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.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<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> |
...
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.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<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:
- Recipiente div: o elemento "div" é passado como um parâmetro ao Bot Luma, que o usa para iniciar o Bot.
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.
Info title 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.
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.
| Info | ||
|---|---|---|
| ||
Como o Widget da web é preenchido automaticamente na tela, os usuários não precisam configurar nada para exibi-lo. |
...
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.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
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:
...
Table of Contents
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 Ativar o canal do Widget da web 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:
- Cole o conteúdo da página de índice da pasta luma-web-widget na sua página index.html.
Cole o código do cabeçalho da página de configuração do Widget da web (copiado na etapa 4 na 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 language xml title Exemplo de código de cabeçalho linenumbers true <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>Cole o código do corpo da página de configuração do Widget da web (copiado na etapa 4 na 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 language xml title Exemplo de código de corpo linenumbers true <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:
- Recipiente div: o elemento "div" é passado como um parâmetro ao Bot Luma, que o usa para iniciar o Bot.
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 title 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.
Info title 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.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
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.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<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 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.