Integration Guide

One universal snippet for both your hotel website and Avvio booking engine.

Quick Start Script Tag

Add this snippet to every page — hotel website and booking engine — before the closing </body> tag:

<script src="https://cdn.achooo.io/v1/achooo.min.js"></script>
<script>
  (function() {
    var achooo = Achooo.createAchooo({
      hotelId: 'YOUR_HOTEL_ID', // e.g. 'htl_kR7mNx9pQ2wS'
      ingestEndpoint: 'https://api.achooo.io',
      handoffEndpoint: 'https://handoff.achooo.io',
      adapterAutoDetect: true
    });
    achooo.init();
    window.achooo = achooo; // expose for optional manual tracking
  })();
</script>

The IIFE bundle exposes a global Achooo object with a createAchooo factory function. Setting adapterAutoDetect: true is safe on all pages.

NPM Installation NPM

npm install @achooo/sdk

import { createAchooo } from '@achooo/sdk';

const achooo = createAchooo({
  hotelId: 'htl_kR7mNx9pQ2wS',
  ingestEndpoint: 'https://api.achooo.io',
  handoffEndpoint: 'https://handoff.achooo.io',
  adapterAutoDetect: true,
});

achooo.init();

Configuration Reference

Dynamic Hotel ID

Each hotel property has a unique opaque hotelId assigned by Achooo (e.g. htl_kR7mNx9pQ2wS). If you manage multiple properties, set it dynamically from your per-hotel configuration:

(function() {
  var achooo = Achooo.createAchooo({
    hotelId: window.HOTEL_CONFIG.achoooHotelId,
    ingestEndpoint: 'https://api.achooo.io',
    handoffEndpoint: 'https://handoff.achooo.io',
    adapterAutoDetect: true
  });
  achooo.init();
  window.achooo = achooo;
})();

If you inject configuration server-side, you can also template the hotel ID directly:

(function() {
  var achooo = Achooo.createAchooo({
    hotelId: '{{hotel.achooo_id}}',
    ingestEndpoint: 'https://api.achooo.io',
    handoffEndpoint: 'https://handoff.achooo.io',
    adapterAutoDetect: true
  });
  achooo.init();
  window.achooo = achooo;
})();

How the Adapter Works

The Achooo SDK includes a built-in Avvio adapter that automatically detects when it's running on an Avvio booking engine page. On non-Avvio pages (hotel website), the detection is a fast synchronous check that immediately skips — no performance cost, no errors, no extra network calls.

Auto-Detection

The adapter uses a scoring system to detect Avvio pages:

• Hostname patterns — domains containing .avvio., booking.*.com, reservations*.
• DOM signatures — elements like .avvio-booking, .avvio-widget, [data-avvio], script[src*="avvio"]
• Window globals — objects like avvioBooking, AvvioWidget, __AVVIO__

Capture Strategy

1. Network interception (preferred) — Intercepts fetch() and XMLHttpRequest calls to Avvio API endpoints. Captures the richest data directly from API payloads.
2. DOM observation (fallback) — Watches for booking confirmation elements in the DOM if network interception doesn't capture expected events.

API Patterns Monitored

Cross-Domain Handoff

When a guest navigates from a hotel website to the Avvio booking engine, the SDK stitches the session across domains:

1. Hotel website SDK calls /handoff/mint to get a signed token containing the guest's anonymous identity
2. The token is appended to the booking engine URL as a query parameter
3. Booking engine SDK calls /handoff/consume to recover the stitched identity
4. The guest's journey is tracked as a single continuous session

Events Captured

The Avvio adapter automatically captures these events:

All surname data is hashed with PBKDF2 using the per-hotel salt before transmission. No PII is stored.

Testing & Verification

Enable Debug Mode

Set debug: true in the SDK config to enable verbose console logging:

(function() {
  var achooo = Achooo.createAchooo({
    hotelId: 'htl_kR7mNx9pQ2wS',
    ingestEndpoint: 'https://api.achooo.io',
    handoffEndpoint: 'https://handoff.achooo.io',
    adapterAutoDetect: true,
    debug: true
  });
  achooo.init();
  window.achooo = achooo;
})();

With debug mode on, you'll see console output for:

• SDK initialization and configuration
• Adapter detection results (score, confidence level)
• Network interception activity (matched API calls)
• Events captured and batched
• Flush/send activity to the ingest endpoint

Adapter Health Check

After initialization, check the adapter's health status in the browser console:

console.log(achooo.getAdapterHealth());
// { status: 'healthy', confidence: 'HIGH', capturedEvents: 5, lastCaptureAt: '...', issues: [] }

Health statuses:

• healthy — Adapter detected and capturing events normally
• degraded — Adapter active but some capture methods unavailable
• unhealthy — Adapter failed to initialize or capture events

Network Inspection

Open browser DevTools (Network tab) and look for requests to:

• POST /ingest — Event batches sent to the Achooo ingestion service
• POST /handoff/mint — Identity token creation (hotel website side)
• POST /handoff/consume — Identity token consumption (booking engine side)

Verify the Script Loaded

// In the browser console:
console.log(typeof Achooo.createAchooo); // "function"

Troubleshooting