Instalando o widget de Whatsapp no seu construtor de sites preferido
Como integrar o widget de WhatsApp da Jivo ao seu site
Para novos clientes que desejam integrar o WhatsApp ao seu site para facilitar a comunicação com visitantes, temos a solução para você.
Com o Widget de WhatsApp da Jivo, seus clientes poderão conversar diretamente com sua equipe através de um botão prático visível no site — tudo em poucos minutos.
📘 Sumário
- Instalando o widget de WhatsApp na Wix
- Instalando o widget de WhatsApp na Nuvemshop
- Instalando o widget de WhatsApp na Shopify
- Instalando o widget de WhatsApp na Loja Integrada
- Instalando o widget de WhatsApp na Tray
- Instalando o widget de WhatsApp no WordPress
- Instalando o widget de WhatsApp em um site HTML
1. Instalando o widget de WhatsApp na Wix
A Wix é uma das plataformas mais populares para criação de sites e lojas virtuais, e a integração do widget da Jivo pode ser feita facilmente adicionando um pequeno código HTML no editor do site.
Siga o passo a passo abaixo para realizar a instalação corretamente.
Passo 1 — Gerar o código do widget
-
Acesse o site da JivoChat em:
👉 https://www.jivochat.com/whatsapp-widget/ -
Preencha os campos com:
- Seu número de WhatsApp no formato internacional (ex: +55 11 99999-9999);
- Seu e-mail de contato.
-
Personalize o texto do botão e a cor do widget conforme desejar.
-
Clique em Create button for free.
-
Copie o código de instalação gerado ao final do processo — você precisará dele no próximo passo.
Passo 2 — Inserir o código no editor da Wix
-
Acesse o painel da sua conta Wix.
-
No menu lateral esquerdo, clique em Editar Site para abrir o editor.
-
No topo do editor, clique em Configurações e depois em Rastreamamento e Análises (Tracking & Analytics).
-
Clique em Nova Ferramenta → Código Personalizado.
-
Cole o código do widget da Jivo que você copiou anteriormente.
-
Em Colocar código em, selecione:
- Todas as páginas, e
- Colocar no head (ou antes da tag
</head>).
-
Clique em Aplicar e Publicar o site para salvar as alterações.
Passo 3 — Verifique se o widget aparece no site
- Acesse seu site publicado em uma nova aba do navegador.
- O botão do WhatsApp da Jivo deverá aparecer na posição escolhida durante a criação.
- Clique nele para confirmar se a conversa é iniciada corretamente no WhatsApp.
Passo 4 — Configure e gerencie pelo painel da JivoChat
-
Faça login na sua conta JivoChat: https://app.jivosite.com/
-
No painel, você poderá:
- Editar as configurações do canal de WhatsApp;
- Alterar o design e o texto do widget;
- Acompanhar estatísticas de uso e conversas.
Possíveis problemas
- O widget não aparece: verifique se o código foi inserido corretamente e publicado.
- O botão aparece, mas não abre o WhatsApp: confirme se o número está no formato internacional (ex: +55).
- Mudanças não aparecem: limpe o cache do navegador e recarregue o site.
2. Instalando o widget de WhatsApp na Nuvemshop
A Nuvemshop é uma das plataformas de e-commerce mais utilizadas no Brasil e na América Latina, permitindo personalizar sua loja virtual com facilidade.
Adicionar o widget de WhatsApp da Jivo nela é simples e pode ser feito diretamente pelo painel de administração da loja, colando o código HTML no campo de scripts do site.
Passo 1 — Gerar o código do widget
- Acesse o site oficial da JivoChat:
👉 https://www.jivochat.com/whatsapp-widget/ - Insira seu número de WhatsApp (no formato internacional, ex: +55 11 99999-9999) e o seu e-mail.
- Personalize o texto do convite e a cor do botão conforme desejar.
- Clique em Create button for free.
- Copie o código de instalação gerado — você irá utilizá-lo dentro da Nuvemshop.
Passo 2 — Acesse o painel da sua loja Nuvemshop
- Entre no painel da sua loja Nuvemshop:
👉 https://www.nuvemshop.com.br/ - Faça login com sua conta.
- No menu lateral, clique em Loja Online → Layout → Editar código.
- No editor, encontre o arquivo "header.tpl" (dependendo do tema da sua loja).
- Cole o código do widget de WhatsApp da Jivo logo antes da tag de fechamento
</head>. - Clique em Salvar alterações.
Passo 3 — Publicar e verificar se o widget aparece
- Após salvar, publique novamente sua loja (caso a plataforma peça confirmação).
- Abra o site em uma nova aba e confira se o botão de WhatsApp da Jivo aparece na posição escolhida.
- Clique no botão para testar — ele deve abrir automaticamente uma conversa no seu número de WhatsApp configurado.
Passo 4 — Gerencie e edite o canal pelo painel da JivoChat
-
Faça login na sua conta JivoChat: https://app.jivosite.com/
-
No painel, acesse o canal de WhatsApp criado automaticamente.
-
Lá você pode:
- Alterar o nome e a cor do canal;
- Ajustar o design do botão;
- Copiar novamente o código, se necessário;
- Acompanhar mensagens e estatísticas de atendimentos.
Possíveis problemas
- O widget não aparece: verifique se o código foi inserido corretamente e publicado.
- O botão aparece, mas não abre o WhatsApp: confirme se o número está no formato internacional (ex: +55).
- Mudanças não aparecem: limpe o cache do navegador e recarregue o site.
3. Instalando o widget de WhatsApp na Shopify
A Shopify é uma das plataformas de e-commerce mais usadas no mundo e permite adicionar códigos personalizados de forma simples, diretamente no editor de temas.
Com o widget de WhatsApp da Jivo, seus clientes poderão iniciar conversas diretamente a partir do seu site, tornando o atendimento mais rápido e prático.
Passo 1 — Gerar o código do widget
- Acesse o site oficial da JivoChat:
👉 https://www.jivochat.com/whatsapp-widget/ - Insira seu número de WhatsApp (no formato internacional, ex: +55 11 99999-9999) e o seu e-mail.
- Configure a mensagem inicial e personalize a aparência do botão conforme desejar.
- Clique em Create button for free.
- Copie o código de instalação gerado — ele será colado dentro do editor da Shopify.
Passo 2 — Acesse o painel da sua loja Shopify
- Entre no painel da Shopify:
👉 https://www.shopify.com/ - Faça login na sua conta.
- No menu lateral, clique em Loja virtual → Temas.
- Ao lado do tema publicado, clique em Ações → Editar código.
- No editor de arquivos, localize o arquivo theme.liquid (geralmente dentro da pasta Layout).
- Dentro do código, cole o código do widget da Jivo logo acima da tag de fechamento
</head>. - Clique em Save (Salvar) para aplicar as alterações.
Passo 3 — Testar o widget no site
- Após salvar, abra sua loja em uma nova aba do navegador.
- Aguarde o carregamento completo da página e verifique se o botão de WhatsApp da Jivo aparece no canto do site (conforme a posição escolhida).
- Clique no botão e confirme se o WhatsApp é aberto corretamente no número configurado.
Passo 4 — Gerencie o canal de WhatsApp na JivoChat
-
Acesse sua conta da JivoChat: https://app.jivosite.com/
-
Vá até o menu de Canais e selecione o canal de WhatsApp criado automaticamente.
-
Dentro dele, você pode:
- Editar o nome e o design do botão;
- Acompanhar mensagens recebidas e métricas;
- Alterar ou copiar novamente o código de instalação;
- Integrar com outros canais da Jivo para centralizar seu atendimento.
Possíveis problemas
- O widget não aparece: verifique se o código foi colado antes da tag
</head>e se o tema salvo é o que está publicado. - O botão não abre o WhatsApp: confirme se o número inserido está no formato internacional correto (+55 para Brasil).
- Mudanças não aparecem: limpe o cache do navegador e atualize a página.
4. Instalando o widget de WhatsApp na Loja Integrada
A Loja Integrada é uma das plataformas de e-commerce mais populares do Brasil e permite inserir scripts personalizados diretamente no painel da loja.
Com o widget de WhatsApp da Jivo, seus visitantes poderão iniciar conversas instantaneamente com você e sua equipe — tudo isso em poucos minutos!
Passo 1 — Gerar o código do widget
- Acesse o site oficial da JivoChat:
👉 https://www.jivochat.com/whatsapp-widget/ - Insira o seu número de WhatsApp (no formato internacional, ex: +55 11 99999-9999) e o seu e-mail.
- Personalize o texto do convite, a posição e o tema (cor) do botão.
- Clique em Create button for free.
- Copie o código de instalação gerado — você precisará dele no próximo passo.
Passo 2 — Acessar o painel da Loja Integrada
-
Entre no painel da sua conta da Loja Integrada:
👉 https://www.lojaintegrada.com.br/ -
Vá até o menu lateral e clique em Personalize sua Loja → Incluir código HTML.
-
Localize a seção Inserir códigos nas páginas da loja.
-
No campo Cabeçalho da loja (header), cole o código do widget de WhatsApp da Jivo.
💡 Dica: sempre insira o código antes da tag
</header>para garantir que ele seja carregado corretamente. -
Clique em Salvar alterações.
Passo 3 — Testar o widget no seu site
- Após salvar, acesse sua loja em uma nova aba do navegador.
- Verifique se o botão de WhatsApp aparece no canto selecionado (por exemplo, canto inferior direito).
- Clique no botão e confirme se o WhatsApp é aberto corretamente com o número informado.
- Caso o botão não apareça imediatamente, limpe o cache do navegador e recarregue a página.
Passo 4 — Verifique o canal de WhatsApp na JivoChat
-
Acesse o painel da JivoChat: https://app.jivosite.com/
-
Vá em Canais → WhatsApp.
-
Você verá o canal criado automaticamente após a configuração.
-
Dentro dele, é possível:
- Alterar o nome e design do botão;
- Acompanhar conversas e métricas;
- Copiar novamente o código de instalação, se necessário;
- Integrar com outros canais da Jivo.
Possíveis problemas
- O botão não aparece: confirme se o código foi colado no campo "Cabeçalho da loja (header)" e salvo corretamente.
- O WhatsApp não abre: verifique se o número está no formato internacional (+55 para Brasil, por exemplo).
- Mudanças de cor ou posição não são exibidas: limpe o cache e recarregue a loja.
6. Instalando o widget de WhatsApp na Tray
A Tray é uma das plataformas mais completas para criação de lojas virtuais no Brasil, e permite personalizar facilmente o código do seu site.
Neste guia, você aprenderá como instalar o widget de WhatsApp da Jivo na sua loja Tray, de forma simples e rápida.
Passo 1 — Gerar o código do widget
- Acesse o site oficial da JivoChat:
👉 https://www.jivochat.com/whatsapp-widget/ - Insira o seu número de WhatsApp (no formato internacional, ex: +55 11 99999-9999) e o seu e-mail.
- Personalize o texto do convite, a posição e o tema (cor) do botão.
- Clique em Create button for free.
- Copie o código de instalação gerado — você precisará dele no próximo passo.
Passo 2 — Acessar o painel da Tray
Para instalar o código do JivoChat no seu site da Tray de forma manual, siga os passos mostrados no abaixo:
1.Ingresse no seu painel da Tray através do link:https://lp.tray.com.br/login → na aba "Minha Loja" → clique em "Editar Layout" → Em seguida, clique em "Editar HTML".
- Clique na opção "elements" → e em seguida clique em "header.html".
- Cole o script de instalação antes da tag de fechamento "/header" -> Em seguida, clique em "Salvar" -> e "Publicar".
Passo 3 — Verifique o funcionamento no site
- Abra sua loja Tray em uma nova aba ou dispositivo.
- Verifique se o botão do WhatsApp aparece na posição escolhida.
- Clique sobre o botão e confirme se o chat é aberto corretamente no aplicativo ou no WhatsApp Web.
- Envie uma mensagem teste para garantir que o canal está ativo.
Passo 4 — Verifique o canal de WhatsApp na JivoChat
-
Acesse o painel da JivoChat: https://app.jivosite.com/
-
Vá em Canais → WhatsApp.
-
Você verá o canal criado automaticamente após a configuração.
-
Dentro dele, é possível:
- Alterar o nome e design do botão;
- Acompanhar conversas e métricas;
- Copiar novamente o código de instalação, se necessário;
- Integrar com outros canais da Jivo.
Possíveis problemas
- O widget não aparece no site: verifique se o código foi colado e salvo corretamente.
- O botão aparece mas não abre o WhatsApp: confira se o número está no formato internacional correto (+55 para Brasil, por exemplo).
- Mudanças de cor ou posição não aparecem: limpe o cache do navegador e atualize a página.
✅ Instalação concluída!
Parabéns! 🎉
O Widget de WhatsApp da Jivo está agora visível e funcionando no seu site.
Aproveite para atender seus clientes com mais agilidade e aumentar suas vendas diretamente pelo WhatsApp.
Boas conversas e boas vendas! 💬💚
