Adicionar Device Intelligence a um site Webflow

Este guia mostra como adicionar cside Device Intelligence a um site Webflow: carregue o script client.js com Webflow Custom code e depois chame sendClientTelemetry para criar um fingerprint de sessão.

Antes de começar

• Use um plano de site ou Workspace do Webflow que suporte Custom code e Code Embed.
• Adicione o domínio do seu site no dashboard do cside e confirme que Device Intelligence está ativado para ele. Consulte Adicionar seu domínio.
• Tenha a URL do seu script de Device Intelligence em mãos. Ela se parece com https://[your-team-id].csidefd.com/client.js. Para ver a URL completa do seu script, acesse o dashboard do cside. Para entrega first-party pelo seu próprio domínio, configure primeiro um CNAME - consulte Configurar Device Intelligence.

Passo 1 - Adicione o script de Device Intelligence

<script
  src="https://[your-team-id].csidefd.com/client.js"
  referrerpolicy="origin"
  data-src="6">
</script>

Passo 2 - Chame sendClientTelemetry

Chame sendClientTelemetry na página em que você quer coletar um fingerprint, como checkout, cadastro ou login. Você pode chamá-la sem argumentos ou passar um objeto externalIds opcional com chaves como accountId, orderId ou email.

Como o Webflow pode executar código personalizado globalmente ou em uma única página, use uma destas opções.

Opção A - Custom code no nível da página (recomendado)

Use isto quando quiser criar fingerprint em uma página específica.

<script>
  (function () {
    var attempts = 0;
    var maxAttempts = 25;

    function run() {
      if (typeof sendClientTelemetry !== "function") {
        attempts += 1;

        if (attempts >= maxAttempts) {
          console.warn("cside Device Intelligence script did not load.");
          return;
        }

        setTimeout(run, 200);
        return;
      }

      sendClientTelemetry({
        accountId: "customer-123",
        orderId: "order-456",
      }).then(function (result) {
        if (result.errors) {
          console.error(result.errors);
          return;
        }

        var sessionToken = result.token; // envie isto ao seu backend
      }).catch(console.error);
    }

    run();
  })();
</script>

Opção B - Footer code em todo o site

Use isto quando quiser a mesma chamada em muitas páginas. Em Site settings > Custom code, adicione um segundo snippet em Footer code e cole o mesmo <script> da Opção A.

Opção C - Code Embed

Use Webflow Code Embed apenas quando precisar que a chamada fique dentro de uma seção ou componente específico. Cole o mesmo <script> da Opção A no embed e publique a página antes de testar.

Opcional - Use o token de sessão

sendClientTelemetry retorna um token de sessão em result.token. Você só precisa enviar esse token ao seu backend se a sua aplicação quiser recuperar e usar os datapoints do dispositivo. Trocas de produção usam uma chave de API de Device Intelligence no lado do servidor a partir do dashboard do cside.

Não coloque a chave de API de Device Intelligence em snippets de Webflow Custom code ou Code Embed. Mantenha-a nos segredos do seu backend.

• Events API - o fluxo completo de troca de token e o schema da resposta
• Recuperar datapoints - ler os dados por trás de um token

Solução de problemas

• Nada aparece no Preview - Se você testar no modo Preview ou Comment do Webflow, confirme que a prévia de código personalizado está habilitada. Publique e abra a URL ativa para a validação final.
• sendClientTelemetry is not defined - O script client.js está ausente ou carregou tarde demais. Confirme que o Passo 1 o coloca em Head code e que a página publicada o carrega antes da sua chamada.
• O script carrega, mas nenhum fingerprint aparece - Você carregou client.js, mas nunca chamou a função. Confirme que o Passo 2 roda na página que você está testando.
• A URL do script é de monitoramento, não de Device Intelligence - O script de monitoramento padrão usa csidetm.com. Device Intelligence usa a sua URL csidefd.com ou o seu domínio first-party de fingerprint.
• As requisições são bloqueadas pela CSP - Se você configurou uma Content Security Policy, permita o seu domínio de Device Intelligence em script-src e connect-src. Consulte Ajustando sua CSP.