Chat window and customisation

What your visitors see, and the six settings that make it yours.

The chat window is what your visitors see: a button at the bottom right of the page that opens the chat. The Chat window tab of the admin has the six settings that make it yours.

01 · The six settings
Title

At the top of the chat window, and the tooltip of the chat button.

Default
Ask this site
Length
Required, up to 100 characters
Text of the chat button

Shown next to the icon of the button that opens the chat, for example Ask us. Empty: the icon only. On phones the button always shows the icon only.

Default
Empty
Length
Up to 40 characters
Greeting

The first message in the chat, shown before the visitor writes anything and again after New chat. Line breaks are kept, and Markdown works: **bold** and links written as [text](https://your-site/page).

Default
Empty: no greeting
Length
Up to 1,000 characters
Placeholder

The grey text in the empty message box. When a conversation has used all its questions, it is replaced by a note to start a new chat.

Default
Ask a question…
Length
Up to 200 characters
Logo

Your logo on the chat button, in place of the chat icon, and in the header of the chat window. Tick Remove the logo and save to go back to the icon. The file is checked to be a real image before it is kept, in your data folder.

Files
PNG, JPEG, GIF or WebP
Size
Up to 1 MB and 4,096 pixels on each side
Accent colour

The colour of the chat button, the header of the window and the links in the answers, written as a hex code like #c05520. Pick one your white text reads well on: the button and the header carry white text and icons.

Default
Empty: #c05520
Format
# and six hex digits

Write the title, the button text, the greeting and the placeholder in your site’s language: they are shown exactly as you write them. A change reaches visitors on their next page view.

02 · What your visitors get
  • The window. 380 by 600 pixels at the bottom right on a computer; on a phone it fills the screen.
  • The header. Your logo and title, ? for the commands, New chat and the close button.
  • Resizing. Drag the corner mark at the top left of the window, or focus it and use the arrow keys. The size is remembered in that browser.
  • Answers as they are written, with a line that says what the assistant is doing until the first words arrive. The window follows the answer down; a visitor who scrolls up to read stays where they are until they scroll back to the bottom.
  • Links open in a new tab, so the conversation stays where it was.
  • Typing. Enter sends, Shift and Enter starts a new line. Arrow Up and Arrow Down bring back the messages sent earlier. A / at the start opens the list of commands. Escape closes the window.
  • One question at a time. While an answer is written, the message box takes no typing and the send button waits.
  • The conversation is kept in the visitor’s browser, its last 100 messages: it survives a reload and a move to another page of your site, it is the same in every tab of your site, and a window left open stays open on the next page. New chat empties it.
  • The captcha, when it is on, comes before the first question. See Captcha.
03 · How it sits on your page
  • The chat lives in an isolated part of the page (a Shadow DOM): your stylesheets do not restyle it, and it does not change the look of anything of yours.
  • It takes the font of your page, so it reads like the rest of your site.
  • It stays above your content, and it is left out when the page is printed.
  • The texts of its own buttons and messages, such as New chat or an error, are in English. Your four texts above are shown as you write them.

Everything you can change is on the Chat window tab; there is no theme file to edit.

The Opensolr Chat Bot Client is open source and MIT licensed. Questions about your Opensolr account, index or plan go to opensolr.com/contact; questions about the client itself belong on GitHub.

Opensolr Chat Bot Documentation