This page provides instructions for integrating Adora into your application. You can integrate Adora using a JavaScript snippet, Google Tag Manager, or a script tag in Next.js.

​
Integrating the Snippet Using HTML

1

Obtain an ORGANIZATION_ID

Obtain an ORGANIZATION_ID for your organization by contacting us.
2

Insert the Adora Script

Add the following script to your application in a location where you want Adora to capture session data. Replace ORGANIZATION_ID with the value you received.
<script>
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://adora-cdn.com/adora-start.js";
  script.onload = function () {
    adoraStart({
      orgId: "ORGANIZATION_ID",
    });
  };
  document.head.appendChild(script);
</script>
NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.
3

Confirm it works

You should see the following network calls if the snippet is correctly setup:
  • A call for adora-start.js, which loads the snippet.
  • A call to /sessions/preload, which fetches the requisite configs to process sessions.
  • A call to /sessions/start, which creates a session.
  • Many calls to /sessions/SESSION_ID/events, which sends browser data for processing.
If this does not work, visit our Troubleshooting section;
4

Our team will be in contact

Our team will be in touch when your instance is ready for you!In the meantime, you can consider enriching your Adora experience by:You are free to send us data from your local, staging or production environments. We can segment or remove these sessions afterward if desired.

​
Integrating the Snippet Using Google Tag Manager

1

Install Google Tag Manager

Install and integrate Google Tag Manager into your application.
2

Obtain an ORGANIZATION_ID

Obtain an ORGANIZATION_ID for your organization by contacting us.
3

Insert the Adora Script

Insert a Custom HTML tag through Google Tag Manager. Use the snippet below as the value, replacing the ORGANIZATION_ID with the value you received.
<script>
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://adora-cdn.com/adora-start.js";
  script.onload = function () {
    adoraStart({
      orgId: "ORGANIZATION_ID",
    });
  };
  document.head.appendChild(script);
</script>
NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.
4

Confirm it works

You should see the following network calls if the snippet is correctly setup:
  • A call for adora-start.js, which loads the snippet.
  • A call to /sessions/preload, which fetches the requisite configs to process sessions.
  • A call to /sessions/start, which creates a session.
  • Many calls to /sessions/SESSION_ID/events, which sends browser data for processing.
If this does not work, visit our Troubleshooting section;
5

Our team will be in contact

Our team will be in touch when your instance is ready for you!In the meantime, you can consider enriching your Adora experience by:You are free to send us data from your local, staging or production environments. We can segment or remove these sessions afterward if desired.

​
Integrating the Snippet Using Next.js

1

Obtain an ORGANIZATION_ID

Obtain an ORGANIZATION_ID for your organization by contacting us.
2

Insert the Adora Script

Insert the following script into your _app.page.tsx or layout file in your application where you want Adora to capture session data. Replace the ORGANIZATION_ID with the value you received.
// in _app.page.tsx

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
      <Script
        src="https://adora-cdn.com/adora-start.js"
        onReady={() => {
          window.adoraStart({
            orgId: "ORGANIZATION_ID",
          });
        }}
      />
    </>
  );
}
NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.
3

Confirm it works

You should see the following network calls if the snippet is correctly setup:
  • A call for adora-start.js, which loads the snippet.
  • A call to /sessions/preload, which fetches the requisite configs to process sessions.
  • A call to /sessions/start, which creates a session.
  • Many calls to /sessions/SESSION_ID/events, which sends browser data for processing.
If this does not work, visit our Troubleshooting section;
4

Our team will be in contact

Our team will be in touch when your instance is ready for you!In the meantime, you can consider enriching your Adora experience by:You are free to send us data from your local, staging or production environments. We can segment or remove these sessions afterward if desired.

​
Sub resource Integrity (SRI)

Sub resource Integrity (SRI) is a security feature that allows browsers to verify that fetched resources haven’t been tampered with by comparing the resource against a known cryptographic hash. For enhanced security, you can add SRI checks to your Adora integration. We provide up-to-date integrity hashes for all our script files. The downside of using SRI is you will not get updates when we update our script. In some cases when we require breaking changes to the script, we will reach out directly to encourage you to update to a new pinned version.

