Você pode incluir o suporte de contato do WhatsApp em seu site com o widget ElementsKit WhatsApp. Basta arrastar e soltar o widget no editor de design Elementor e obter botão WhatsApp no site perfeitamente.

O WhatsApp é uma das opções de mensagens seguras mais populares da atualidade. As pessoas preferem isso como mídia de mensagens instantâneas. Portanto, este widget é útil para ouvir dúvidas, interesses e solicitações imediatas dos clientes.

Leia esta documentação para aprender como usar o widget de botão Elementor WhatsApp do ElementsKit.

Etapa 1: Obtenha o botão Elementor WhatsApp no site - ElementsKit #

Para obter o botão WhatsApp em seu site, primeiro habilite o widget ElementsKit WhatsApp, depois abra o editor Elementor e arraste e solte o widget na área de design.

Habilite o widget do WhatsApp: #

Para ativar o widget:

1. Navegar para ElementsKit > Widgets.
2. Encontre o código do cupom e ativar o widget.
3. Clique em SALVAR ALTERAÇÕES.

Arraste e solte o widget: #

Depois disso, arraste e solte o widget ElementsKit Content Ticker na área de design do editor Elementor.

Passo 2: Configurar o widget do WhatsApp #

Você pode configurar o cabeçalho, corpo, rodapé, botão e configurações do widget ElementsKit WhatsApp.

Cabeçalho #

1. Escolha a foto do perfil: Você pode adicionar uma foto de perfil na caixa de bate-papo do WhatsApp. Carregue uma foto ou escolha uma na biblioteca de mídia do WordPress.
2. Nome de usuário: Digite seu nome no campo de nome de usuário.
3. Texto do usuário: Você pode inserir um texto curto que aparece abaixo do nome de usuário.
4. Ativar ponto ativo: Mostre seu status ativo ativando o ponto ativo.

5. Habilitar tempo ativo personalizado(Disponível quando Active Dot está ativado): Você pode mostrar o status ativo em um determinado horário do dia ativando esse recurso. Quando ativado, as seguintes opções estarão disponíveis:
   • Hora de início: Defina um horário do dia em que você estará online.
   • Fim do tempo: Defina um horário do dia em que você não estará mais disponível online.
   • Escolha Feriados: Escolha os dias de folga.
   • Digite a mensagem de férias: Você pode definir uma mensagem para os clientes quando estiver de férias.

Corpo #

1. Habilitar carregador: Quando ativado, uma animação de digitação aparecerá na tela do usuário enquanto você digita.
2. Mostrar nome de usuário: Você pode mostrar o nome de usuário com a mensagem se ativar esta opção.
3. Perguntando texto: Este texto aparecerá por padrão quando um usuário clicar no botão WhatsApp.

Rodapé #

O widget ElementsKit WhatsApp vem com três estilos diferentes para a seção de rodapé.

Estilo: Entrada

Um campo de chat simples onde os usuários podem escrever uma mensagem e enviá-la.

1. Escolha o estilo: Selecione o estilo “Entrada".
2. Espaço reservado de entrada: Insira um texto de espaço reservado.
3. Opção de link aberto: Quando o usuário clicar no botão enviar, selecione para onde será redirecionado. Existem três opções disponíveis: 1. Mesma página, 2. Nova guia e 3. Pop-up.

Estilo: Botão

Neste estilo, um botão aparecerá. Ao clicar no botão os usuários podem enviar mensagens através do WhatsApp web.

1. Escolha o estilo: Selecione o estilo “Botão".
2. Ícone: Você pode adicionar um ícone no botão de mensagem. Carregue um ícone como SVG ou escolha um da biblioteca de ícones Elementor.
3. Texto: Insira um texto de botão.
4. Opção de link aberto: Quando o usuário clica no botão enviar, os usuários podem ser redirecionados para um dos seguintes: 1. Mesma página, 2. Nova guia e 3. Pop-up.

Estilo: entrada interna

Um campo de bate-papo simples, mas o campo fica dobrado dentro da janela do WhatsApp.

1. Escolha o estilo: Selecione o estilo “Entrada Interna“.
2. Espaço reservado de entrada: Insira um texto de espaço reservado.
3. Opção de link aberto: Quando o usuário clicar no botão enviar, selecione para onde será redirecionado. Existem três opções disponíveis: 1. Mesma página, 2. Nova guia e 3. Pop-up.

