Widde Pro para e-commerce

01 Instalação

A Widde Pro é distribuída como um único script CDN baseado em Web Components. Cole-o uma vez no template da loja — todos os blocos passam a funcionar e a configuração visual fica no painel administrativo.

Snippet único

Insira a tag abaixo logo antes do fechamento da </body>, ou use a área de scripts globais da sua plataforma (VTEX, Shopify, Nuvemshop etc.).

<script type="text/javascript" async
        src="https://cdn.widde.io/widde.1.1.0.js?v=1.0"></script>
    

Modo debug · ambientes não-produção

Por padrão a Widde só carrega em domínios de produção, para não interferir em stagings. Para forçar o carregamento durante testes, adicione o parâmetro widde-local-debug à URL:

https://staging.minhaloja.com/?widde-local-debug
    

02 Blocos

Blocos são Web Components que você cola no HTML da loja para exibir vídeos. A configuração visual — cores, espaçamento, dimensões — fica toda no painel Widde: nada de tocar no código depois da instalação.

          <widde-pro-highlights></widde-pro-highlights>
        

          <widde-pro-products-highlights></widde-pro-products-highlights>
        

          <widde-pro-carousel></widde-pro-carousel>
        

          <widde-explorer></widde-explorer>
        

          <widde-explorer-preview></widde-explorer-preview>
        

          <widde-pro-products-highlights></widde-pro-products-highlights>
        

<h1>{{ product.name }}</h1>

<widde-pro-products-highlights></widde-pro-products-highlights>

<p>{{ product.description }}</p>

<div class="product-price">
  {{ product.price }}
</div>

<widde-pro-products-highlights></widde-pro-products-highlights>

<div class="product-highlights-section">
  <h2>Destaques</h2>

  <widde-pro-products-highlights></widde-pro-products-highlights>
</div>

03 Video Commerce · Formatos

A Widde disponibiliza quatro formatos de widget de vídeo que podem ser distribuídos pela loja. Cada formato tem um papel diferente — bolinha flutuante, fileira de destaques na home, miniaturas dentro da PDP e carrossel de coleções — e pode ser customizado visualmente pelo lojista.

04 Provador AI

A Widde também oferece o Provador AI — uma solução que permite ao cliente visualizar como a peça fica em seu próprio corpo antes da compra. O fluxo abre direto na página de produto, com upload de foto e geração da imagem com IA.

05 Live Commerce

Transmissões ao vivo dentro do e-commerce com chat em tempo real, cupons de desconto, destaque de produto sincronizado e contagem de espectadores. A live ocupa o banner principal da loja e se transforma em mini-player flutuante ao scroll.

Componentes da experiência

06 Explorar

Página completa cheia de vídeos no estilo explore do Instagram. Estimula a descoberta de produtos e funciona em duas variantes: um preview compacto embutido na home (ou em qualquer categoria) e a página dedicada com busca e abas de categoria.

Variantes

Componentes da experiência

07 Integrações

A Widde Pro conecta-se à loja em três pontos críticos: catálogo (preço/estoque), carrinho (adicionar produto a partir do vídeo) e analytics (atribuir vendas a quem assistiu e publicar as interações no Data Layer). Cada bloco abaixo detalha o contrato esperado.

08 Catálogo de Produto

A Widde precisa enxergar o seu catálogo para listar preços, estoques e variações nos vídeos. Nas plataformas suportadas, o conector é nativo — basta autorizar. Em sistemas próprios, você expõe um pequeno contrato REST/GraphQL que descrevemos abaixo.

Plataformas com conector nativo

Integração customizada

Loja headless ou plataforma sob medida? Implemente o contrato a seguir e nos envie a URL base. A Widde consome três operações: search, getById e o webhook onProductUpdate.

Modelo de produto

type ProductGateway = {
  title:        string;   
  mainImage:    string;   
  price:        number;   
  comparePrice: number;   
  handler:      string;   
  url:          string;   
  externalId:   string;   
};
  

Contrato do serviço

interface ProductService {
  
  search(term: string): Promise<ProductGateway[]>;

  
  getById(externalId: string): Promise<ProductGateway>;

  
  onProductUpdate(
    externalId: string,
    productData: ProductGateway
  ): Promise<ProductGateway>;
}
  

Checklist de homologação

• Endpoints expostos sob HTTPS, com latência mediana abaixo de 400 ms.
• Autenticação por Bearer token ou cabeçalho dedicado.
• Webhook onProductUpdate notificando alterações em tempo real.
• Imagens em URLs absolutas, públicas, sem expiração curta.
• Preços em formato consistente (sempre centavos OU sempre decimal).

09 Carrinho de Compras

Quando o cliente clica em "adicionar ao carrinho" dentro de um vídeo, a Widde chama a API do carrinho da própria loja, no browser do usuário. A sessão e os cookies já existentes carregam — nenhum dado pessoal passa pelos nossos servidores.

Contrato esperado

A loja precisa expor quatro operações acessíveis via JavaScript: ler o carrinho, adicionar item, remover item e consultar dados de produto. Os tipos abaixo descrevem o formato esperado.

interface ICartItem {
  readonly id: string;
  readonly name: string;
  readonly price: Price;
  quantity: number;
  readonly productId: string;
  readonly mainImage: string;
  readonly cartItemId?: string;
}

interface ICart extends DomainEntity {
  readonly total: Price;
  readonly totalItems: number;
  readonly items: ICartItem[];
}

