Appearance
Colours, avatar, the chat button and the welcome screen, so the chat looks like part of your website.
Open the chatbot's Appearance. The preview updates as you change things; Publish the design puts it live.
Colours and window
| Setting | |
|---|---|
| Main colour | Buttons, visitor messages and links. |
| Window | Light, Dark or Automatic (follows the visitor's system). |
| Visitor and chatbot messages | Their colours; automatic picks readable ones. |
| Font | A clean system font, or your website's font. |
| Width and corners | Window width, window corners and message corners. |
Logo and avatar
- Logo: PNG, JPG or WEBP up to 2 MB, shown on the welcome screen.
- Avatar: the chatbot's face, in the header, next to its messages and on the button.
- Header background: a colour, a gradient or a picture.
Chat button
Shape (circle, rounded, square), icon (speech bubble, sparkles, question mark or the avatar), colours, size, side (left or right), distance from the side and bottom, and an optional label next to it, e.g. "Any questions?".
Welcome screen
Open the chat on a welcome screen, or straight into the conversation. The welcome screen can show:
- a title, text and background picture;
- suggested questions, up to 6; a click sends the question;
- help articles with search;
- contact links (phone, email, links starting with
https://) as icons; - a promotion card for an offer, a new product or an event, with a button.
An empty chat can open with a picture or mascot (a PNG with a transparent background looks best), a large greeting and ideas to ask.
Widget mode
| Mode | How it looks |
|---|---|
| Bubble | A round button in the corner (default). |
| Side panel | Opens full height on the right on desktop. |
| Embedded | Sits inside your page where you put <div data-oryvox-embed></div>. |
On phones the chat always opens as a full-screen sheet. The chat uses the visitor's language for its own words, in 38 languages, and writes right to left for Arabic and Hebrew.