How to Integrate Overcentric - Overcentric · Overcentric
All Categories Getting Started How to Integrate Overcentric

How to Integrate Overcentric

Aug 11, 2025

The first step to integrate Overcentric is to install and initialize our lightweight JavaScript library in your website and product.

You can learn more about the JavaScript library in this article.

Adding Overcentric

There are three main ways to integrate Overcentric into your website and product.

1. Using an HTML Script Tag

This is the simplest and fastest way to get started for static websites or projects where you don't use a package manager.

Add the following script tag to the <head> of your website or product pages:

<script defer src="https://unpkg.com/overcentric/dist/browser/overcentric.min.js" data-project-id="YOUR_PROJECT_ID" data-context="website"></script>

Note: Remember to replace YOUR_PROJECT_ID with the unique project ID from your Overcentric account.

2. Using a package manager

If you're working with a JavaScript framework like React, Vue, or Angular, or using a build tool like Vite or Webpack, this is how you can integrate Overcentric.

First, install the package:

npm install overcentric

Next, import and initialize Overcentric in your JavaScript code:

import overcentric from 'overcentric';
overcentric.init('YOUR_PROJECT_ID', {  context: "website"});

Note: Remember to replace YOUR_PROJECT_ID with the unique project ID from your Overcentric account.

3. AI Code Editor Prompt

For the most convenient and fastest setup, you can use our in-app AI code editor prompt. This method automatically handles the installation, initialisation, handling of context, user identification and tracking of sign up events.

To get the prompt for your project, log in to Overcentric and visit the /setup page.

Simply copy and paste the prompt into your code editor to get started in seconds.

A Critical Step: Setting the Context Option

Regardless of which method you choose, correctly setting the context option is essential. This value tells Overcentric whether the user activity is happening on your marketing website or inside your product.

  • Set context to "website" for your marketing pages, landing pages, and blog.

  • Set context to "product" for login, sign up and pages users sees after they have logged in.

This distinction allows Overcentric to automatically build dedicated analytics dashboards for each part of your business.

For Single-Page Applications (SPAs):

If your marketing website and product are in the same codebase, you can update the context on the fly. Simply initialise Overcentric with the "website" context, and then call overcentric.setContext() when a user navigates to a product page:

overcentric.setContext("product")

After calling setContext, all subsequent events will be tracked as product events.

What's Next?

With Overcentric installed and deployed, events, errors and session replays are automatically recording.

The next article will guide you on how to identify your users and track custom events.