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
    openOnLoad: false,               // optional
    openOnLoadParams: 'booking',     // optional - only used when openOnLoad is true
    theme: 'relief',                 // optional — omit for default theme
  });
</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.
debug	boolean	No	Enables developer diagnostics: MCP tool-call chips and verbatim accent markers on MLR-approved copy. Defaults to false.
openOnLoad	boolean	No	When true, the chat opens automatically as soon as the widget is ready. Defaults to false.
openOnLoadParams	'booking' | 'eligibility' | { message: string; reset?: boolean } | { flow: 'booking' | 'eligibility'; reset?: boolean }	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. Add reset: true to clear any existing conversation first. 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. Add reset: true if the chat may already have an in-progress conversation that this should replace rather than continue.

reset Open with custom message

<button onclick="VaxAssistChat.open()">Chat with us</button>
<button onclick="VaxAssistChat.open('booking')">Book an appointment</button>
<button onclick="VaxAssistChat.open({ flow: 'booking', reset: true })">
  Start a new booking
</button>
<button onclick="VaxAssistChat.open({ message: 'What vaccines do you offer?' })">
  Ask about vaccines
</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.

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