WebChat

1 Como acessar o widget do webchat
2 Como personalizar o widget do webchat
- 2.1 Contente
  - 2.1.1 Balão de bate-papo
  - 2.1.2 Botão de conversação
  - 2.1.3 Mensagem de boas-vindas
  - 2.1.4 Mensagem de ausência do escritório
  - 2.1.5 Formulário de pré-chat
  - 2.1.6 Fluxo de Início Padrão
  - 2.1.7 Pule o botão de conversa
  - 2.1.8 Mensagens de Saudação
- 2.2 Configurações
  - 2.2.1 Linguagem
  - 2.2.2 Som de notificação
  - 2.2.3 Características
  - 2.2.4 Domínio da lista de permissões
- 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 Estilo de exibição
  - 2.4.1 Estilo
  - 2.4.2 Projeto
  - 2.4.3 Instalar código
  - 2.4.4 Definir ID de usuário personalizado
- 2.5 Seção Avançada
  - 2.5.1 Instalando vários tipos de widgets e diferentes fluxos de inicialização em seu site
    - 2.5.1.1 Crie sua URL de referência
    - 2.5.1.2 Adicionando o parâmetro ref ao seu código de instalação do webchat.
    - 2.5.1.3 Adicionando cargas úteis ao widget webchat
  - 2.5.2 Pré-preencher dados do usuário para o usuário do chat da web
    - 2.5.2.1 Passando informações do usuário
    - 2.5.2.2 Passando parâmetros extras para o usuário do chat da web
3 Perguntas frequentes:

Com o widget webchat, você poderá adicionar um chatbot a qualquer site sem a dependência de nenhum outro canal. Isso ajudará você a desbloquear o poder do marketing conversacional sem as desvantagens ou restrições que outros canais podem ter.

Exemplo de funcionamento do Webchat no site da WiiChat

Como acessar o widget do webchat

Para acessar o widget webchat, você precisa criar um chatbot omni-Channel. Observe que o web chat só está disponível no Omni-Channel.

Se você não criou um canal omni, você pode criar o botão “Configurar canal omni” para criar o canal omni conforme a captura de tela abaixo:

O Widget do Webchat está disponível no canal Omnichannel

Você pode criar um novo bot ou converter um bot existente em omnicanal.

Depois de criar o canal omni, você poderá encontrar o widget de webchat na barra lateral esquerda.

Como personalizar o widget do webchat

Depois de localizar seu widget, você pode pressionar o ícone de lápis à direita dele para editar e personalizar o widget do webchat como preferir.

Após pressionar, você entrará na visão geral principal das configurações disponíveis;

Contente

A primeira seção do widget será a aba de conteúdo. Aqui você encontrará as seguintes opções;

Balão de bate-papo
Cabeçalho do bate-papo
Botão de conversação
Mensagem de boas-vindas
Mensagem de ausência do escritório
Formulário de pré-chat
Fluxo de início padrão

Vamos analisá-los um por um.

Balão 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 pré-visualização no canto inferior direito;

Você também pode escolher entre ter apenas o ícone ou combiná-lo com texto nas opções superiores desta tela.

Botão de conversação

