Ajouter Device Intelligence à un site Webflow

Publiez avant la validation finale

Le code personnalisé Webflow peut s’exécuter dans les modes Preview et Comment lorsque l’aperçu du code personnalisé est activé, mais il n’est pas actif tant que le site n’est pas publié. Publiez votre site et testez l’URL active avant de vous fier aux données.

Ce guide montre comment ajouter cside Device Intelligence à un site Webflow : chargez le script client.js avec Webflow Custom code, puis appelez sendClientTelemetry pour créer un fingerprint de session.

Besoin seulement du script de monitoring ?

Pour ajouter le script de monitoring standard de cside à Webflow, utilisez le script csidetm.com depuis Ajouter notre script. Ce script ne nécessite pas d’appel de fonction. Ce guide se concentre sur le script Device Intelligence.

Avant de commencer

Utilisez un plan de site ou Workspace Webflow qui prend en charge Custom code et Code Embed.
Ajoutez le domaine de votre site dans le dashboard cside et confirmez que Device Intelligence est activé pour lui. Consultez Ajouter votre domaine.
Préparez l’URL de votre script Device Intelligence. Elle ressemble à https://[your-team-id].csidefd.com/client.js. Pour voir l’URL complète de votre script, allez dans le dashboard cside. Pour une livraison first-party depuis votre propre domaine, configurez d’abord un CNAME - consultez Configurer Device Intelligence.

Étape 1 - Ajouter le script Device Intelligence

Ouvrir Custom code

Dans Webflow, ouvrez les Site settings de votre site, puis allez dans Custom code.

Coller le script dans Head code

Dans Head code, collez le snippet ci-dessous et remplacez [your-team-id] par votre team ID, ou utilisez votre domaine first-party, comme fingerprint.example.com.

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

Enregistrer et publier

Cliquez sur Save, puis publiez votre site Webflow. Testez l’URL publiée pour la validation finale.

Le script ne crée pas de fingerprint tout seul

Charger client.js expose seulement la fonction sendClientTelemetry dans le navigateur. Un fingerprint de session est créé seulement après l’appel de cette fonction par votre site, configuré à l’Étape 2.

Étape 2 - Appeler sendClientTelemetry

Appelez sendClientTelemetry sur la page où vous voulez collecter un fingerprint, comme le checkout, l’inscription ou la connexion. Vous pouvez l’appeler sans argument ou passer un objet externalIds facultatif avec des clés comme accountId, orderId ou email.

Comme Webflow peut exécuter du code personnalisé globalement ou sur une seule page, utilisez l’une de ces options.

Option A - Custom code au niveau page (recommandé)

Utilisez cette option lorsque vous voulez créer un fingerprint sur une page précise.

Ouvrir les paramètres de la page

Dans Webflow, ouvrez les Page settings de la page cible, puis trouvez Custom code.

Coller l’appel avant la balise body de fermeture

Dans le champ Before </body> tag, collez le script ci-dessous. Il attend jusqu’à cinq secondes que client.js finisse de charger, puis appelle sendClientTelemetry.

<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; // envoyez-le à votre backend
      }).catch(console.error);
    }

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

Enregistrer et publier la page

Enregistrez les paramètres de la page, publiez le site, puis testez la page publiée.

Utilisez cette option lorsque vous voulez le même appel sur plusieurs pages. Dans Site settings > Custom code, ajoutez un deuxième snippet dans Footer code et collez le même <script> que dans l’Option A.

Option C - Code Embed

Utilisez Webflow Code Embed seulement si l’appel doit se trouver dans une section ou un composant précis. Collez le même <script> que dans l’Option A dans l’embed, puis publiez la page avant de tester.

Facultatif - Utiliser le token de session

sendClientTelemetry renvoie un token de session dans result.token. Vous devez envoyer ce token à votre backend seulement si votre application doit récupérer et utiliser les datapoints de l’appareil. Les échanges de production utilisent une clé API Device Intelligence côté serveur depuis le dashboard cside.

Ne placez pas la clé API Device Intelligence dans des snippets Webflow Custom code ou Code Embed. Gardez-la dans les secrets de votre backend.

Events API - le flux complet d’échange du token et le schéma de réponse
Récupérer les datapoints - lire les données derrière un token

Dépannage

Rien n’apparaît dans Preview - Si vous testez en mode Preview ou Comment dans Webflow, confirmez que l’aperçu du code personnalisé est activé. Publiez et ouvrez l’URL active pour la validation finale.
sendClientTelemetry is not defined - Le script client.js manque ou charge trop tard. Confirmez que l’Étape 1 le place dans Head code et que la page publiée le charge avant votre appel.
Le script charge, mais aucun fingerprint n’apparaît - Vous avez chargé client.js, mais vous n’avez jamais appelé la fonction. Confirmez que l’Étape 2 s’exécute sur la page testée.
L’URL du script concerne le monitoring, pas Device Intelligence - Le script de monitoring standard utilise csidetm.com. Device Intelligence utilise votre URL csidefd.com ou votre domaine first-party de fingerprint.
Les requêtes sont bloquées par la CSP - Si vous avez configuré une Content Security Policy, autorisez votre domaine Device Intelligence dans script-src et connect-src. Consultez Ajuster votre CSP.