The Whisky Exchange

FOR THE TWE DEVELOPMENT TEAM

Integration workbench

Developer Mode

Public API

Basket result

Demo basket only. Recommendations always come from Constructor.

Test host callback isolation

Event console 0

Every named callback is mirrored here through onEvent. Select an event to inspect its payload and Constructor identifiers.

Event Console (Raw) 0 events / 0 requests

Loading raw capture…

Native EventSource events (original data strings) — Constructor responses observed before SDK processing, not onEvent callbacks or a byte-for-byte SSE capture. Passive listeners observe the same native request; transport, parsing and rendering are unchanged. Status unavailable via EventSource. Only event types the SDK subscribes to can be observed; unregistered types, SSE comments, framing and incomplete frames are unavailable. An end row means a real native event was observed, not an inferred SDK close.

Expand a request, then an event, for full event data, products and metadata. Match Turn labels and intent_result_id across both consoles. Receipt timestamps include milliseconds; application timestamps above are later callback times. Request URLs retain supplied domain, guard, thread_id, num_result_events and num_results_per_event; these counts are limits, not promises. Sensitive values are redacted consistently; no request headers or bodies are logged. Additional Constructor fetch responses are captured if used. Use synthetic prompts, not customer information.

INTEGRATION REFERENCE

Host Application Callbacks

Callbacks available to the host application when integrating the AI Shopping Agent.

Example host integration

Complete example: all callbacks and onEvent

IMPLEMENTATION

Host Application Integration

Production-ready embed

Use this minimum integration to load and control the AI Shopping Agent from an existing page. The published bundle includes React and its runtime dependencies; load the accompanying stylesheet before initialising the agent.

Required assets

Load both assets from the production host. Font Awesome is included below only because the example keeps the optional sparkles icon.

https://asa-demo.thewhiskyexchange.com/twe-shopping-agent.css
https://asa-demo.thewhiskyexchange.com/twe-shopping-agent.js

No separate React, configuration file or package installation is required for the published TWE bundle.

The cta-button classes belong to the host page. Keep them when the host already loads TWE’s button styles, or replace them with the host’s own button classes.

Initialisation and callbacks

window.TweShoppingAgent.init(options): Mounts the agent. Set elementId to the ID of the mount element; it defaults to twe-shopping-agent.
Agent name and visible copy: Are resolved by the React application from its central content settings. Optional host controls include dialogWidth, persistence and debug.
config.EnableBetaFeedbackForms: Shows the temporary name suggestion and feedback forms. It defaults to true; set it to false to remove the whole feature.
events.onAgentOpen(event): Registers a named callback. The corresponding event envelope has eventName: "agent_open".
onEvent(event): Receives every event after its named callback. See the callback reference above for the complete event list.

Public instance methods

open(), close(), expand(), restore(), setDialogWidth(width), resetConversation() and destroy().

The hosted production bundle is preconfigured. A separately built private bundle must receive a Constructor key through apiKey or its build-time configuration.

twe-shopping-agent.js contains the React application used by the host page. Load it before initialising or calling the AI Shopping Agent. See the configuration and callback references above for all supported options.