Widget de Stories - Documentação

📱 Widget Flutuante de Stories

O widget de stories é um botão flutuante que exibe um GIF animado do primeiro vídeo do grupo de stories. Quando clicado, abre o viewer completo de stories.

🚀 Como Implementar

Método 1: Script com atributos (Recomendado)

<script
  src="https://seu-dominio.com/button-widget-bundle.js"
  data-tenant-id="1"
  data-storie-group-id="1"
  data-permalink="https://exemplo.com/produto"
  async
></script>

Método 2: JavaScript manual

<script src="https://seu-dominio.com/button-widget-bundle.js"></script>
<script>
  VidiooStoriesWidget.init({
    tenantId: '1',
    storieGroupId: '1',
    permalink: 'https://exemplo.com/produto'
  });
</script>

⚙️ Parâmetros

Parâmetro	Tipo	Obrigatório	Descrição
tenantId	string	✅ Sim	ID da loja/cliente
storieGroupId	string	✅ Sim	ID do grupo de stories
permalink	string	✅ Sim	URL do produto (para contexto)

✨ Funcionalidades

🎬 GIF Animado

Exibe automaticamente um GIF do primeiro vídeo do grupo de stories

🎯 Botão Flutuante

Posicionado no canto inferior direito, sempre visível

📱 Viewer Completo

Abre o viewer de stories em popup ou nova aba

🎨 Design Responsivo

Adapta-se a diferentes tamanhos de tela

🧪 Exemplo de Teste

Teste Ativo na Home

O widget está sendo testado na página inicial com os seguintes parâmetros:

• tenantId: 2
• storieGroupId: 2
• permalink: https://new.sizebay.com/pt/products/renner-camiseta-alongada-em-algodao-com-estampa-barzinho-off-white-8b07b8

Resultado esperado: Botão flutuante no canto inferior direito com GIF do primeiro vídeo.

🔗 URLs da API

Bundle do Widget

GET /button-widget-bundle.js

GIF do Stories

GET /api/stories-gif?tenantId=1&storieGroupId=1

Viewer de Stories

GET /stories-viewer?tenantId=1&storieGroupId=1&mockupVideoUrl=...

🆔 Script de Gerenciamento de SIDs

Script que configura automaticamente o gerenciamento de SIDs (Session IDs) para otimizar o sistema e criar identificadores únicos para cada sessão do usuário.

🚀 Como Implementar

Método 1: Carregamento Automático

<script src="https://seu-dominio.com/sid-manager-bundle.js"></script>
<script>
  // O script será executado automaticamente
  console.log('✅ Gerenciador SID carregado com sucesso');
</script>

Método 2: Configuração Manual (Opcional)

<script src="https://seu-dominio.com/sid-manager-bundle.js"></script>
<script>
  // O script já configura tudo automaticamente
  // Nenhuma configuração adicional necessária
  console.log('SID Manager ativo');
</script>

🔧 Características

✅ Automático

Configuração automática sem necessidade de código adicional

🚀 Otimizado

Cria SIDs únicos e evita duplicações no sistema

🔒 Seguro

Gerencia sessões de forma segura e eficiente

📱 Compatível

Funciona em todos os navegadores modernos

💡 Uso Simples e Direto

Basta adicionar o script na sua página e ele funcionará automaticamente:

<!-- Adicione antes dos outros scripts de widget -->
<script src="/sid-manager-bundle.js"></script>

<!-- Em seguida, adicione seus widgets normalmente -->
<script src="/button-widget-bundle.js" 
        data-tenant-id="1" 
        data-permalink="https://..."></script>

🔗 API Utilizada

Bundle do Script

GET /sid-manager-bundle.js

Script JavaScript estático para gerenciamento automático de SIDs