Script Tag Integration

Overview

The script tag integration is the simplest way to add Outlit tracking to your website. It works on any site—static HTML, WordPress, Webflow, or any other platform.

Installation

Add this snippet before the closing </body> tag. This creates a lightweight stub that queues calls until the full SDK loads, ensuring zero impact on page load speed:

<script>
  !function(w,d,src,key,auto){
    if(w.outlit&&w.outlit._loaded)return;
    var o=w.outlit=w.outlit||{_q:[]};
    function stub(target,prefix,methods){
      for(var i=0;i<methods.length;i++){
        var m=methods[i];
        target[m]=target[m]||function(mm){
          return function(){o._q.push([prefix?prefix+"."+mm:mm,[].slice.call(arguments)])};
        }(m);
      }
    }
    stub(o,"",["init","track","identify","enableTracking","disableTracking","isTrackingEnabled","getVisitorId","setUser","clearUser"]);
    o.user=o.user||{};
    stub(o.user,"user",["identify"]);
    var s=d.createElement("script");s.async=1;s.src=src;
    s.dataset.publicKey=key;if(auto!==undefined)s.dataset.autoTrack=auto;
    (d.body||d.head).appendChild(s);
  }(window,document,"https://cdn.outlit.ai/stable/outlit.js","pk_your_public_key");
</script>

This snippet is safe to place anywhere on the page, including in the <head>. Calls to outlit.track() or outlit.user.identify() will be queued and processed once the SDK loads.

Simple Version

If you prefer a cleaner script tag and don’t need to call tracking methods before the SDK loads:

<script
  src="https://cdn.outlit.ai/stable/outlit.js"
  data-public-key="pk_your_public_key"
  async
></script>

string

required

Your organization’s public key. Find it in Settings → Website Tracking.

string

Custom API host. Defaults to https://app.outlit.ai.

string

Set to "false" to disable automatic pageview tracking.

string

Set to "false" to disable automatic form capture.

string

Set to "false" to disable automatic tracking on load. Use this when you need to wait for user consent before tracking. Call window.outlit.enableTracking() after consent is obtained.

string

Set to "false" to disable automatic user identification from form submissions. When enabled (default), submitting a form with an email field automatically calls identify() with the extracted email and name. See Auto-Identify for details.

string

Set to "false" to disable automatic tracking of calendar bookings from Cal.com and Calendly embeds. See Calendar Embed Tracking for details.

string

Set to "false" to disable engagement tracking (active time on page). When enabled (default), emits engagement events on page exit and navigation capturing how long users actively engaged with each page.

string

Idle timeout in milliseconds for engagement tracking. After this period of no user interaction, the user is considered idle and active time stops accumulating. Default is "30000" (30 seconds).

If you’re using a consent management platform (CMP) or need to wait for user consent before tracking, pass false as the last parameter to disable auto-tracking:

<script>
  !function(w,d,src,key,auto){
    if(w.outlit&&w.outlit._loaded)return;
    var o=w.outlit=w.outlit||{_q:[]};
    function stub(target,prefix,methods){
      for(var i=0;i<methods.length;i++){
        var m=methods[i];
        target[m]=target[m]||function(mm){
          return function(){o._q.push([prefix?prefix+"."+mm:mm,[].slice.call(arguments)])};
        }(m);
      }
    }
    stub(o,"",["init","track","identify","enableTracking","disableTracking","isTrackingEnabled","getVisitorId","setUser","clearUser"]);
    o.user=o.user||{};
    stub(o.user,"user",["identify"]);
    var s=d.createElement("script");s.async=1;s.src=src;
    s.dataset.publicKey=key;if(auto!==undefined)s.dataset.autoTrack=auto;
    (d.body||d.head).appendChild(s);
  }(window,document,"https://cdn.outlit.ai/stable/outlit.js","pk_your_public_key",false);
</script>

<script>
  // Called by your consent management tool when user accepts
  function onConsentAccepted() {
    window.outlit.enableTracking()
  }
</script>

Or with the simple script tag:

<script
  src="https://cdn.outlit.ai/stable/outlit.js"
  data-public-key="pk_your_public_key"
  data-auto-track="false"
  async
></script>

With Popular CMPs

Cookiebot
OneTrust
Custom Banner

window.addEventListener('CookiebotOnAccept', function() {
  // Check for marketing or analytics consent
  if (Cookiebot.consent.marketing || Cookiebot.consent.analytics) {
    window.outlit.enableTracking()
  }
})

