2 Como personalizar o widget de Web canal
2.1 Conteúdo
2.1.1 Balão de bate-papo
2.1.2 Botão Conversa
2.1.3 Mensagem de boas-vindas
2.1.5 Formulário Pré-Chat
2.1.6 Fluxo inicial padrão
2.1.7 Botão Pular conversa
2.1.8 Mensagens de saudação
2.2 Configurações
2.2.1 Idioma
2.2.2 Som de notificação
2.2.3 Recursos
2.2.4 Domínio da lista branca
2.3 Aparência
2.3.1 Tema
2.3.2 Fonte
2.3.3 Cor
2.3.4 Botão Iniciar bate-papo
2.4.1 Estilo
2.4.2 Projeto
2.4.3 Código de instalação
2.5 Seção Avançada
...
| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...
Com o widget webchat, você poderá adicionar um chatbot a qualquer site sem depender de nenhum outro canal. Isso o ajudará a desbloquear o poder do marketing de conversação sem as desvantagens ou restrições que outros canais possam ter.
Como acessar o widget de
...
webchat
Para acessar o widget de Web Canal webchat você precisa criar um chatbot omni-CanalChannel. Observe que o chat na web está disponível apenas no Omni-CanalChannel.
Se você não criou o omni Canalchannel, você pode criar o botão “Configurar omni Canal” channel” para criar o omni Canal channel conforme imagem abaixo:
Se você criar o canal omni, dê um nome a ele e você verá a captura de tela abaixo:
Você pode criar um novo bot ou converter o bot existente em omni Canalchannel.
Depois de criar o canal omni, você poderá encontrar o widget de Web Canal webchat na barra lateral esquerda.
...
Como personalizar o widget de
...
webchat
Depois de localizar seu widget, você pode pressionar o ícone de lápis à direita para editar e personalizar o widget de Web Canal webchat ao seu gosto.
Uma vez pressionado, você entrará na visão geral principal das configurações disponíveis;
...
Contente
A primeira seção do widget será a guia de conteúdo. Aqui você encontrará as seguintes opções;
...
Vamos analisá-los 1 por 1.
Bolha de bate-papo
Com o balão de bate-papo, você pode selecionar seu ícone de balão preferido. Você verá isso refletindo diretamente na visualização no canto inferior direito;
Você também pode escolher entre ter apenas o ícone ou combiná-lo com o texto nas opções superiores desta tela.
Botão de conversa
Com o botão de conversa, você pode criar seus próprios botões de call to action (CTA's) para permitir que os usuários iniciem, continuem ou iniciem uma nova conversa;
...
Mensagem de boas-vindas
Você pode adicionar um título e um slogan de boas-vindas para fazer com que as pessoas incentivem as pessoas a clicar em seu widget de chat na web.
...
Mensagem de ausência temporária
Com a mensagem de ausência temporária você poderá adicionar uma notificação ao seu widget. Você também poderá definir a mensagem de resposta;
...
Formulário pré-chat
Com esta configuração, você pode capturar dados essenciais antes mesmo de o chat começar e salvá-los em qualquer sistema ou campo de usuário personalizado disponível.
| Note |
|---|
Observe que o formulário de pré-chat não funciona no modo incorporado e de página inteira. Você precisa usar o estilo flutuante ou pop-up. |
...
Em primeiro lugar você terá o cabeçalho do formulário onde poderá indicar a finalidade deste formulário. Depois você poderá inserir um formulário de campo pressionando o botão + Adicionar Campo .
...
Você poderá então selecionar qualquer um dos seguintes tipos de campo;
...
Após selecionar seu tipo você poderá editá-lo pressionando o botão editar;
...
Depois de editar qualquer um dos campos, você terá várias opções para escolher. Vamos pegar um campo de tipo de e-mail como exemplo;
...
Em primeiro lugar, você pode selecionar o sistema ou campo de usuário personalizado no qual deseja salvar o valor fornecido pelo usuário. Então você poderá definir o nome do rótulo do campo do formulário. Dentro do espaço reservado, você poderá dar um exemplo do formato em que gostaria de receber o e-mail. A seção de dicas permitirá que você forneça informações adicionais sobre este tipo de campo.
...
As duas últimas opções permitirão que você determine se o campo é obrigatório e qual largura você deseja que ele tenha. Como resultado, ficará assim;
...
Depois de editar totalmente o campo ao seu gosto, você pode pressionar o botão Feito na parte superior deste campo para salvar as alterações.
...
Por último abaixo dos campos você terá uma opção adicional para permitir que o usuário escreva uma mensagem antes de entrar no chatbot;
...
Será parecido com o seguinte na visualização ao vivo para o usuário;
...
Esta mensagem será salva no campo do sistema denominado {{última entrada de texto}}.
Fluxo inicial padrão
Se o formulário pré-chat não estiver habilitado, você deverá definir um fluxo inicial padrão de sua escolha;
...
Uma vez pressionado, você poderá selecionar qualquer um dos fluxos criados anteriormente;
...
Pular o botão de conversa
No web chat, você pode configurar e então dispensar a necessidade de clicar no botão para iniciar a conversa.
...
Você pode encontrar as configurações do seu canal conectado aqui:
...
Certifique-se também de que o fluxo inicial esteja conectado a qualquer um dos seus fluxos.
...
Depois de fazer as alterações, certifique-se de aplicá-las, instale o código e teste em seu site.
| Note |
|---|
Além disso, você não pode ativar o formulário pré-chat para que isso funcione. |
You shouldn’t need to click the button to initiate the conversation now.
Greeting Messages
You can set up different greeting messages on different page of your website.
It will show up for the first time user,
And you can find the greeting message settings below:
You can set up which page or pages you want to trigger the greeting message, also you can set up the sender name & profile.
Watch the below video for more details:
Settings
Inside the settings tab you will have the following options to customize;
Language
Notification Sound
Features
Whitelist Domain
Let’s take a deeper look at each individual settingVocê não precisa clicar no botão para iniciar a conversa agora.
Mensagens de saudação
Você pode configurar diferentes mensagens de saudação em diferentes páginas do seu site.
Ele aparecerá pela primeira vez para o usuário,
...
E você pode encontrar as configurações da mensagem de saudação abaixo:
...
Você pode configurar qual página ou páginas deseja acionar a mensagem de saudação e também pode configurar o nome e perfil do remetente.
Assista ao vídeo abaixo para mais detalhes:
Configurações
Dentro da aba de configurações você terá as seguintes opções para personalizar;
Linguagem
Som de notificação
Características
Domínio da lista de permissões
Vamos dar uma olhada mais profunda em cada configuração individual
Linguagem
Com a configuração de idioma você pode alterar o idioma de exibição de algumas seções dentro do widget;
Just select the language on the left-hand side and you will see the changes reflected in the preview on the right instantly
...
Basta selecionar o idioma no lado esquerdo e você verá instantaneamente as alterações refletidas na visualização à direita.
Som de notificação
Com esta opção, você poderá configurar seu som para notificações de novas mensagens que seus usuários ouvirão quando estiverem conversando com seu widget de Web Canalwebchat.
...
Você pode escolher entre 21 sons ou selecionar nenhum som, se preferir.
Características
Com esta opção você pode ativar ou desativar determinados recursos dentro do seu widget;
...
You will have access to the following optionsVocê terá acesso às seguintes opções;
Permitir seletor de emojis -› permite que os usuários escolham emojis predefinidos
Permitir upload de anexos -› permitir que os usuários carreguem documentos, imagens e/ou vídeos
Permitir que os usuários encerrem o bate-papo -› esta opção permitirá que o usuário feche a conversa do bate-papo.
Permitir janela pop-up de bate-papo -› permite que os usuários transformem o widget de bate-papo em um pop-up que resulta em uma exibição maior do bate-papo
Permitir continuar o bate-papo no celular -› Os usuários podem escanear um código QR para continuar a conversa no telefone. Experiência tranquila se eles começarem em um computador e quiserem continuar a conversa com sua empresa enquanto estão na estrada
Domínio da lista de permissões
Para exibir o widget em seu site, você precisará colocar seu domínio na lista de permissões. Você só precisa adicionar seu domínio raiz e todos os subdomínios que você tiver serão automaticamente reconhecidos;
| Note |
|---|
Observe que apenas um domínio raiz é compatível com o canal omni. |
...
Aparência
Com essas opções, você pode personalizar seu Web Canal webchat para combinar com as cores e preferências de sua marca;
...
Você tem as seguintes opções para escolher;
Tema
Fonte
Cores
Botão Iniciar bate-papo
Tema
Com os temas você pode personalizar a aparência do seu widget de Web Canal webchat com valores predefinidos;
...
Você tem os seguintes temas à sua disposição:
...
O melhor desses temas é que eles dão uma aparência com a qual os usuários já estão familiarizados, como quando usam o Messenger do WhatsApp. Esses temas criarão uma experiência de bate-papo semelhante diretamente no local.
...
Como você pode ver, a experiência faz com que o usuário se sinta em casa para iniciar uma conversa com sua empresa porque a experiência é muito semelhante.
Fonte
Com as fontes você pode alterar totalmente a aparência do widget de Web Canalwebchat, combinando-o com sua própria marca ou criando uma experiência realmente única.
...
Atualmente você pode escolher entre 25 fontes para realmente tornar o widget de Web Canal webchat sua experiência pessoal.
Cor
Com esta opção você pode alterar a paleta de cores do seu widget de Web Canalwebchat
...
Você pode personalizar as seguintes seções:
Cor do widget
Ícone de bolha e cor do texto
Cor do botão Iniciar bate-papo
Cor de fundo do cabeçalho
Cor de fundo do corpo
Botão Iniciar bate-papo
Com esta opção você pode alterar o raio da borda do botão “iniciar conversa”;
...
Você também pode escolher a opção personalizada para adicionar seu próprio raio. Isso o ajudará a manter as coisas sincronizadas com os botões do seu próprio site, por exemplo.
...
Estilo de exibição
A opção de estilo de exibição oferece várias maneiras de usar o Web Canal webchat em seu site. Vejamos as diferentes opções;
...
Temos 3 seções principais que você pode personalizar:
Estilo
Projeto
Código de instalação
Estilo
Você tem 4 estilos diferentes para escolher como gostaria de usar o canal de Web Canal webchat em seu site.
Modal flutuante -› que lhe dará o ícone de chat ao vivo na parte inferior da sua página
Página inteira -› permitindo que você incorpore o widget de bate-papo como uma página inteira
Incorporar janela de bate-papo -› permite que você exiba a janela de bate-papo em qualquer lugar da sua página
Popup Modal -› Permite abrir uma janela pop-up com a conversa com seu chatbot. Qualquer coisa na sua página pode ser o gatilho, desde que você aplique uma classe a ela.
...
Confira este vídeo para mais detalhes:
Projeto
Com a guia de design, você poderá definir as configurações do widget de conversa do estilo de widget selecionado. Abaixo está um exemplo de opção de janela de bate-papo incorporada;
...
Código de instalação
O código de instalação irá gerar seu script do estilo desejado de widget de chat que você deseja colocar em sua página;
...
O código de instalação será diferente dependendo do estilo do widget selecionado.
...
Abaixo está um exemplo de janela de bate-papo incorporada;
...
Seção Avançada
Existem muitas personalizações que você pode fazer com o botão de Web Canalwebchat. Alguns são um pouco mais avançados, por isso iremos colocá-los nesta seção.
Instalando vários tipos de widgets e diferentes fluxos iniciais em seu site
Com o widget de Web Canalwebchat, você pode instalar quantos tipos desejar em qualquer uma de suas páginas dentro de seu domínio.
...
Depois de gerar o tipo de widget desejado, você pode adicionar um parâmetro ref a ele. Isso permite que você inicie qualquer fluxo de sua preferência com facilidade.
Crie seu URL de referência
A maneira de fazer isso é criar qualquer tipo de URL de referência dentro da seção de ferramentas;
...
Depois de criar seu URL de referência, você também o conectará ao fluxo de sua preferência. Agora você pode usar este URL de referência copiando o parâmetro ref;
...
Adicionando o parâmetro ref ao código de instalação do seu
...
webchat.
Agora que você criou seu URL ref e copiou o parâmetro ref, é hora de adicioná-lo ao script de instalação do Web Canalwebchat.
A maneira de fazer isso é muito fácil;
...
Se você colou o script de instalação do Web Canalwebchat, a única coisa que você precisará fazer é adicionar um ponto de interrogação após .js e adicionar ref= e, em seguida, adicionar o parâmetro ref copiado do URL de referência que você criou.
...
As cargas úteis ajudam você a adicionar dados específicos diretamente aos campos personalizados do usuário, sem que o usuário precise fornecê-los a você. Um exemplo pode ser que você queira saber de qual seção do site o usuário vem. Digamos que ele ou ela veio de uma landing page, você pode então adicionar isso dentro do widget como uma carga a ser salva no perfil do usuário.
Adicionando cargas úteis ao widget de
...
webchat
Para adicionar uma carga útil, precisamos retornar ao URL de referência que usamos dentro do widget de Web Canalwebchat.
Uma vez lá você pode adicionar até 10 cargas úteis para serem usadas diretamente no perfil do usuário;
...
Vejamos o exemplo de adicionar a fonte de onde o usuário veio, ou seja, a página do seu site.
...
Na primeira linha de carga útil, vamos adicionar o campo de usuário personalizado “traffic_source”
...
Uma vez feito isso, não se esqueça de pressionar o botão Salvar no canto superior direito.
...
Ao retornar ao script de instalação do Web Canalwebchat, agora você pode adicionar seus dados preferidos ao parâmetro ref.
...
Digamos que você adicionou este widget à sua landing page. A origem do tráfego pode então ser o nome da sua landing page ou o que funcionar para você. Poderia então ser algo assim;
...
Para adicionar uma carga útil, você usa 2 hífens e, em seguida, seu valor, portanto, neste caso, é “--ebook-7figure-income”
...
Assim que um visitante interagir com este widget de Web Canal webchat naquela página, você verá que esse valor será adicionado ao seu perfil de usuário;
...
Conforme mencionado, você poderá salvar até 10 tipos diferentes de cargas dessa maneira.
...