Customising

Most of the look is set per bot in the admin panel (Face, Appearance & embed and Behaviour tabs), so it is the same on every page. A page can override the presentation (never the agent's instructions, tools or security) with boot options.

Theme, accent and font

Setting	Values	Page override
appearance.theme.mode	light, dark, auto (follows the visitor's system setting)	theme, setTheme()
appearance.theme.accent	a #rrggbb colour; text on it is black or white, whichever reads better	accentColor
appearance.theme.radius	corner radius, 0 to 28 px
appearance.theme.font	system, inter, serif, mono

WirefaceChat.boot({ bot: 'pk_your_bot_id', theme: 'dark', accentColor: '#0ea5e9' });

// follow your site's own dark-mode switch
mySite.onThemeChange(dark => WirefaceChat.setTheme(dark ? 'dark' : 'light'));

The chat window is an iframe, so your site's CSS doesn't reach it. That is on purpose: the chat looks right on any site, and your styles can't break it.

Size and position

The window's size comes from the layout's settings (appearance.panel, appearance.drawer, appearance.floating); see Layouts and launchers. It is never taller than the browser window. The launcher's position, offset and size, and the zIndex of both, can be set per bot or per page.

The face

The Face tab picks the face (a catalogue face, or one made from a photo), its colours and motion, and its starting mood. In Appearance & embed:

• appearance.face.show shows the face at the top of the panel, drawer and inline layouts (visitors can hide it with the button in the header);
• appearance.face.size is small, medium or large;
• appearance.face.textReplies is mime (the mouth moves silently along with typed replies), still, or speak: typed replies are read aloud with the lips in sync, in the speaking voice from the admin's Voice tab (voice.cascade.tts; voice conversations don't need to be on). Visitors get a sound button to switch it off. Browsers only allow sound once the visitor has typed or clicked in the chat, so until then a reply is mimed. In the admin, turn it on with Voice > Read typed replies aloud.

The agent changes the face's expression as it talks: text models put mood tags such as [[mood:happy]] in their replies (the chat removes them before showing the text), and voice models use a silent express tool. Turn this off with face.expressions. The face's eyes follow the visitor's pointer, across your page too (unless the face's settings turn that off). Visitors who ask their system for reduced motion get a calmer face that doesn't follow the pointer.

Browsers without WebGL2 get a lighter 2D wireframe of the face, which still moves its mouth as the agent talks; if even that can't load, the face's picture is shown.

The chat's words

What	Where
The title and subtitle in the header	texts.title, texts.subtitle (empty: the agent's name and role)
The message box's placeholder	texts.placeholder
The first message	welcome.message, with {{agent.name}} and friends
One-tap questions under it	welcome.suggestedPrompts (up to 6)
The offline message	texts.offline
Every other label and button	texts.strings, by key: see Interface strings
"Powered by Wireface"	behavior.poweredBy

A page can replace interface strings too, which suits multilingual sites:

WirefaceChat.boot({
  bot: 'pk_your_bot_id',
  locale: 'de',
  strings: { send: 'Senden', newConversation: 'Neues Gespräch', stop: 'Stopp' },
});

Language

Two things decide the language:

• The agent's replies. With identity.languagePolicy: match_visitor (the default) the agent answers in the visitor's language; with fixed it always uses identity.language. The visitor's language comes from the locale option, else your page's <html lang>, else the browser. setLocale() changes it during a conversation: the server is told, and with match_visitor the agent answers in the new language from then on.
• The chat's own interface. It is English unless you replace the strings (above). Its lang attribute and text direction follow the locale option (or setLocale()), else the bot's identity.language: right to left for Arabic, Hebrew, Persian, Urdu and a few other languages.

Changing things at runtime

update() changes presentation options after boot; setTheme() and setLocale() are shortcuts:

const chat = WirefaceChat.get();
chat.update({ layout: 'drawer', launcher: { position: 'bottom-left' } });

A published change to the bot reaches open chats on its own: their windows reload the new settings and carry on the conversation.