Integration guides

Vanilla loader

No React in the host page. A single script installs window.Dialogue; you drive the interview with imperative calls, Stripe-style.

Add the script

Drop the hosted stub. It installs window.Dialogue (the only global the SDK creates) and lazy-loads the heavy React tree on the first open().

html

<div id="dialogue-root"></div>
<script async src="https://sdk.dialogue.ai/v1/dialogue.js"></script>

The pre-load queue

Define the queue shim so you can call Dialogue(...) before the script finishes loading; the stub replays anything queued.

html

<script>
  window.Dialogue = window.Dialogue || function () {
    (Dialogue.q = Dialogue.q || []).push(arguments);
  };

  Dialogue('init', {
    publishableKey: 'pk_live_…',
    bootstrapTokenProvider: async () => (await fetch('/api/dialogue-token', { method: 'POST' })).json(),
    container: '#dialogue-root',
  });
  Dialogue('open', { studyId: '019e16c4-…' });
</script>

Driving it

Call	What it does
`Dialogue('init', config)`	Configure once. Idempotent for the same config.
`Dialogue('open', { studyId })`	Mount the interview and open the study.
`Dialogue('close')`	Unmount + dispose (equivalent to destroy, spec §8).
`Dialogue('update', { appearance })`	Re-theme live; immutable keys ignored.
`Dialogue('on', event, cb)`	Subscribe to an event.
`Dialogue('off', event, cb)`	Unsubscribe.
`Dialogue('preflight', cb)`	Browser-capability check; cb receives the result.
`Dialogue('destroy')`	Unmount and tear everything down.
`Dialogue('version', cb)`	cb receives the SDK version string.

Events

Dialogue('on', 'completed', (p) => console.log('completed', p));
Dialogue('on', 'error', (p) => console.error(p.code, p.message));

Same event names and payloads as the React layer. See Events.

Importing as a module

With a bundler you can import '@dialogueai/loader' instead of the script tag; the import installs window.Dialogue the same way.

await import('@dialogueai/loader');
window.Dialogue('init', { container: '#dialogue-root', baseUrl: '/dlg' });
window.Dialogue('open', { studyId });
// later:
window.Dialogue('destroy');

Calling init twice with a different publishableKey or bootstrapTokenProvider is an error. Those keys are immutable for an instance.