--- title: Conectar Webchat à SM Click description: "[Como configurar seu Webchat na SM Click](https://www.youtube.com/embed/Xbv2NvgAFaA?feature=oembed) # 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…" url: "https://docs.smclick.com.br/docs/conectar-webchat-a-sm-click/" updated: "2026-09-14" category: Atendimentos --- # Conectar Webchat à SM Click [Como configurar seu Webchat na SM Click](https://www.youtube.com/embed/Xbv2NvgAFaA?feature=oembed) # 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: 1. Acesse a SM Click utilizando um perfil de **Gestor**; 2. No menu principal, acesse a aba **Home**; 3. No canto direito da tela, clique em **Nova Instância**; 4. Selecione a opção **WebChat**; 5. Informe um nome para identificar a instância. **Exemplo:** `WebChat Gabriel` 1. 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: 1. Localize a instância do WebChat; 2. Clique no **ícone de Wi-Fi**, localizado ao lado da instância; 3. Informe o site em que o WebChat será utilizado; 4. Aguarde a validação do endereço informado. Se o site for validado corretamente, será apresentado um indicador de validação positiva. 1. 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: 1. Salve as alterações; 2. Retorne para a aba **Home**; 3. Localize novamente a instância do WebChat; 4. Clique no **ícone de Wi-Fi** para continuar a configuração; 5. Informe novamente o site; 6. Aguarde a validação; 7. Clique em **Próximo**; 8. Informe que o WebChat já foi personalizado; 9. 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 1. Localize o script de instalação apresentado pela SM Click; 2. Clique no botão disponível para **copiar o script**; 3. O código deverá ser inserido dentro do `` do site. --- ## O que é o `` do site? O `` 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: 1. Acesse o site; 2. Atualize a página; 3. 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 `` 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 `` 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.