Ferramentas Embarcáveis (SDK de Marketing)

Adicione social proof, timers, barras de anúncio, modais de desconto e mais em qualquer frontend — com uma única linha de código.

Início Rápido

Cole este snippet antes do </body> do seu site:

<script
  src="https://storefront.acessocomercial.com/tools/loader.js"
  data-hostname="minha-loja"
  async
></script>

Substitua "minha-loja" pelo hostname da sua loja no painel. Pronto — as ferramentas configuradas no painel serão automaticamente aplicadas ao seu site.

Como funciona

O sistema usa uma arquitetura de dois arquivos para performance máxima:

Fluxo de carregamento

1. O loader.js lê o data-hostname do script tag
2. Busca a configuração das ferramentas da API: GET /api/storefront/tools/{hostname}
3. Armazena em cache no localStorage por 5 minutos (navegação instantânea entre páginas)
4. Se existem ferramentas ativas, carrega o tools.js dinamicamente
5. Cada widget se auto-inicializa dentro de Shadow DOM (sem conflito de CSS)

Ferramentas disponíveis

Todas configuráveis pelo painel administrativo. Ativam automaticamente quando configuradas.

Data Attributes para Produtos

Ferramentas que atuam em produtos individuais precisam saber qual produto está sendo exibido. Adicione estes atributos nos elementos que representam cards de produto:

<div class="product-card"
  data-ac-product-id="abc123"
  data-ac-price="14900"
  data-ac-quantity="5"
>
  <!-- conteúdo do card -->
</div>

Data Layer (Eventos)

O SDK implementa uma fila de eventos no padrão GTM. Você pode enviar eventos antes ou depois do SDK carregar:

// Inicializa a fila (pode ser feito antes do script carregar)
window.acDataLayer = window.acDataLayer || [];

// Evento de visualização de página
window.acDataLayer.push({
  event: "page_view",
  page: "product",
  productId: "abc123"
});

// Evento de adição ao carrinho (ativa o Funil/Upsell)
window.acDataLayer.push({
  event: "add_to_cart",
  productId: "abc123",
  productName: "Camiseta Premium",
  quantity: 1
});

Eventos suportados

API Global

Após o carregamento, o SDK expõe um objeto global para controle programático:

// Acessar configuração carregada
console.log(window.AcessoComercial.config);

// Enviar evento via API global
window.AcessoComercial.push({
  event: "add_to_cart",
  productId: "abc123"
});

// Destruir todos os widgets (SPA cleanup)
window.AcessoComercial.destroy();

Endpoint de Configuração

O loader busca a configuração das ferramentas do seguinte endpoint REST:

Exemplo de resposta

{
  "hostname": "minha-loja",
  "tools": {
    "adBar": { "messages": ["Frete grátis acima de R$99!", "10% OFF no PIX"] },
    "timers": [{
      "endDate": "2026-07-01T00:00:00.000Z",
      "variant": "danger",
      "targets": [{ "type": "product", "productId": "abc123" }]
    }],
    "indicators": [{
      "text": "Novo",
      "variant": "success",
      "productIds": ["abc123", "def456"]
    }],
    "lastUnitsRule": {
      "active": true,
      "maximumUnits": 5,
      "variant": "danger",
      "productIds": []
    },
    "cashDiscounts": [{
      "discountPercentage": 10,
      "productIds": []
    }],
    "discountModals": [],
    "socialProofRule": {
      "active": true,
      "showViews": true,
      "showAddToCart": true,
      "showOrders": true
    },
    "sessionReplay": { "enabled": true, "sampleRate": 100 }
  },
  "theme": null
}

Desenvolvimento Local

Em desenvolvimento, aponte o script para o servidor local:

<script
  src="http://localhost:8082/api/storefront/tools/loader.js"
  data-hostname="demo"
  async
></script>

Isolamento CSS (Shadow DOM)

Todos os widgets são renderizados dentro de Shadow DOM. Isso significa:

• Os estilos do seu site não afetam os widgets
• Os estilos dos widgets não vazam para o seu site
• Funciona em qualquer framework ou template CSS sem conflitos

Cache e Performance

• Config: Cache-Control: public, max-age=300 — 5 minutos de cache + localStorage no navegador
• Bundles JS: Cache-Control: public, max-age=3600 — 1 hora de cache
• Carregamento condicional: tools.js só é baixado se houver ferramentas ativas
• Async: O script não bloqueia o carregamento da página