VaxAssist Chat — Test UI

Initialize the widget

Load the script and call init() once per page. This mounts the widget in a shadow DOM and registers all event listeners, but does not open the chat.

<script src="..."></script>
<script>
  VaxAssistChat.init({
    apiUrl: 'https://your-api/chat', // required
    apiKey: 'your-api-key',          // optional
    debug: false,                    // optional — enables dev diagnostics
    mapsApiKey: 'your-maps-key',     // optional — omit to disable map views
    mapsMapId: 'your-map-id',        // optional
    openOnLoad: false,               // optional
    openOnLoadParams: 'booking',     // optional - only used when openOnLoad is true
    theme: 'relief',                 // optional — omit for default theme
    attributionContext: { source: 'pfa' }, // optional — always 'pfa' for this integration
  });
</script>

Prop	Type	Required	Description
apiKey	string	No	API key sent with each request for authentication. Required in every deployed environment (dev, staging, production) — only local development runs without one.
apiUrl	string	Yes	Base URL of the chat API the widget sends messages to.
attributionContext	{ source?: string }	No	The widget attaches these values to every analytics event it fires. Set them once at init(); they hold for the page session. source: the host page identifier. Always pass 'pfa' so PH consumers can separate widget events from other Pfizer properties. Values that change per button click, like experimentId or locationId, belong on open() instead. See "Open using JS API" below.
debug	boolean	No	Enables developer diagnostics: MCP tool-call chips and verbatim accent markers on MLR-approved copy. Defaults to false.
mapsApiKey	string	No	Google Maps JS API key. When provided alongside mapsMapId, map views are enabled in applicable chat flows (e.g. provider results). Omit to disable all map rendering.
mapsMapId	string	No	Google Cloud Map ID. Required alongside mapsApiKey to enable numbered pins via AdvancedMarkerElement. Provision it in Google Cloud Console under the same project as your Maps API key.
openOnLoad	boolean	No	When true, the chat opens automatically as soon as the widget is ready. Defaults to false.
openOnLoadParams	'booking' | 'eligibility' | { message: string } | { flow: 'booking' | 'eligibility' }	No	A first message to send automatically once the widget is ready. Only takes effect when openOnLoad is true — ignored otherwise. 'booking' and 'eligibility' send a built-in message that starts the corresponding flow; pass { message: '...' } to send your own text instead. The same values can be passed to open() — see Option 2 below — to start a flow from a button click instead of on page load.
theme	"relief"	No	CSS class name applied to the widget root. Use 'relief' for the Relief theme or omit for the default Pfizer theme. See "Changing the theme" below for options to change the theme dynamically.

Open on Load

Pass openOnLoad: true to init() to open the chat automatically after the page loads. Useful for deep-links — e.g. append ?chat=true to any URL and evaluate it before calling init(). Add openOnLoadParams to also send a first message on load — e.g. ?chat=true&start=booking.

VaxAssistChat.init({
  apiUrl: 'https://your-api/chat',
  openOnLoad: new URLSearchParams(location.search).has('chat'),
  openOnLoadParams: 'booking',
});

Open using JS API

Call VaxAssistChat.open() at any time from your own scripts — on a button click, after a form submission, or any other event. Pass 'booking', 'eligibility', or { message: '...' } to also send a first message — e.g. from a Mad-Lib-style component where the user picks options elsewhere on the page before opening the chat. The chat always starts fresh: any in-progress conversation is cleared the moment the widget transitions from closed to open.

Pass a second argument, attributionContext, to attach CTA-level values to analytics events. Use this for values you only know at click time, not at page load. The widget merges this with whatever you passed to init(); values from open() take precedence on any field that appears in both. Once set, CTA attribution sticks for the rest of the session. A later open() with no second argument leaves the previous values in place.

Three CTA-level fields:
experimentId: the A/B experiment key or variant ID for this CTA. Pass it when the button is part of an experiment so every downstream event in that conversation carries the experiment context. Omit it when no experiment applies.
ctaLinkName: the analytics name of the CTA that opened the widget.
locationId: the Timetable location ID for the store or clinic associated with this CTA. Pass it when the button is on a specific store page or links to a particular location, so booking events carry the right location. Omit it for generic "Book a vaccine" CTAs that let the user choose a location.

Open with custom message

<!-- No attribution: inherits whatever was set at init() -->
<button onclick="VaxAssistChat.open()">Chat with us</button>

<!-- Shorthand flows -->
<button onclick="VaxAssistChat.open('booking')">Book an appointment</button>
<button onclick="VaxAssistChat.open('eligibility')">Check eligibility</button>

<!-- Custom message -->
<button onclick="VaxAssistChat.open({ message: 'What vaccines do you offer?' })">
  Ask about vaccines
</button>

<!-- CTA-level attribution: experimentId and/or locationId as second argument -->
<button onclick="VaxAssistChat.open('booking', { experimentId: 'exp-abc', locationId: 'store-123' })">
  Book at this store
</button>

<!-- Attribution only, no flow: opens the chat without sending a first message -->
<button onclick="VaxAssistChat.open(undefined, { locationId: 'store-123' })">
  Chat (store context)
</button>

Open using custom DOM event

Dispatch vaxassistchat:open on document. Useful when you don't have a direct reference to the widget script — e.g. inside a framework component, CMS template, or tag manager snippet. Pass the same start params via detail.

The DOM event does not support CTA-level attribution. If you need to pass experimentId or locationId, call VaxAssistChat.open() directly instead.

Open chat (DOM event)

document.dispatchEvent(new CustomEvent('vaxassistchat:open'))
document.dispatchEvent(new CustomEvent('vaxassistchat:open', { detail: 'eligibility' }))

Changing the theme

Call VaxAssistChat.setTheme() or dispatch vaxassistchat:settheme on document to change the widget theme at any time without re-initializing. Useful when the host page has its own theme toggle — wire this directly to that toggle so the chat theme stays in sync. Pass 'relief' to switch themes, or undefined to revert to the default.

<!-- JS API -->
<button onclick="VaxAssistChat.setTheme('relief')">Switch to Relief theme</button>
<button onclick="VaxAssistChat.setTheme(undefined)">Switch to default theme</button>

<!-- DOM event -->
document.dispatchEvent(new CustomEvent('vaxassistchat:settheme', { detail: 'relief' }))
document.dispatchEvent(new CustomEvent('vaxassistchat:settheme'))

API keys