interface ICartAddResult {
  success: boolean;
  refetch?: boolean;
  error?: { causes: string[]; };
}

namespace CartInputs {
  interface Add {
    product: Product;
    quantity: number;
    cartId?: string;
    variantSelecteds?: Array<string>;
  }
}
  

Endpoints REST

A nomenclatura é apenas uma sugestão — a única exigência é que sejam acessíveis pelo browser do cliente, autenticados via cookie de sessão e respondam JSON.

{
  "externalId": "prod_123",
  "variantId": "var_M",
  "quantity": 2,
  "properties": { "color": "Blue" }
}

{
  "success": true,
  "refetch": true
}

Códigos de status

Causas reconhecidas em error.causes

10 Google Analytics 4

A Widde marca cada sessão que viu vídeo — você ganha uma audiência customizada no GA4 pronta para campanhas e atribuição. Há dois modos: automático, sem nada para configurar; ou via Data Layer, quando você quer plugar nos seus dispatchers de GTM.

<script>
  window.widdeSendDatalayer = true;
</script>
      

{
  "event": "widde",
  "action": "story_view",
  "video_url": "https://app.widde.io/v/<storyId>",
  "page_url": "https://minhaloja.com/produto/abc",
  "widdeUid": "u_8f3a91c7"
}

Verificação e problemas comuns

11 Eventos no Data Layer

Os blocos da Widde rodam dentro de um Shadow DOM, que o rastreador de cliques da loja não consegue inspecionar. Para resolver isso, a própria Widde publica no dataLayer cada interação relevante (play no vídeo, adicionar à sacola, checkout, live, provador) já estruturada e com nomes padronizados, pronta para o seu GTM disparar para o GA4 ou qualquer outra ferramenta.

Duas flags diferentes

As duas são independentes e podem ser usadas juntas.

Ativação

A publicação vem desligada e a Widde não a liga sozinha: quem precisa adicionar a flag é a loja ou a agência, no código da página ou pelo GTM.

<script>
  window.widdeDataLayerEvents = true;
</script>
  

Onde e quando definir

O script da Widde carrega de forma assíncrona, depois do site. Por isso a flag não precisa vir antes da tag da Widde: o SDK só lê o valor da flag quando acontece uma interação, sem ficar monitorando a variável.

Formato do evento

Cada interação gera dois pushes. O primeiro limpa o objeto widde: o GTM mantém na memória os dados de pushes anteriores e, sem esse reset, uma propriedade de um evento poderia aparecer no seguinte. É a mesma prática que o Google recomenda para o objeto ecommerce.

dataLayer.push({ widde: null });

dataLayer.push({
  event: 'widde_cart_add_item',
  widde: {
    widde_product: 'cart',
    event_type: 'cart_add_item',
    device_type: 'mobile',
    timestamp: '2026-10-05T14:32:10.123Z',
    product_id: '98765',
    product_name: 'Tênis Running Pro',
    product_price: 499.9,
    product_quantity: 1,
    story_key: 'a1b2c3',
    collection_key: 'd4e5f6',
    format_type: 'Carousel'
  }
});

Configuração no GTM

Acionador

Para acionar um evento específico, use o nome exato, por exemplo widde_cart_add_item, sem regex.

Variáveis

Crie uma Variável da camada de dados (versão 2) para cada propriedade que for usar, sempre com o caminho widde.<propriedade>: por exemplo widde.product_id, widde.product_price e widde.widde_product.

Envio para o GA4

Numa tag Google Analytics: evento GA4, use {{Event}} como nome do evento (repassa o widde_… como está), adicione as variáveis widde.* como parâmetros e associe ao acionador acima.

Privacidade e consentimento

Nenhum evento carrega dados pessoais ou identificadores de usuário: nome, e-mail, telefone, foto, cookies, IDs de sessão e IDs de cliente do Google Analytics nunca são publicados. Interações que envolvem dados pessoais, como a captura de leads, também ficam de fora. A URL da página e o referrer não vão no evento: use as variáveis nativas do GTM (Page URL, Referrer).

Os eventos não são publicados quando o consentimento de análise é negado, ou seja, quando o último comando consent do Consent Mode do Google traz analytics_storage: 'denied'. Sem Consent Mode, a publicação segue normalmente e as tags do GTM continuam respeitando as regras de consentimento configuradas por você.

Eventos disponíveis

Todo evento traz widde_product, event_type, device_type e timestamp. A tabela de cada produto lista as propriedades adicionais; o significado de cada uma está no dicionário.

Dicionário de propriedades

Os nomes abaixo são estáveis. Novas propriedades podem ser adicionadas no futuro; as existentes não são renomeadas sem aviso.

Verificação e problemas comuns

12 Aplicativos

Estamos abrindo a Widde Pro para integrações de terceiros via app store. Conectores de e-mail marketing, CRM, suporte, fidelidade e ferramentas de atribuição vão poder se plugar diretamente nas coleções de vídeo.

Quer ser parceiro fundador? Escreva para contato@widde.io.

13 Plataformas suportadas

Conector nativo para as principais plataformas do mercado brasileiro e internacional. Em todas elas, a instalação é plug-and-play: autorize, cole o script e configure os blocos no painel.

14 Suporte

Time técnico dedicado a parceiros e lojistas. Resposta em até um dia útil para dúvidas de implementação.