Skip to main content
This page provides instructions for integrating Adora into your application. You can integrate Adora using a JavaScript snippet, Google Tag Manager or install the Node.js package.

​
Integrating the Snippet Using HTML

1

Create an Account

Create an account at app.adora.so. Your ORGANIZATION_ID will be pre-populated for you in the snippet in the integration portal.
2

Insert the Adora Script

Add the following script to your application in a location where you want Adora to capture session data.
<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.

​
Integrating the Snippet Using Google Tag Manager

1

Install Google Tag Manager

Install and integrate Google Tag Manager into your application.
2

Create an Account

Create an account at app.adora.so. Your ORGANIZATION_ID will be pre-populated for you in the snippet in the integration portal.
3

Insert the Adora Script

Insert a Custom HTML tag through Google Tag Manager. Use the snippet below as the value.
<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.

​
Integrating Adora Using Node.js

1

Create an Account

Create an account at app.adora.so. Your ORGANIZATION_ID will be pre-populated for you in the snippet in the integration portal.
2

Install the Node.js package

Install using npm
npm install @adora-so/adora-js
Install using pnpm
pnpm add @adora-so/adora-js
Install using yarn
yarn add @adora-so/adora-js
3

Import the adoraStart function and call it

Call this in your application where you want Adora to start capturing session data.
import { adoraStart } from '@adora-so/adora-js';

adoraStart({
  orgId: ORGANIZATION_ID,
});
NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.

​
Integrating Adora in Next.js

1

Create an Account

Create an account at app.adora.so. Your ORGANIZATION_ID will be pre-populated for you in the snippet in the integration portal.
2

Install the Node.js package

Install using npm
npm install @adora-so/adora-js
Install using pnpm
pnpm add @adora-so/adora-js
Install using yarn
yarn add @adora-so/adora-js
3

Import the adoraStart function and call it

Call adoraStart in your _app.page.tsx or layout file in your application where you want Adora to capture session data.
// in _app.page.tsx
import { adoraStart } from '@adora-so/adora-js';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    adoraStart({
      orgId: "ORGANIZATION_ID",
    });
  }, []);

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}
NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.

​
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;
        properties?: Record<string, string>;
        language?: string;
    }) => void;
    adoraStop: () => 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.