Botão #

1. Escolha o estilo: Selecione o estilo do botão entre as opções fornecidas.
2. Ícone: Você pode adicionar um ícone para o botão Elementor WhatsApp (se o estilo escolhido tiver uma opção de ícone disponível).
3. Texto: Adicione um texto no botão (se o estilo escolhido tiver uma opção de ícone disponível).

4. Desativar posição fixa: Quando desligado, a posição do botão será fixa. Caso contrário, você poderá alterar a posição do botão.
5. Posição (personalizado): Você pode alterar a posição do botão se a posição fixa estiver desabilitada.

Configurações #

1. Número do WhatsApp: Aqui você pode colocar seu número de contato de atendimento do WhatsApp. Este é o número para o qual você configurou o widget do WhatsApp para os usuários.
2. Mostrar desde o início: Se você definir Mostrar então a caixa de bate-papo aparecerá desde o início que um visitante visitar seu site. E se você definir Esconder então eles verão apenas o ícone e terão que clicar nele para iniciar um bate-papo.

Etapa 3: personalizar o botão Elementor WhatsApp #

Você pode alterar o estilo e a aparência do botão do WhatsApp e da caixa de bate-papo com o ElementsKit.

Botão pegajoso #

1. Largura do botão: Você pode ajustar a largura do botão de contato do WhatsApp.
2. Altura do botão: Você também pode ajustar a altura do botão de contato do WhatsApp.
3. Raio da borda: Altere a forma do botão usando border-radius.
4. Fundo do botão: Escolha uma cor para o botão do WhatsApp.
5. Preenchimento: Ajuste o preenchimento do botão.

6. Cor do ícone: Escolha uma cor para o ícone do WhatsApp com o botão.
7. Fundo do ícone: Escolha uma cor de fundo para o ícone.
8. Tamanho do ícone: Ajuste o tamanho do ícone.
9. Preenchimento de ícone: Você pode ajustar o preenchimento do ícone do botão.

10. Cor do texto: Selecione uma cor para o texto do botão.
11. Tipografia: Defina a tipografia do texto do botão.
12. Espaço entre: Ajuste o espaço entre o texto do botão e o ícone.

Cabeçalho #

1. Plano de fundo do cabeçalho: Escolha uma cor para o fundo do cabeçalho da caixa de bate-papo do WhatsApp.
2. Estilo de imagem do usuário – tipo de borda, largura e cor: Você pode selecionar um tipo de borda para a imagem do usuário, definir a largura da borda e escolher uma cor de borda.

3. Cor do nome de usuário: Escolha uma cor para o nome de usuário no cabeçalho.
4. Cor do texto do usuário: Escolha uma cor para o texto abaixo do nome de usuário.
5. Tipografia do usuário: Defina a tipografia do nome de usuário no cabeçalho.
6. Tipografia de texto do usuário: Defina a tipografia do texto sob o nome de usuário.

7. Ponto Ativo/Inativo – Tamanho: Ajuste o tamanho do ponto ativo/inativo.
8. Ponto Ativo/Inativo – Cor da Borda: Escolha uma cor de borda para o ponto ativo/inativo.
9. Ícone Fechar – Cor: Defina uma cor para o ícone de fechamento da caixa de bate-papo.
10. Ícone Fechar – Cor do mouse: Escolha uma cor para o ícone de fechamento da caixa de bate-papo quando passar o mouse.

Corpo #

1. Cor do tema: Escolha uma cor para a seção do corpo.
2. Perguntando a cor do texto: Selecione uma cor de texto para a mensagem.
3. Perguntando tipografia de texto: Defina a tipografia do texto da mensagem.

Rodapé #

1. Cor do espaço reservado de entrada: Escolha uma cor para o texto do espaço reservado do campo de entrada.
2. Tipografia de espaço reservado de entrada: Defina a tipografia para o texto do espaço reservado do campo de entrada.

Wrapper de conteúdo #

Nesta seção, você pode ajustar o largura da caixa de bate-papo do WhatsApp.

Assim como o widget do WhatsApp, o ElementsKit vem com centenas de elementos avançados para Elementor. Obtenha o ElementsKit e use esses elementos para construir sites WordPress repletos de recursos.