Integration Examples

Copy and paste these examples to integrate Odyssey into your website.

Basic Integration

Add this script tag to your HTML. Replace the data attributes with your actual org and journey IDs.

<script
  src="http://localhost:3000/embed/embed-v1.global.js"
  data-org="org_123"
  data-journey="journey_abc"
  data-endpoint="http://localhost:3000/api/ingest"
  async
></script>

With Debug Mode

Enable debug mode to see console logs during development.

<script
  src="http://localhost:3000/embed/embed-v1.global.js"
  data-org="org_123"
  data-journey="journey_abc"
  data-endpoint="http://localhost:3000/api/ingest"
  data-env="dev"
  data-debug="true"
  async
></script>

Production URLs

In production, you would use your production domain:

<script
  src="https://app.yourdomain.com/embed/embed-v1.global.js"
  data-org="org_123"
  data-journey="journey_abc"
  data-endpoint="https://app.yourdomain.com/api/ingest"
  data-env="prod"
  async
></script>

Manual Event Tracking

After the script loads, you can manually track events using window.JourneyEmbed:

// Track a custom event
window.JourneyEmbed.track("step_view", { 
  stepKey: "step-001" 
});

// Track a form submission
window.JourneyEmbed.track("submit_success", { 
  stepKey: "step-001" 
});

// Manually flush events (normally auto-flushes)
window.JourneyEmbed.flush();

// Check version
console.log(window.JourneyEmbed.version); // "v1"