​
Using SRI with your integration

To add SRI protection to your Adora script, include the integrity and crossorigin attributes: 
<script
  src="https://adora-cdn.com/adora-start.js"
  integrity="sha384-MfmGrZs4rJ/3902BPea1nMPpTb4AncsF0K/36E23p81eQm2Vqn3z+1fdVI9j0OQQ"
  crossorigin="anonymous">
</script>

​
Getting the latest integrity hashes

We maintain current integrity hashes for all our script files at: 
https://adora-cdn.com/integrity.json
This endpoint provides both SHA-256 and SHA-384 hashes for each file. We recommend using SHA-384. The response includes:
  • adora-start.js - The main Adora script
  • Versioned chunk files (e.g., 24.adora-start.js, 381.adora-start.js) - Dynamic imports loaded by the main script
  • availableVersions - Array of available pinned versions
  • generatedAt timestamp showing when the hashes were last updated

​
Pinning to a specific version

For maximum stability, we recommend pinning to a specific version. To do this:
  1. First, fetch the main integrity file to find available versions: 
    GET https://adora-cdn.com/integrity.json
  2. Look for the availableVersions array in the response. Each version includes:
    • hash: The version identifier
    • integrityFile: The path to the version-specific integrity file
    • mainFile: The path to the version-specific main script
  3. Fetch the version-specific integrity file. For example, if the latest version hash is 032fd072: 
    GET https://adora-cdn.com/integrity.032fd072.json
  4. Use the versioned script URL with the appropriate integrity hash: 
    <script
  src="https://adora-cdn.com/adora-start.032fd072.js"
  integrity="sha384-FOonO2v1kOGVhV4zWIfTpaLysYgi8cvb4PJAhAzwbWVpHqysqVJ3gkIBSnsEhRw8"
  crossorigin="anonymous">
</script>

​
Handling chunk files

The Adora script may dynamically load additional chunk files. These are automatically verified if you’re using a pinned version, as the versioned main script will load the corresponding versioned chunks with their own integrity checks built in.

​
Best practices

  1. Automate hash updates: Consider setting up a scheduled job to check for new versions and notify your team when updates are available.
  2. Test before updating: When updating to a new pinned version, thoroughly test in a staging environment first.
  3. Monitor for deprecation notices: We’ll contact you directly if breaking changes require an update to your pinned version.
  4. Cache the integrity files: You can cache the version-specific integrity file since it won’t change for a given version.

​
Verifying integrity manually

You can verify the integrity of any Adora script file using standard tools: 
# For SHA-384 (recommended)
curl -s https://adora-cdn.com/adora-start.032fd072.js | openssl dgst -sha384 -binary | openssl base64

# For SHA-256
curl -s https://adora-cdn.com/adora-start.032fd072.js | openssl dgst -sha256 -binary | openssl base64
The output should match the corresponding hash in the integrity file. Feel free to always reach out to us if you need help identifying the correct pinned snippet version and integrity hash or have any additional questions on SRI.

​
Troubleshooting

​
adora-start.js fails to load

Ensure you have script-src header set up as per the Content Security Policy Settings.

​
adora-start.js loads, but calls to /sessions/preload 500s.

Ensure you have connect-src header set up as per the Content Security Policy Settings.

​
Appeasing the TypeScript compiler

If you are getting a complaint from TypeScript that adoraStart does not exist, you can add the following snippet in the file you are calling adoraStart from: 
declare global {
  interface Window {
    adoraStart: (settings: {
        orgId: string;
        uid?: string;
        userCohorts?: Record<string, string>;
        language?: string;
    }) => void;
    adoraStart: () => void;
  }
}

​
Content Security Policy Settings

Content Security Policy (CSP) is a feature that helps to prevent or minimize the risk of certain types of security threats. It consists of a series of instructions from a website to a browser, which instruct the browser to place restrictions on the things that the code comprising the site is allowed to do. This may be enabled on your application - in which case, you will need to allowlist Adora for a successful integration. If you have CSP enabled on your application, you will need to add adora-cdn.com and *.adora-cdn.com to the connect-src and script-src directives.