React and SPAs

Load the queue stub and loader once in your HTML shell. Do not add a new loader on each render. Reference the published declarations to type the global tiketoChat name.

Register stable action and component handlers in an effect. The API replaces an existing registration with the same name. Event handlers use on and off; registering the same event and function pair again has no effect. Keep setup idempotent because React Strict Mode runs development effects twice. See Host actions for handler timing.

import { useEffect } from "react";
import { createRoot } from "react-dom/client";

export function TiketoIntegration() {
  useEffect(() => {
    tiketoChat("action", "whereAmI", () => ({
      route: window.location.pathname,
    }));

    tiketoChat("component", "productPreview", (element, payload, { reply }) => {
      const root = createRoot(element);
      root.render(
        <button
          type="button"
          onClick={() => reply({
            requestId: payload.requestId,
            productId: payload.productId,
            variant: payload.variants[0],
          })}
        >
          Choose {payload.name}
        </button>,
      );
      return () => root.unmount();
    });
  }, []);

  return null;
}

The component guide covers renderer cleanup and history fallback.

Route changes

The context API explains when context values are read. For live route state, read window.location.pathname inside whereAmI so each call sees the current SPA route. The reference contract uses paths only. Add query strings or hashes only when Tiketo includes them in your contract and your team has reviewed their data.

Logout and account changes

Follow the data-handling guidance for context. At an account boundary, await reset and clear your own handler state before continuing navigation:

async function logout() {
  try {
    await tiketoChat("reset");
  } catch (error) {
    hideChatLauncher();
    reportChatResetFailure(error);
  } finally {
    clearHostChatState();
    await endApplicationSession();
  }
}

hideChatLauncher() and reportChatResetFailure() are hooks supplied by your application. Hide the chat container immediately and send the error code and diagnostics to your normal reporting path. Keep host logout in finally, because reset can reject even after storage is cleared. A page reload may follow reset, but reload alone does not guarantee a clean conversation.

To start chat for a new account without reloading the page, set its approved context and await tiketoChat("reset", { relaunch: true }). Relaunch uses the current context. Call init only once per page. See the reset reference for failure handling and relaunch behavior.