WebChat (Omnichannel)

Como acessar o Widget de WebChat

Para acessar o Widget de WebChat, você precisa criar um chatbot Omni-Channel. Observe que o WebChat está disponível apenas no Omni-Channel.

Se você ainda não criou o Omni-Channel, use o botão “Configurar Omni Channel” para criá-lo, conforme a imagem abaixo:

Ao criar o Omni-Channel, dê um nome a ele; em seguida você verá a tela abaixo:

Você pode criar um canal novo ou converter um canal existente em Omni-Channel.

Depois de criar o Omni-Channel, você encontrará o Widget de WebChat na barra lateral esquerda.

Como personalizar o Widget de WebChat

Depois de localizar seu widget, pressione o ícone de lápis à direita dele para editar e personalizar o Widget de WebChat como preferir.

Ao pressionar, você entra na visão geral das configurações disponíveis;

Conteúdo

A primeira seção do widget é a guia Conteúdo. Nela você encontra as seguintes opções;

• Bolha de bate-papo
• Cabeçalho do bate-papo
• Botão de conversa
• Mensagem de boas-vindas
• Mensagem de ausência temporária
• Formulário pré-chat
• Fluxo inicial padrão

Vamos analisá-los 1 por 1.

Bolha de bate-papo

Na bolha de bate-papo, você seleciona o ícone de bolha de sua preferência. A escolha aparece imediatamente na visualização no canto inferior direito;

Nas opções na parte superior desta tela, você também pode escolher entre exibir apenas o ícone ou combiná-lo com texto.

Botão de conversa

Com o Botão de Conversa, você cria seus próprios botões de call to action (CTAs) para permitir que os usuários iniciem, continuem ou comecem uma nova conversa;

Mensagem de boas-vindas

Você pode adicionar um título e um slogan de boas-vindas para incentivar as pessoas a clicar no seu Widget de WebChat.

Mensagem de ausência temporária

Com a mensagem de ausência temporária, você adiciona um aviso ao seu widget. Também é possível definir a mensagem de resposta;

Formulário pré-chat

Com esta configuração, você captura dados essenciais antes mesmo de o bate-papo começar e os salva em qualquer campo do sistema ou campo personalizado de usuário disponível.

Primeiro você tem o cabeçalho do formulário, onde pode indicar a finalidade dele. Depois, insira um campo pressionando o botão + Adicionar Campo.

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

Depois de selecionar o tipo, você pode editá-lo pressionando o botão editar;

Ao editar qualquer um dos campos, você terá várias opções para escolher. Vamos usar um campo do tipo e-mail como exemplo;

Primeiro, você seleciona o campo do sistema ou o campo personalizado de usuário no qual quer salvar o valor informado pelo usuário. Depois, define o nome do rótulo do campo do formulário. No placeholder, você dá um exemplo do formato em que gostaria de receber o e-mail. A seção de dicas permite fornecer informações adicionais sobre este tipo de campo.

As duas últimas opções determinam se o campo é obrigatório e qual largura ele terá. O resultado fica assim;

Depois de editar o campo do jeito que você quer, pressione o botão Feito na parte superior dele para salvar as alterações.

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

Para o usuário, a visualização ao vivo fica assim;

Essa mensagem é salva no campo do sistema chamado {{última entrada de texto}}.

Fluxo inicial padrão

Se o Formulário Pré-Chat não estiver ativado, você deverá definir um fluxo inicial padrão de sua escolha;

Ao pressionar, você poderá selecionar qualquer um dos fluxos criados anteriormente;

Pular o Botão de Conversa

No WebChat, você pode configurar o widget para dispensar a necessidade de clicar no botão que inicia a conversa.

Para isso, você precisa:

• Certificar-se de não selecionar outros canais no Widget de WebChat.
• Certificar-se de que o Fluxo Inicial Padrão esteja conectado.

Você encontra as configurações do seu canal conectado aqui:

Certifique-se também de que o fluxo inicial esteja conectado a algum dos seus fluxos.

Depois de fazer as alterações, aplique-as, instale o código e teste no seu site.

Agora você não precisa mais clicar no botão para iniciar a conversa.

Mensagens de saudação

Você pode configurar mensagens de saudação diferentes em páginas diferentes do seu site.

Ela aparece para o usuário que acessa pela primeira vez,

E as configurações da mensagem de saudação ficam aqui:

Você pode definir em qual página ou páginas quer acionar a mensagem de saudação e também configurar o nome e o perfil do remetente.

Assista ao vídeo abaixo para mais detalhes:

Configurações

Na guia de configurações, você tem as seguintes opções para personalizar;

• Linguagem
• Som de notificação
• Recursos
• Domínio da lista de permissões

Vamos examinar cada configuração em detalhe.

Linguagem

Com a configuração de idioma, você altera o idioma de exibição de algumas seções do widget;

Basta selecionar o idioma no lado esquerdo para ver as alterações refletidas na visualização à direita, na hora.

Som de notificação

Com esta opção, você define o som das notificações de novas mensagens que seus usuários ouvirão enquanto conversam com o seu Widget de WebChat.

Você pode escolher entre 21 sons ou optar por nenhum som, se preferir.

Recursos

Com esta opção, você ativa ou desativa determinados recursos dentro do seu widget;

Você tem acesso às seguintes opções;

• Permitir seletor de emojis -› permite que os usuários escolham emojis predefinidos
• Permitir upload de anexos -› permite que os usuários enviem documentos, imagens e/ou vídeos
• Permitir que os usuários encerrem o bate-papo -› esta opção permite que o usuário feche a conversa
• Permitir janela pop-up de bate-papo -› permite que os usuários transformem o widget de bate-papo em 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. É uma experiência fluida para quem começa no computador e quer continuar a conversa com a sua empresa em trânsito

