Configure a Widde na sua loja Vtex, em menos de 5 minutos!
➡️ Passo a passo para VTEX IO
➡️ Passo a passo para VTEX IO
IMPORTANTE: Para essa instalação é necessário o responsável (Dev) com acesso ao código.
➡️ 1. Para instalar na Widde diretamente no código da VTEX IO é simples: basta adicionar o script da Widde em todas as páginas.
Script da Widde
<script type="text/javascript" id="" async src="https://cdn.widde.io/widde.1.1.0.js?v=1.0"></script>
Exemplo: adicionando a Widde via head
Adicione o script da Widde no arquivo head.html que fica dentro da pasta pixel!
Você pode encontrar outros scripts nesse arquivo, lembre de adicionar o script da Widde abaixo deles!
🎉 Pronto, publique a atualização com o script da Widde!
➡️ 2. Nos chame no Whatsapp para finalizarmos
Clique no botão abaixo e mande uma mensagem por WhatsApp informando:
link do site da sua loja
plataforma de e-commerce que utiliza
seu e-mail para cadastro
Assim, logo você receberá seu acesso para a Widde.
➡️ Passo a passo para VTEX (versão mais antiga)
➡️ Passo a passo para VTEX (versão mais antiga)
Existem duas formas de instalar a Widde nessa versão da VTEX. Recomendamos a Opção 1, direto pelo CMS da plataforma. Se preferir usar o Google Tag Manager, siga a Opção 2.
✅ Opção 1 (recomendada): instalação do script Widde via VTEX CMS (Legado)
No Admin VTEX, acesse Storefront → Layout e clique na pasta CMS.
Abra HTML Templates → Subtemplates.
Localize o subtemplate que contém o <head> do site. O nome varia de loja para loja: costuma ser algo como head, head-scripts, common-head ou estar dentro do Header. Se tiver dúvida, abra os candidatos e confira: é o que tem as tags <meta>, os <link rel="stylesheet"> e os outros scripts de terceiros (GTM, Analytics, etc.).
Cole o script abaixo imediatamente antes do fechamento </head> (ou no final do subtemplate, se ele não incluir a tag de fechamento):
<script type="text/javascript" async src="https://cdn.widde.io/widde.1.1.0.js?v=1.0"></script>
Clique em Salvar.
Aguarde alguns minutos (o CMS tem cache) e valide abrindo uma página de produto da loja: Ctrl + U para ver o código-fonte e buscar por widde, ou aba Network do DevTools filtrando por widde.1.1.0.js e conferindo se retorna 200.
⚠️ Observação importante: o script precisa ser instalado em um subtemplate compartilhado, e não diretamente no template de uma página específica. Cada diretório da VTEX (Home, Departamento, Produto...) pode usar um template diferente: se o script for colado só no template da Home, a Widde não vai carregar nas páginas de produto, que é exatamente onde ela precisa funcionar. Instalando no subtemplate de head, ele passa a valer para todos os templates que o referenciam.
➡️ Depois de instalar, nos chame no WhatsApp para finalizarmos
Clique no botão abaixo e mande uma mensagem por WhatsApp informando:
link do site da sua loja
plataforma de e-commerce que utiliza
seu e-mail para cadastro
➡️ Opção 2: instalação via Google Tag Manager
Abaixo, estão as instruções de configuração para lojas VTEX via Google Tag Manager. (Se tiver dúvidas sobre o GTM, pule para o item 5).
▶️ Se preferir ver por vídeo, clique aqui
➡️ 1. Verifique seu Google Tag Manager
Se não tem certeza da instalação do GTM no seu e-commerce, clique em “Visualizar”:
Adicione a URL de seu e-commerce e clique em “Connect”
Se der certo, podemos ir para a próxima etapa!
Se não, entre em contato com o suporte da sua plataforma e-commerce para configurar o GTM corretamente no seu site e depois volte aqui.
➡️ 2. Crie a Tag da Widde
Vá em Tags, no Menu
Clique no botão Nova
Selecione o card Configuração de Tag
Vá até "Personalizar" na aba e selecione HTML Personalizado
E cole o seguinte HTML:
<script type="text/javascript" id="" async src="https://cdn.widde.io/widde.1.1.0.js?v=1.0"></script>
Depois, clique em “Acionamento”, selecione “All Pages”
Em “Nome da Tag” escreva “Widde” para sua identificação interna
➡️ 3. Publique a Tag
Selecione o checkbox da tag da Widde
Clique em Publicar > Enviar > Continuar
🎉 Pronto, a Tag está publicada com sucesso!
🚨 ATENÇÃO: Por padrão, o ID HTML é bloqueado na Vtex, o que bloqueia automaticamente todas as tags, variáveis e acionadores do tipo customScripts.
A principal consequência dessa lista de bloqueio é que as tags HTML personalizadas não serão acionadas. A lista negra de HTML é um padrão do aplicativo VTEX Google Tag Manager. Se você deseja desativar essa restrição, acesse o aplicativo do Google Tag Manager na Vtex e verifique a alternância abaixo. Esta opção deve estar habilitada ☑️.
➡️ 4. Nos chame no Whatsapp para finalizarmos
Clique no botão abaixo e mande uma mensagem por WhatsApp informando:
link do site da sua loja
plataforma de e-commerce que utiliza
seu e-mail para cadastro
Assim, logo você receberá seu acesso para a Widde.
ATENÇÃO: Verifique as dicas abaixo, caso tenha qualquer dúvida sobre o Google Tag Manager que está instalado no seu e-commerce.
➡️ 5. Extra: não tenho certeza sobre o Google Tag Manager
Não sei se tenho o Google Tag Manager instalado no site.
Em algumas situações, o lojista recebe a loja pronta já com o GTM instalado. Você pode verificar essa informação com o profissional que auxiliou na criação/gerenciamento da loja, ou para o suporte da sua plataforma.
Para acessar a plataforma do Google Tag Manager, clique aqui.
Como identificar qual Google Tag Manager está instalado no site?
Em muitos casos, o lojista acaba criando mais de uma conta no GTM, mas apenas uma delas estará configurada no site e você precisará ter esta informação para instalar a Widde no lugar correto. Verifique com o profissional que auxiliou na criação/gerenciamento da loja, ou com o suporte da sua plataforma.
Dentro do seu acesso do GTM, você encontra o código ID dele (este deverá ser o mesmo que está cadastrado na sua loja):
Não tenho Google Tag Manager - como instalar no site?
Verifique a página de Central de Ajuda da sua plataforma para obter o passo a passo.
Não quero instalar a Widde pelo Google Tag Manager. Tem outra alternativa?
Sim: use a Opção 1 desta página, a instalação do script direto no subtemplate de head pelo VTEX CMS.
Esse artigo te ajudou?
Avalie nos emojis abaixo. Ajude a entender como estamos nos saindo!