Skip to main content
Before you begin
Language

Add Device Intelligence to a Webflow site

Add the cside Device Intelligence script and call sendClientTelemetry on a Webflow site using Custom code or Code Embed.

Publish before final validation

Webflow custom code can run in Preview and Comment modes when preview support is enabled, but it is not live until the site is published. Publish your site and test on the live URL before relying on the data.

This guide shows how to add cside Device Intelligence to a Webflow site: load the client.js script with Webflow Custom code, then call sendClientTelemetry so a session fingerprint is created.

Just need the monitoring script?

To add the standard cside monitoring script to Webflow, use the csidetm.com script from Adding our script. That script does not need a function call. This guide focuses on the Device Intelligence script.

Before you begin

  • Use a Webflow site or workspace plan that supports Custom code and Code Embed.
  • Add your site’s domain in the cside dashboard and confirm Device Intelligence is enabled for it. See Adding your domain.
  • Have your Device Intelligence script URL ready. It looks like https://[your-team-id].csidefd.com/client.js. To see your full script URL, go to the cside dashboard. For first-party delivery from your own domain, set up a CNAME first - see Set up Device Intelligence.

Step 1 - Add the Device Intelligence script

Open Custom code

In Webflow, open your site’s Site settings, then go to Custom code.

Paste the script into Head code

In Head code, paste the snippet below and replace [your-team-id] with your team ID, or use your first-party domain, such as fingerprint.example.com.

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

Save and publish

Click Save, then publish your Webflow site. Test on the published URL for final validation.

The script does not fingerprint by itself

Loading client.js only exposes the sendClientTelemetry function in the browser. A session fingerprint is created only after your site calls it, which you set up in Step 2.

Step 2 - Call sendClientTelemetry

Call sendClientTelemetry on the page where you want to collect a fingerprint, such as checkout, sign-up, or login. You can call it with no arguments or pass an optional externalIds object with keys like accountId, orderId, or email.

Because Webflow can run custom code globally or on a single page, use one of these options.

Option A - Page-level Custom code (recommended)

Use this when you want to fingerprint a specific page.

Open the page settings

In Webflow, open the target page’s Page settings, then find Custom code.

Paste the call before the closing body tag

In the Before </body> tag field, paste the script below. It waits up to five seconds for client.js to finish loading, then calls 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; // send this to your backend
      }).catch(console.error);
    }

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

Save and publish the page

Save the page settings, publish the site, and test the published page.

Option B - Site-wide Footer code

Use this when you want the same call on many pages. In Site settings > Custom code, add a second snippet in Footer code and paste the same <script> shown in Option A.

Option C - Code Embed

Use a Webflow Code Embed only when you need the call inside a specific section or component. Paste the same <script> shown in Option A into the embed and publish the page before testing.

Optional - Use the session token

sendClientTelemetry returns a session token in result.token. You only need to send that token to your backend if your application wants to retrieve and use the device datapoints. Production exchanges use a server-side Device Intelligence API key from the cside dashboard.

Do not put the Device Intelligence API key in Webflow Custom code or Code Embed snippets. Keep it in your backend secrets.

Troubleshooting

  • Nothing appears in Preview - If you test in Webflow Preview or Comment mode, confirm custom code preview support is enabled. Publish and open the live URL for final validation.
  • sendClientTelemetry is not defined - The client.js script is missing or loaded too late. Confirm Step 1 places it in Head code and that the published page loads it before your call.
  • Script loads but no fingerprints appear - You loaded client.js but never called the function. Confirm Step 2 runs on the page you are testing.
  • The script URL is for monitoring, not Device Intelligence - The standard monitoring script uses csidetm.com. Device Intelligence uses your csidefd.com URL or your first-party fingerprint domain.
  • Requests are blocked by CSP - If you set a Content Security Policy, allow your Device Intelligence domain for script-src and connect-src. See Adjusting your CSP.
Was this page helpful?