JavaScript API

The embed is intentionally declarative. There is no send(), identify(), or track() — the visitor drives the conversation; you control configuration. The element exposes one method (refresh) and a set of reactive properties for runtime overrides.

Grab a reference

const chat = document.querySelector('zupport-chat')

refresh(options)

Re-fetches config.json, scenarios.json, and vectors.json and re-initialises the engine. Returns a Promise.

await chat.refresh({
  clearMessages: true,   // reset the conversation
  bypassCache: false,    // skip IndexedDB on re-fetch
})

Options:

• clearMessages (boolean, default false) — wipes the current conversation. Useful right after a config change so the visitor sees the new greeting.
• bypassCache (boolean, default false) — skips IndexedDB on this fetch, forcing fresh downloads.

Reactive properties

Each property mirrors a data-* attribute. Setting one re-renders the element and (for properties that affect data sources) triggers a refresh.

chat.assistantId = 'another-assistant'
chat.modeOverride = 'desktop'
chat.engineOverride = 'llm'
chat.open = true
chat.preview = false
chat.disableCache = false
chat.modelBaseUrl = 'https://cdn.mycompany.com/models'

Property table

Common patterns

Open or close the panel programmatically

Set chat.open = true from anywhere on the page — for example a “Need help?” button:

document.querySelector('#help').addEventListener('click', () => {
  document.querySelector('zupport-chat').open = true
})

Swap the assistant at runtime

Useful for multi-brand sites or A/B tests across knowledge bases:

// Swap assistants without reloading the page
chat.assistantId = 'fr-assistant'
await chat.refresh({ clearMessages: true })

Force a fresh download (debug)

await chat.refresh({ bypassCache: true })