Layouts and launchers

Set the layout and launcher for every page in the bot's Appearance & embed tab. A page can override them with data-* attributes on the script tag or boot options.

Layouts

Layout	What it looks like	Size settings
panel	A chat window that opens next to the launcher, with the face at the top	appearance.panel.width, .height (400 x 680)
drawer	A full-height window along one side of the page	appearance.drawer.width (420), .side, .modal
floating	The face floats over the page, with the agent's words as a caption and a small message box; a button opens the full conversation	appearance.floating.width, .height (300 x 420), .composer
inline	The chat drawn inside an element of your page, always open, with no launcher	fills its container: give the element a height (at least 420 px is used)

<!-- a drawer on the left -->
<script src="https://chat.example.com/widget.js" data-bot="pk_your_bot_id" data-layout="drawer" async></script>

Drawer. appearance.drawer.side is left, right or auto (the launcher's side). With modal on, the page behind is dimmed and stops scrolling, and a click on it closes the drawer.

Floating suits a "guide" that talks: the face is the main thing on screen. Turn on voice for the best effect. Its box is transparent around the face: clicks there reach your page, so the face doesn't block the content under it.

Inline draws the chat into an element you choose, for a support page or a help centre:

<div id="support-chat" style="height: 640px"></div>
<script src="https://chat.example.com/widget.js" data-bot="pk_your_bot_id"
        data-layout="inline" data-target="#support-chat" async></script>

The chat fills the element, so give it a height (the chat is never shorter than 420 px).

The target is a CSS selector (or, with boot(), an element). If it isn't on the page, the chat falls back to a panel with a launcher and says so in the console. You can have an inline chat and a launcher for the same bot on one page: they share the conversation. examples/inline-support/ in the repo is a help page with an inline chat.

On phones (narrow screens, or touch screens that are short), an open panel, drawer or floating chat fills the screen unless you turn off appearance.mobile.fullscreen.

Launchers

The launcher is the button that opens the chat. It sits in a shadow root on your page, so your CSS can't change it by accident.

Type	What it is	Settings
bubble	A round button in a corner, showing the agent's face (or a chat icon)	position, size, icon, offset
tab	A tab docked on an edge, with a label	edge, align, label, icon, offset
none	No launcher: open the chat from your own button	position (where the window opens)

<!-- a tab on the right edge, at the bottom -->
<script src="https://chat.example.com/widget.js" data-bot="pk_your_bot_id"
        data-launcher="tab" data-edge="right" data-align="end" data-label="Questions?" async></script>

// the same with boot()
WirefaceChat.boot({
  bot: 'pk_your_bot_id',
  launcher: { type: 'tab', edge: 'right', align: 'end', label: 'Questions?' },
});

• Icon: face (the default) shows the agent's face picture, breathing gently on the bubble (still for visitors who ask for reduced motion); avatar shows the same picture without moving; chat shows a chat icon.
• Bubble position is a corner: bottom-right (default), bottom-left, top-right, top-left. offset moves it in from the edges (20 px each by default); size is its diameter (60 px).
• Tab edge is right (default), left or bottom; align is start, center or end (default). On the side edges start is the top; on the bottom edge it is the left.
• The launcher shows a count of replies that arrived while the chat was closed.
• hideOnMobile: true hides it on phones (the chat still opens from your own buttons).

Your own button

Any element with data-wireface-open opens the chat. Give it a bot id when there's more than one bot on the page:

<button data-wireface-open>Chat with us</button>
<a href="#" data-wireface-open="pk_your_bot_id">Talk to sales</a>

Or call the API:

document.querySelector('#help').addEventListener('click', () => WirefaceChat.open());

With launcher: { type: 'none' } (or data-launcher="none") there's no launcher at all, and these are the only way in. show() and hide() show and hide the launcher from code.

The greeting bubble

The bot can show a short greeting next to the launcher after a delay ("Hi there! Any questions?"). Clicking it opens the chat. Set it up under greeting in the bot's Appearance & embed tab: the text, the delay, how often (session, visitor or always), which pages (path patterns such as /pricing*), and whether to show it on phones. See Configuration.

When someone from your team replies while the chat is closed, their message shows in the same bubble.