// OneTrust calls this when consent changes
function OptanonWrapper() {
  // C0002 = Analytics, C0004 = Targeting/Marketing
  if (OnetrustActiveGroups.includes('C0004') || OnetrustActiveGroups.includes('C0002')) {
    window.outlit.enableTracking()
  }
}

document.getElementById('accept-cookies').addEventListener('click', function() {
  window.outlit.enableTracking()
})

document.getElementById('decline-cookies').addEventListener('click', function() {
  window.outlit.disableTracking()
})

// Check on page load — consent state is persisted automatically by the SDK
if (window.outlit.isTrackingEnabled()) {
  console.log('Tracking is active')
}

Check Tracking Status

// Check if tracking is currently enabled
if (window.outlit.isTrackingEnabled()) {
  console.log('Tracking is active')
}

Automatic Tracking

Once installed, the tracker automatically captures:

Pageviews

Every page navigation is tracked, including:

Full URL and path
Page title
Referrer
UTM parameters (utm_source, utm_medium, utm_campaign, utm_term, utm_content)

For single-page applications, the tracker automatically detects navigation via pushState, replaceState, and popstate events.

Form Submissions

When a form is submitted, the tracker captures:

Form ID or name
All field values (except sensitive fields)

Automatically Removed Fields:

Passwords (password, passwd, pwd)
Credit card numbers (credit_card, cc_number, cvv)
Social Security numbers (ssn, social_security)
API keys and tokens (api_key, token, secret)

Manual Tracking

Use the global window.outlit object to track custom events:

Track Custom Events

window.outlit.track('button_clicked', {
  buttonId: 'cta-hero',
  page: '/pricing'
})

window.outlit.track('video_played', {
  videoId: 'demo-video',
  duration: 120
})

string

required

The name of the event. Use snake_case for consistency.

object

Optional properties to attach to the event.

Identify Visitors

When a visitor provides their email (signup, login, contact form), identify them:

window.outlit.identify({
  email: 'jane@example.com',
  userId: 'usr_12345', // optional
  traits: {
    name: 'Jane Doe',
    company: 'Acme Inc',
    plan: 'enterprise'
  }
})

string

The visitor’s email address.

string

Your internal user ID (from Supabase, Auth0, Firebase, etc.).

object

Additional properties about the user.

At least one of email or userId should be provided. Without identity information, the call has no effect.

Set User Identity

For SPA applications where you know the user’s identity after authentication:

// After user logs in
window.outlit.setUser({
  email: 'jane@example.com',
  userId: 'usr_12345',
  traits: {
    name: 'Jane Doe',
    plan: 'pro'
  }
})

setUser() can be called before tracking is enabled (with data-auto-track="false"). The identity is queued and applied when enableTracking() is called.

Clear User Identity

Call when the user logs out:

window.outlit.clearUser()

Activation event

Track the ordinary event selected as your activation signal after the milestone succeeds:

// After user completes onboarding
window.outlit.track('onboarding_completed', { flow: 'onboarding' })

Configure this event as your activation signal. Outlit Core derives lifecycle stages from ordinary events, and billing status comes from verified integrations such as Stripe. See Customer Journey.

Get Visitor ID

Access the current visitor’s ID (useful for server-side correlation):

const visitorId = window.outlit.getVisitorId()
// Returns: "a1b2c3d4-e5f6-7890-abcd-ef1234567890"

Queued Commands

The IIFE snippet creates stub methods that queue all tracking calls until the SDK fully loads. This means you can call outlit.track(), outlit.identify(), or any other method immediately—even in inline scripts before the SDK has finished loading:

<script>
  !function(w,d,src,key,auto){
    if(w.outlit&&w.outlit._loaded)return;
    var o=w.outlit=w.outlit||{_q:[]};
    function stub(target,prefix,methods){
      for(var i=0;i<methods.length;i++){
        var m=methods[i];
        target[m]=target[m]||function(mm){
          return function(){o._q.push([prefix?prefix+"."+mm:mm,[].slice.call(arguments)])};
        }(m);
      }
    }
    stub(o,"",["init","track","identify","enableTracking","disableTracking","isTrackingEnabled","getVisitorId","setUser","clearUser"]);
    o.user=o.user||{};
    stub(o.user,"user",["identify"]);
    var s=d.createElement("script");s.async=1;s.src=src;
    s.dataset.publicKey=key;if(auto!==undefined)s.dataset.autoTrack=auto;
    (d.body||d.head).appendChild(s);
  }(window,document,"https://cdn.outlit.ai/stable/outlit.js","pk_your_public_key");