Domínio da lista de permissões

Para exibir o widget no seu site, você precisa colocar seu domínio na lista de permissões. Basta adicionar o domínio raiz: todos os subdomínios que você tiver serão reconhecidos automaticamente;

Aparência

Com estas opções, você personaliza o seu WebChat para combinar com as cores e as 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ê personaliza a aparência do seu Widget de WebChat com valores predefinidos;

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

• Padrão
• Plano
• Facebook
• WhatsApp
• WeChat

O melhor desses temas é que eles dão uma aparência com a qual os usuários já estão familiarizados, como a do Messenger ou a do WhatsApp. Esses temas criam uma experiência de bate-papo semelhante dentro do próprio site.

Como você pode ver, a experiência faz o usuário se sentir em casa ao iniciar uma conversa com a sua empresa, porque é muito parecida com o que ele já conhece.

Fonte

Com as fontes, você muda completamente a aparência do Widget de WebChat, combinando-o com a sua própria marca ou criando uma experiência realmente única.

Atualmente você pode escolher entre 25 fontes para deixar o Widget de WebChat com a sua cara.

Cor

Com esta opção, você altera 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ê altera o raio da borda do botão “iniciar conversa”;

Você também pode escolher a opção personalizada para definir o seu próprio raio. Isso ajuda a manter tudo em sintonia com os botões do seu site, por exemplo.

Estilo de exibição

A opção de estilo de exibição oferece várias maneiras de usar o WebChat no seu site. Vejamos as diferentes opções;

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

• Estilo
• Design
• Código de Instalação

Estilo

Você tem 4 estilos diferentes para escolher como quer usar o canal de WebChat no seu site.

• Modal flutuante -› exibe o ícone de chat ao vivo na parte inferior da sua página
• Página Inteira -› permite incorporar o widget de bate-papo como uma página inteira
• Incorporar janela de bate-papo -› permite exibir a janela de bate-papo em qualquer lugar da sua página
• Popup Modal -› permite abrir uma janela pop-up com a conversa com o seu chatbot. Qualquer elemento da sua página pode ser o gatilho, desde que você aplique uma classe a ele.

A melhor parte é que, em um mesmo site, você pode instalar estilos diferentes de WebChat em páginas diferentes.

Confira este vídeo para mais detalhes:

Design

Na guia Design, você define as configurações do widget de conversa para o estilo de widget selecionado. Abaixo, um exemplo da opção de janela de bate-papo incorporada;

Código de Instalação

O Código de Instalação gera o script do estilo de widget de chat que você quer colocar na sua página;

O Código de Instalação muda conforme o estilo de widget selecionado.

Abaixo, um exemplo da janela de bate-papo incorporada;

Seção Avançada

Existem muitas personalizações que você pode fazer no botão de WebChat. Algumas são um pouco mais avançadas, por isso vamos reuni-las nesta seção.

Instalando vários tipos de widgets e diferentes fluxos iniciais em seu site

Com o Widget de WebChat, você pode instalar quantos tipos quiser em qualquer página dentro do seu domínio.

Depois de gerar o tipo de widget desejado, você pode adicionar um parâmetro ref a ele. Isso permite iniciar com facilidade qualquer fluxo de sua preferência.

Crie sua URL de Referência

Para isso, crie qualquer tipo de URL de Referência na seção Ferramentas;

Ao criar sua URL de Referência, você também já a terá conectado ao fluxo de sua preferência. Agora você pode usar essa 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 sua URL de Referência e copiou o parâmetro ref, é hora de adicioná-lo ao script de instalação do WebChat.

É muito fácil fazer isso;

Se você já colou o script de instalação do WebChat, basta adicionar um ponto de interrogação depois de .js, adicionar ref= e, em seguida, colar o parâmetro ref copiado da URL de Referência que você criou.

Isso substitui o fluxo inicial padrão existente e permite iniciar o fluxo de sua preferência.

Isso abre caminho para usar o mesmo widget em páginas diferentes, mas com fluxos iniciais diferentes.

Alguns casos de uso;

• Uma landing page requer um fluxo de vendas específico
• O suporte ao cliente começa com um fluxo de suporte

Mas fica ainda melhor!

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

As cargas úteis ajudam a gravar dados específicos direto nos campos personalizados do usuário, sem que ele precise informá-los. Um exemplo: você quer saber de qual seção do site o usuário veio. Se ele veio de uma landing page, você pode registrar isso no 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 voltar à URL de Referência que usamos dentro do Widget de WebChat.

Lá, você pode adicionar até 10 cargas úteis para usar diretamente no perfil do usuário;

Vejamos o exemplo de registrar a origem do usuário, ou seja, a página do seu site de onde ele veio.

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

Feito isso, não se esqueça de pressionar o botão Salvar no canto superior direito.

De volta ao script de instalação do WebChat, você já pode adicionar os dados que quiser ao parâmetro ref.

Digamos que você adicionou este widget à sua landing page. A origem do tráfego pode ser o nome dessa landing page ou o que fizer sentido para você. Ficaria assim;

Para adicionar uma carga útil, use 2 hífens seguidos do valor; neste caso, “--ebook-7figure-income”

Assim que um visitante interagir com este Widget de WebChat naquela página, você verá esse valor ser adicionado ao perfil dele;

Como dito, você pode salvar até 10 tipos diferentes de cargas dessa maneira.