Script tag

The simplest way in: one tag, before </body> on every page that should have the chat.

<script src="https://chat.example.com/widget.js" data-bot="pk_your_bot_id" async></script>

widget.js is small, loads async (it never blocks your page), and draws only the launcher at first. The chat window loads when the visitor shows interest (hovers, focuses or touches the launcher) or opens it. Add your site to the bot's allowed origins in the admin panel first, or the chat won't load there.

/widget.js is always the server's current version, cached for five minutes. To fix the version, see Pinned version and SRI.

Settings on the tag

data-* attributes set the most common boot options:

<script src="https://chat.example.com/widget.js" async
        data-bot="pk_your_bot_id"
        data-layout="drawer"
        data-launcher="tab" data-edge="left" data-align="center" data-label="Help"
        data-theme="dark"></script>

Attribute	Option
data-bot	bot
data-host	host (only when the script is served from somewhere else)
data-layout	layout: panel, drawer, floating, inline
data-target	target (a CSS selector, for the inline layout)
data-theme	theme: light, dark, auto
data-locale	locale
data-launcher	launcher.type: bubble, tab, none
data-position	launcher.position
data-edge, data-align, data-label	launcher.edge, launcher.align, launcher.label
data-storage	storage: local, session, none
data-open="true"	open
data-debug="true"	debug
data-preview	preview
data-autoboot="false"	load the API without starting a chat

Settings from JavaScript

For anything else (the visitor's identity, page tools, context, strings), set window.wirefaceChatSettings before the tag. It takes every boot option, and wins over the attributes:

<script>
  window.wirefaceChatSettings = {
    bot: 'pk_your_bot_id',
    accentColor: '#0ea5e9',
    context: { plan: 'pro' },
    strings: { send: 'Go' },
  };
</script>
<script src="https://chat.example.com/widget.js" async></script>

Or start the chat yourself with WirefaceChat.boot() once widget.js has loaded (leave out data-bot):

<script src="https://chat.example.com/widget.js" async></script>
<script>
  function startChat() {
    WirefaceChat.boot({ bot: 'pk_your_bot_id', launcher: { position: 'bottom-left' } });
  }
  // widget.js is async: it may already be there, or still loading
  if (window.WirefaceChat && WirefaceChat.version) startChat();
  else window.addEventListener('wirefacechat:loaded', startChat);
</script>

To call the API before widget.js arrives, use the queue stub.

Notes

• Loading it twice is harmless. A second copy of widget.js does nothing, and ignores its own data-* attributes. For a second bot, see Multiple bots.
• The chat survives page changes. On a multi-page site the conversation continues on the next page, and a chat that was open reopens (except on phones).
• Your own buttons can open it: <button data-wireface-open>Chat</button>. See Layouts and launchers.
• Content-Security-Policy: if your site sends one, see Content-Security-Policy.

examples/plain-html/ in the repo is a complete page. Serve it against your server with node examples/serve.mjs plain-html --host https://chat.example.com --bot pk_your_bot_id (then add http://localhost:5500 to the bot's allowed origins).