</script>

<!-- This works immediately, even before the SDK loads -->
<script>
  window.outlit.track('early_event', { page: 'landing' });
</script>

Event Batching

For performance, events are batched and sent:

Every 5 seconds (if there are pending events)
When the queue reaches 10 events
When the page is about to unload (using sendBeacon)

Example: Full Integration

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
  
  <form id="contact-form">
    <input name="email" type="email" placeholder="Email" />
    <input name="name" type="text" placeholder="Name" />
    <button type="submit">Contact Us</button>
  </form>

  <button id="cta" onclick="handleCTA()">Get Started</button>

  <script>
    function handleCTA() {
      window.outlit.track('cta_clicked', {
        location: 'hero',
        page: window.location.pathname
      });
    }

    // Identify after form submission
    document.getElementById('contact-form').addEventListener('submit', function(e) {
      const email = e.target.querySelector('[name="email"]').value;
      const name = e.target.querySelector('[name="name"]').value;
      
      window.outlit.identify({
        email: email,
        traits: { name: name }
      });
    });
  </script>

  <script>
    !function(w,d,src,key,auto){
      if(w.outlit&&w.outlit._loaded)return;
      var o=w.outlit=w.outlit||{_q:[]};
      function stub(target,prefix,methods){
        for(var i=0;i<methods.length;i++){
          var m=methods[i];
          target[m]=target[m]||function(mm){
            return function(){o._q.push([prefix?prefix+"."+mm:mm,[].slice.call(arguments)])};
          }(m);
        }
      }
      stub(o,"",["init","track","identify","enableTracking","disableTracking","isTrackingEnabled","getVisitorId","setUser","clearUser"]);
      o.user=o.user||{};
      stub(o.user,"user",["identify"]);
      var s=d.createElement("script");s.async=1;s.src=src;
      s.dataset.publicKey=key;if(auto!==undefined)s.dataset.autoTrack=auto;
      (d.body||d.head).appendChild(s);
    }(window,document,"https://cdn.outlit.ai/stable/outlit.js","pk_your_public_key");
  </script>
</body>
</html>

Troubleshooting

Events not appearing in dashboard

Check your public key is correct
Verify the domain is in your allowlist (Settings → Website Tracking)
Open DevTools → Network and check for errors in /api/i/v1/ requests
Ensure the script loads without errors (check Console)

Form data not captured

Form must have a submit event (not prevented with e.preventDefault() before capture)
Check if field names match the denylist (they may be filtered for security)
Ensure data-track-forms is not set to "false"

Pageviews not tracking on SPA

The tracker automatically listens for pushState/replaceState. If using a custom router that doesn’t use these, manually track:

router.on('routeChange', (url) => {
  window.outlit.track('pageview', { url });
});

Next Steps

NPM Package

Use the npm package for more control

React Integration

First-class React support with hooks

Calendar Embeds

Track Cal.com and Calendly bookings

Getting Started

Concepts

Browser SDKs

Server SDKs

CLI

AI Integrations

Use Cases

Script Tag Integration

Overview

Installation

Simple Version

With Popular CMPs

Check Tracking Status

Automatic Tracking

Pageviews

Form Submissions

Manual Tracking

Track Custom Events

Identify Visitors

Set User Identity

Clear User Identity

Activation event

Get Visitor ID

Queued Commands

Event Batching

Example: Full Integration

Troubleshooting

Next Steps

NPM Package

React Integration

Calendar Embeds

​Overview

​Installation

​Simple Version

​Consent Management

​With Popular CMPs

​Check Tracking Status

​Automatic Tracking

​Pageviews

​Form Submissions

​Manual Tracking

​Track Custom Events

​Identify Visitors

​Set User Identity

​Clear User Identity

​Activation event

​Get Visitor ID

​Queued Commands

​Event Batching

​Example: Full Integration

​Troubleshooting

​Next Steps

NPM Package

React Integration

Calendar Embeds

Overview

Installation

Simple Version

Consent Management

With Popular CMPs

Check Tracking Status

Automatic Tracking

Pageviews

Form Submissions

Manual Tracking

Track Custom Events

Identify Visitors

Set User Identity

Clear User Identity

Activation event

Get Visitor ID

Queued Commands

Event Batching

Example: Full Integration

Troubleshooting

Next Steps