Com o botão de conversa, você pode criar seus próprios botões de chamada para ação (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 de boas-vindas e um slogan para atrair pessoas para clicar no seu widget de webchat.

Mensagem de ausência do escritório

Com a mensagem de ausência do escritório, você poderá adicionar uma notificação ao seu widget. Você poderá definir a mensagem de resposta também;

Formulário de pré-chat

Com essa configuração, você pode capturar dados essenciais antes mesmo de o bate-papo começar e salvá-los em qualquer sistema ou campo de usuário personalizado disponível.

Observe que o Pre Chat Form não funciona com o modo de página inteira e incorporado. Você precisa usar o estilo flutuante ou pop-up.

Primeiro você terá o cabeçalho do formulário onde você pode declarar o propósito deste formulário. Depois você poderá inserir um campo de formulário pressionando o botão + Adicionar Campo .

Você poderá então selecionar qualquer um dos seguintes tipos de campo;

Primeiro, você pode selecionar o campo de sistema ou 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 de 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 dica permitirá que você dê informações adicionais sobre esse tipo de campo.

As duas últimas opções permitirão que você determine se o campo é obrigatório e qual largura você quer que o campo tenha.

Depois de editar completamente o campo conforme desejar, você pode pressionar o botão Concluído na parte superior deste campo para salvar as alterações.

Por fim, abaixo dos campos, você terá uma opção adicional para permitir que o usuário escreva uma mensagem antes de entrar no chatbot;

Isso ficará parecido com o seguinte na visualização ao vivo para o usuário;

Esta mensagem será salva no campo do sistema chamado {{última entrada de texto}}.

Fluxo de Início Padrão

Se o formulário de 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 que você criou anteriormente.

Pule o botão de conversa

No chat da web, você pode configurar e ignorar a necessidade de clicar no botão para iniciar a conversa.

Para fazer isso, você precisa:

certifique-se de não selecionar outros canais no widget de bate-papo da web.
certifique-se de que o fluxo de início padrão esteja conectado.

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 no seu site.

Além disso, você não pode ter o formulário de pré-chat habilitado para que isso funcione.

Você 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á para o primeiro 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, além de configurar o nome e o perfil do remetente.

Configurações

Na 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;

Basta selecionar o idioma no lado esquerdo e você verá as alterações refletidas na pré-visualização à direita instantaneamente.

Som de notificação

Com esta opção, você poderá configurar o som para notificações de novas mensagens que seus usuários ouvirão quando estiverem conversando com seu widget de webchat.

Você pode escolher entre 21 sons ou optar por não ouvir som, se preferir.

Características

Com esta opção você pode habilitar ou desabilitar certos recursos dentro do seu widget;

Você terá acesso às seguintes opções;

Permitir seletor de emojis -› permitir que os usuários escolham entre 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 encerre a conversa do bate-papo.
Permitir janela de bate-papo pop-up -› isso permite que os usuários alterem o widget de bate-papo para um pop-up, o 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 estiverem na estrada

Domínio da lista de permissões

Para exibir o widget no 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;

Observe que apenas um domínio raiz é suportado no canal omni.

Aparência

Com essas opções, você pode personalizar seu webchat para combinar com as cores e preferências da 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 webchat com valores predefinidos;

Você tem os seguintes temas à sua disposição:

Padrão
Plano
Facebook
Whatsapp
WeChat

O melhor desses temas é que eles dão uma aparência e uma sensação com as quais 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 fontes, você pode mudar totalmente a aparência do widget do webchat, 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 webchat sua experiência pessoal.

Cor

Com esta opção você pode alterar a paleta de cores do seu widget de webchat

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 custom para adicionar seu próprio raio. Isso ajudará você 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 lhe dará várias maneiras de usar o webchat em seu site. Vamos dar uma olhada nas diferentes opções;

Temos 3 seções principais que você pode personalizar:

Estilo
Projeto
Instalar código

Estilo

Você tem 4 estilos diferentes para escolher como deseja usar o canal de 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 que você abra 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.

A melhor parte é que, para o mesmo site, você pode instalar diferentes estilos de web chat em diferentes páginas.

Projeto

Com a aba de design, você poderá definir as configurações do widget de conversação do estilo de widget que você selecionou. Abaixo está um exemplo de opção de janela de chat incorporada;

Instalar código

O código de instalação gerará o script do estilo desejado de widget de bate-papo que você deseja colocar no ar em sua página;

O código de instalação será diferente dependendo do estilo do widget selecionado.

Definir ID de usuário personalizado

Seção Avançada

Há muitas personalizações que você pode fazer com o botão webchat. Algumas são um pouco mais avançadas, por isso vamos colocá-las nesta seção.

Instalando vários tipos de widgets e diferentes fluxos de inicialização em seu site

Com o widget de webchat, você pode instalar quantos tipos desejar em qualquer uma das suas páginas dentro do 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 sua 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 sua URL ref, você também a terá conectado ao seu fluxo de preferência. Agora você pode usar essa URL ref copiando o parâmetro ref;

Adicionando o parâmetro ref ao seu código de instalação do webchat.

Agora que você criou sua URL de referência e copiou o parâmetro ref, é hora de adicioná-lo ao script de instalação do seu webchat.

A maneira de fazer isso é muito fácil;

Se você colou seu script de instalação do webchat, a única coisa que você precisa fazer é adicionar um ponto de interrogação depois de .js e adicionar ref= , depois adicione o parâmetro ref copiado do URL ref que você criou.

Isso substituirá o fluxo inicial padrão existente e, com isso, você poderá iniciar seu fluxo preferido. Ele abre caminho para usar o mesmo widget em páginas diferentes, mas com fluxos iniciais diferentes.

Casos de uso para isso poderiam ser:

Uma landing page promocional ou de um produto específico
Página de preços que redirecionar para um atendente humano
O suporte ao cliente começa com um fluxo de suporte

Mas fica ainda melhor!

Como você está usando o parâmetro de URL ref, você também pode adicionar cargas úteis ao widget.

Payloads ajudam você a adicionar partes específicas de dados 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 está vindo. Digamos que ele ou ela veio de uma landing page, você pode então adicionar isso dentro do widget como um payload para ser salvo no perfil do usuário.

Adicionando cargas úteis ao widget webchat

Para adicionar uma carga útil, precisamos retornar à URL de referência que usamos dentro do widget de webchat.

Uma vez lá, você pode adicionar até 10 payloads para serem usados diretamente no perfil do usuário;

Vamos pegar o exemplo de adicionar a fonte de onde o usuário veio, ou seja, a página do seu site.

Na primeira carga útil, linha vamos adicionar o campo de usuário personalizado “utm_source”

Quando terminar, não se esqueça de clicar no botão Salvar no canto superior direito.

Ao retornar ao script de instalação do seu webchat, agora você pode adicionar seus dados preferidos ao parâmetro ref.

Digamos que você adicionou este widget à sua landing page. A fonte de tráfego pode ser o nome da sua landing page ou o que funcionar para você. Poderia então parecer algo assim;

Para adicionar uma carga útil, você usa 2 hifens e, em seguida, seu valor, então, neste caso, é “--email”

Quando um visitante interage com este widget de webchat naquela página, você verá que esse valor será adicionado ao perfil de usuário dele.

Como mencionado, você poderá salvar até 10 tipos diferentes de cargas úteis dessa maneira.

Pré-preencher dados do usuário para o usuário do chat da web

Se você já tiver informações do usuário, como nome, e-mail, etc., você pode passar essas informações diretamente para o usuário do chat da web.

Você também pode passar parâmetros extras diretamente para o campo personalizado do usuário do chat da web.

Passando informações do usuário

Você pode usar este script para passar as informações do usuário para o usuário do bate-papo na web.

    <script>
    window.addEventListener("chatbot:ready", function () {
        window.$chatbot.setUser("XXXX", {
          email: "YYYYYY",
          name: "ZZZZ",
          avatar_url: "https://res.cloudinary.com/gmdigital/image/upload/v1618453871/profile/3636079236501557.jpg"
      });
});
</script>

Você precisará garantir que o userID XXXX seja exclusivo para cada usuário.

Passando parâmetros extras para o usuário do chat da web

Se você quiser passar os parâmetros extras para o usuário do chat da web, você pode usar o código abaixo

    <script>
    window.addEventListener("chatbot:ready", function () {
        window.$chatbot.setCustomAttributes({
            user_fields: {
                provider: "XXXX",
                issue_title: "YYYY"
            }
        });
});
</script>

Certifique-se de que o nome do campo personalizado do usuário seja o mesmo nome que você tem no seu chatbot do WiIChat.

No exemplo acima, o nome “provider” e “issue_title”, temos exatamente o mesmo nome em nosso chatbot.

Perguntas frequentes:

Posso alterar o rodapé do widget de bate-papo na web? Infelizmente não é possível.
Seletores CSS do widget de bate-papo da Web
O widget do chatbot pode ser aberto sem precisar clicar no botão?