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). 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 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 [email protected].

12 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.

13 Suporte

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