Skip to main content
Before you begin
Language

Add Device Intelligence to a Framer site

Add the cside Device Intelligence script and call sendClientTelemetry on a no-code Framer site using Custom Code and the Embed element.

Custom code only runs on your published site

Framer custom code and embedded scripts do not execute in the editor or the canvas preview. Publish your site and test on the live URL.

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

Just need the monitoring script?

To add the standard cside monitoring script to Framer, follow Step 1 below but paste your csidetm.com script instead. The monitoring script needs no function call, so you can skip Step 2. This guide focuses on the Device Intelligence (fingerprinting) script.

Before you begin

  • 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. 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 your Framer project, go to Project Settings > Custom Code, then click Add Script.

Paste the script into the head

Set the location to Start of <head> tag so the script loads before your page. 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>

Apply it to every page

Give the script a recognizable name, apply it to All Pages, and set it to run on every page visit. Save your changes.

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, email, or cardLast4.

Because Framer is no-code, use one of these two ways to run the call.

Option A - Embed element (recommended)

Use this when you want to fingerprint a specific page.

Add an Embed element

On the page, open Insert > Embed and drag an Embed element onto the canvas. It does not need to be visible, so you can place it off-screen.

Paste the call into the HTML field

In the Embed’s HTML field, paste the script below. It waits for client.js to finish loading, then calls sendClientTelemetry.

<script>
  (function () {
    function run() {
      if (typeof sendClientTelemetry !== "function") {
        setTimeout(run, 200); // client.js not ready yet
        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>

Option B - Site-wide Custom Code

Use this when you want the same call on many pages. Add a second snippet in Project Settings > Custom Code, set its location to End of <body> tag, choose the pages it should run on, and set it to run on every page visit. Paste the same <script> shown in Option A.

Step 3 - Use the session token

sendClientTelemetry returns a session token in result.token. Send that token to your backend and exchange it with the cside API to read the device datapoints. Production exchanges use a server-side Device Intelligence API key from the cside dashboard.

Troubleshooting

  • Nothing happens in the editor - Custom code and embeds run only on the published site. Publish and open the live URL.
  • sendClientTelemetry is not defined - The client.js script is missing or loaded too late. Confirm Step 1 places it in Start of <head> tag and that it loads 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.
  • 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.

Advanced: code override

If you build with Framer code components or overrides, you can call sendClientTelemetry from React instead, for example on a form submit, as long as client.js is still loaded first through Step 1. Use the same call shape shown above and handle the returned token in your handler.

Was this page helpful?