Como conectar e configurar o WebChat na SM Click #

Objetivo #

Este tutorial apresenta o passo a passo para realizar a conexão e configuração do módulo WebChat na SM Click, desde a criação da instância até a instalação do WebChat no site.

O WebChat permite disponibilizar um canal de atendimento diretamente no site da empresa, com possibilidade de personalização de layout, identidade visual e informações solicitadas ao visitante.

Pré-requisitos #

Para realizar a configuração, é necessário:

Ter o módulo WebChat contratado e habilitado na conta da SM Click;
Ter acesso ao site em que o WebChat será instalado;
Ou contar com o suporte do responsável pelo desenvolvimento ou manutenção do site.

1. Criando uma nova instância do WebChat #

Para iniciar a configuração:

Acesse a SM Click utilizando um perfil de Gestor;
No menu principal, acesse a aba Home;
No canto direito da tela, clique em Nova Instância;
Selecione a opção WebChat;
Informe um nome para identificar a instância.

Exemplo:
WebChat Gabriel

Clique para criar a instância.

Após a criação, a nova instância será apresentada automaticamente na lista de instâncias disponíveis.

2. Iniciando a conexão do WebChat #

Com a instância criada:

Localize a instância do WebChat;
Clique no ícone de Wi-Fi, localizado ao lado da instância;
Informe o site em que o WebChat será utilizado;
Aguarde a validação do endereço informado.

Se o site for validado corretamente, será apresentado um indicador de validação positiva.

Clique em Próximo.

3. Personalizando o WebChat #

Após validar o site, a plataforma verificará se o WebChat já foi personalizado.

Caso ainda não tenha sido configurado, selecione a opção para configurar agora.

A área de configuração possui cinco opções principais:

Layout;
Identidade;
Aparência;
Perguntas;
Instalação.

A seguir, veremos cada uma delas.

3.1. Layout #

A opção Layout permite definir como o botão do WebChat será apresentado no site.

A própria tela de configuração apresenta uma prévia das alterações realizadas.

Posição do botão #

É possível definir a posição em que o botão será apresentado.

Entre as opções disponíveis estão:

Inferior direito;
Inferior esquerdo;
Flutuante.

Ao selecionar a opção Flutuante, o botão ficará posicionado de forma flutuante na página.

Movimento do botão #

Também é possível configurar o comportamento visual do botão.

As opções apresentadas são:

Parado;
Efeito de aumento e retorno ao tamanho original;
Efeito de sacudir.

Essas opções permitem adicionar diferentes formas de animação ao botão do WebChat.

Efeito ao redor do botão #

Também é possível selecionar um efeito visual ao redor do botão.

As opções disponíveis são:

Nenhuma;
Partículas;
Aura;
Anel.

Escolha a opção que melhor se adequar à identidade visual do seu site.

4. Identidade #

Na opção Identidade, é possível definir as informações que serão apresentadas no cabeçalho do WebChat.

Nome #

Informe o nome que deseja exibir no cabeçalho do chat.

Exemplo:
Gabriel Teste

Mensagem de boas-vindas #

Também é possível definir uma mensagem inicial para os visitantes.

Exemplo:

Olá, seja bem-vindo. Como posso te ajudar?

Avatar #

O WebChat também permite configurar um avatar.

É possível:

Inserir uma imagem;
Personalizar características do avatar;
Alterar elementos como olhos;
Rosto;
Boca;
Cabelo;
Roupa.

A personalização do avatar pode ser realizada de acordo com a identidade visual da empresa.

5. Aparência #

A opção Aparência permite personalizar visualmente o WebChat.

Cor principal #

É possível selecionar a cor principal utilizada pelo chat.

Escolha uma das opções disponíveis ou selecione outra cor de sua preferência.

Cor secundária #

A cor secundária é aplicada a elementos internos do chat e pode ser visualizada em tempo real durante a configuração.

Cor do botão #

Também é possível definir uma cor específica para o botão do WebChat.

Dessa forma, as cores podem ser ajustadas para combinar com a identidade visual da empresa.

Estilo visual #

O WebChat oferece três opções de estilo:

Clássico;
Moderno;
Minimalista.

Selecione o estilo que melhor se adequar à identidade visual do seu site.

6. Perguntas #

Na opção Perguntas, é possível definir quais informações serão solicitadas ao visitante antes ou durante o atendimento.

É possível configurar o WebChat para solicitar:

Nome do visitante;
Número de WhatsApp do visitante.

Selecione as informações que deseja coletar dos usuários que iniciarem uma conversa pelo WebChat.

7. Salvando as configurações #

Após realizar todas as personalizações desejadas:

Salve as alterações;
Retorne para a aba Home;
Localize novamente a instância do WebChat;
Clique no ícone de Wi-Fi para continuar a configuração;
Informe novamente o site;
Aguarde a validação;
Clique em Próximo;
Informe que o WebChat já foi personalizado;
Clique novamente em Próximo.

8. Instalando o WebChat no site #

Após finalizar a personalização, será apresentada a etapa de Instalação.

Essa é uma das etapas mais importantes do processo, pois é nela que o código responsável por apresentar o WebChat no site será disponibilizado.

Copiando o script #

Localize o script de instalação apresentado pela SM Click;
Clique no botão disponível para copiar o script;
O código deverá ser inserido dentro do <body> do site.

O que é o `<body>` do site? #

O <body> corresponde à área do código HTML responsável pelo conteúdo apresentado na página do site.

Caso você não seja o responsável pelo desenvolvimento ou manutenção do site, recomendamos encaminhar o script ao desenvolvedor responsável.

Você pode solicitar:

“Preciso que você insira este script dentro do body do meu site.”

O responsável pelo desenvolvimento poderá realizar a instalação do código no local correto.

9. Verificando a instalação #

Após o desenvolvedor inserir o script no site:

Acesse o site;
Atualize a página;
Verifique se o botão do WebChat da SM Click está sendo apresentado.

Após a instalação correta do script, o WebChat deverá aparecer no site.

⚠️ Importante: status “Conectado” não significa que o WebChat já está funcionando

Após finalizar a configuração na SM Click, a instância poderá apresentar o status Conectado.

Entretanto, isso não significa necessariamente que o WebChat já esteja disponível no site.

O funcionamento efetivo depende da instalação do script dentro do <body> do site.

Somente após o script ser inserido corretamente é que o botão do WebChat será apresentado e poderá ser utilizado pelos visitantes.

10. Resumo do processo #

De forma resumida, o processo de configuração consiste em:

1. Contratar o módulo WebChat
↓
2. Acessar a aba Home
↓
3. Criar uma Nova Instância
↓
4. Selecionar WebChat
↓
5. Informar o nome da instância
↓
6. Informar e validar o site
↓
7. Personalizar o WebChat
↓
8. Configurar Layout, Identidade, Aparência e Perguntas
↓
9. Salvar as configurações
↓
10. Acessar novamente a conexão da instância
↓
11. Copiar o script de instalação
↓
12. Inserir o script no <body> do site
↓
13. Atualizar o site
↓
14. Verificar a exibição do botão do WebChat

Precisa de ajuda? #

Caso encontre alguma dificuldade durante a conexão, personalização ou instalação do WebChat, entre em contato com o suporte da SM Click.

Nossa equipe estará à disposição para auxiliar durante o processo.