The chat's home screen: greeting, logo, tiles and tabs

The home screen is the first thing a visitor sees when they open the chat: a greeting, your logo, a coloured header and up to ten tiles. Below that they switch between the tabs Home, Messages and Help. Without a home screen, the chat opens straight into the conversation.

You will find the settings under /app/projects/{id} in the Appearance tab, section Widget home screen.

The live preview

Next to the form runs the real widget, fed from your entries. What you type appears in the preview immediately. Nothing is saved by it – only the Save button applies the change. After saving, it takes up to a minute until your visitors see it.

The Help tab is missing in the preview: it depends on the published articles of your help centre, which the widget fetches from your own domain. On your website it is there.

The switches

• Show the home screen – Off (default): the chat opens straight into the conversation, and there is no tab row. On: the chat starts on the home screen.
• Show the Help tab – shows the published articles of your help centre, with a search. The tab only appears once the help centre has an address and at least one published article. How to set up the help centre is described in the product handbook.
• Show the latest message on the home screen – On (default): returning visitors see where they left off and are one click away from the conversation.
• Show the “Talk to the team” button below the message field – On (default). The button appears while the AI assistant is answering. When nobody from your team is online, it reads “Leave the team a message”.

Logo, colours and greeting

• Logo on the home screen – an address starting with https://, or an image as data:image/…. 255 characters at most. Empty means: no logo, then only the greeting shows.
• Header gradient, from and to – two colours for the coloured header of the home screen. Without a value the widget uses your brand colour (see Colours, font and theme).
• Greeting – the large line at the top. Empty means: our translated text (“Hi there 👋”).
• Line below it – the smaller line. Empty means: “How can we help?” in the visitor's language.

You write the greeting, the line below it and the texts of the tiles in the project's default language (Installation → Basics). 400 characters at most per text. There is no separate translation per language for these: what you enter is also seen by visitors whose widget runs in a different language. So write the home screen in the language most of your visitors read. If you leave the greeting or the line below it empty, our text appears in the visitor's language.

How the header is styled (gradient, flat or glass) and how dense the home screen looks is set under Appearance → Brand → Style, see Chat window: style, size and side panel.

Tiles

Tiles are large buttons on the home screen. You can create up to ten. A tile without a heading is not shown – and that is also how you remove one: clear the heading and save.

Each tile has:

• Behaviour – what a click does:
• go to the conversation – opens the conversation. If Target contains a sentence, it is written into the visitor's input field. It is not sent.
• open a link – opens the address in Target. It must start with https://, otherwise it is not saved.
• open Help – switches to the Help tab.
• leave a message – opens the form for a message by email.
• Heading – required, otherwise the tile does not appear.
• Line below it – optional.
• Target – depending on the behaviour, the address or the pre-filled sentence, 200 characters at most.

The whole home screen (tiles, texts and promo card together) may be at most 16 KB in size when saved. Ten tiles with heading and second line stay far below that. If it gets too much, your account names the reason instead of silently leaving something out.

Promo card

On the home screen and/or at the top of the conversation you can show a card for your own offer, for example your paid plan. It is under Appearance → Promo card and has its own guide: The promo card in the chat. For the placement “start page”, the home screen has to be switched on.

Choosing a tab on opening

Which tab is in front when the chat opens can be set per link or call – with data-rc-tab or the tab option:

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

ReactiveChat('open', { tab: 'home' });

Allowed are home (home screen), msg (conversation) and help (help). If the tab does not exist, the chat simply opens as usual. More on this in Open the chat from your own link or button.

If something does not appear

• No tab row: is Show the home screen ticked and saved?
• No Help tab: does your help centre have an address and at least one published article?
• A tile is missing: does it have a heading?
• The logo is missing: does the address start with https:// or data:image/?

You can change the texts of the tabs (“Home”, “Messages”, “Help”) and of the built-in tiles under Texts and languages.