Script Loading

Learn about different ways to load the Inpera embed script in your application.

Standard Loading

The simplest approach using a script tag:

<script 
  src="https://cdn.inpera.app/overlay.js" 
  data-project-id="YOUR_PROJECT_ID"
  async
></script>

NPM Package

For JavaScript projects, install via npm:

npm install @inpera/overlay

Initialize in your app:

import { initInpera } from '@inpera/overlay';

initInpera({
  projectId: 'YOUR_PROJECT_ID',
  enabled: process.env.NODE_ENV !== 'production',
});

Conditional Loading

Only load in non-production environments:

if (process.env.NODE_ENV !== 'production') {
  const script = document.createElement('script');
  script.src = 'https://cdn.inpera.app/overlay.js';
  script.dataset.projectId = 'YOUR_PROJECT_ID';
  script.async = true;
  document.body.appendChild(script);
}

Framework Examples

Next.js

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV !== 'production' && (
          <Script 
            src="https://cdn.inpera.app/overlay.js"
            data-project-id="YOUR_PROJECT_ID"
            strategy="lazyOnload"
          />
        )}
      </body>
    </html>
  );
}

React (Vite)

// main.tsx
import { initInpera } from '@inpera/overlay';

if (import.meta.env.DEV) {
  initInpera({ projectId: 'YOUR_PROJECT_ID' });
}

Vue 3

// main.ts
import { initInpera } from '@inpera/overlay';

if (import.meta.env.DEV) {
  initInpera({ projectId: 'YOUR_PROJECT_ID' });
}

Loading Strategies

Strategy	When	Best For
`async`	ASAP, non-blocking	Most cases
`defer`	After HTML parsing	Layout-sensitive
`lazyOnload`	After page load	Performance critical

Subresource Integrity

For additional security, use SRI:

<script 
  src="https://cdn.inpera.app/overlay.js"
  integrity="sha384-..."
  crossorigin="anonymous"
  data-project-id="YOUR_PROJECT_ID"
  async
></script>