Skip to main content

How to Create a Home View

The Home View is a starting page that you can put in front of the chat like a "Home" page. The chat does not start directly in a conversation but in a menu that allows you to jump to different LoyJoy chat experiences.

Are you ready to take your chat experiences to the next level and discover the possibilities of the LoyJoy Home View? Great - You are in the right place!

This article will guide you through the features of the LoyJoy Home View and explain how to use them in the best ways. The Home View lets you create a responsive web application to easily navigate through different conversational customer experiences. In addition to your well-known LoyJoy experiences, let me introduce you to our LoyJoy Stories. Present your content in exciting social-media-like Stories and much more.

Set up the Home View​

Open the Home View overview by clicking on Home Views next to your experiences. You can create a new Home view or enter a copy token in the upper right corner.


Before entering any widgets, let’s start by assembling the body of your home view. First, choose how compact you would like your header as it influences your ability to enter a title or text at the beginning.

Body Body

You can further alter your header text and background color, as well as the background of the body.

Now you can add some fun widgets to fill your Home View!

p.s. Find some fun alterations for your widgets explained under the group widget!

To add widgets, click the plus of the widget of your choice.

Add Widgets

Drag and drop the components until they are in your preferred order.

Switch Widgets

Hero Widget​

The hero widget will be a cover image with an optional greeting text field.

Hero widget

Introduce your customers and jump directly into one of your experiences by linking it here.

Hero Settings

Stories Widget​

Through stories, you can create exciting insights for your customers. Provide enjoyable content by adding small video sequences in the form of stories to your Home View.

Stories Widget

First, you add a new story.


Create your stories with the free tool Make Stories. With this tool, you can build your stories. Be creative and make your personal story! Get the Link and paste it to your LoyJoy Home View Stories.

Story Settings

Back in the LoyJoy backend, you can add an avatar image and a logo. You are also able to enter tags for specific Storys that can help you later.

Story Tag

If you only want to display certain Stories, just choose the Tags you gave your Stories!

Story Tags

Let your customer jump directly into one of your experiences by calling to action and linking an experience to your story.

Watch your Story in the preview and go live!

Groups Widget​

Use the groups widget to place your experiences directly into your Home View and make them easily accessible for your users. Click on Add group to get started!


Before you enter your experiences, select the settings button on the right to find additional ways to personalise the widget. You can find the settings on any widget you enter into your Home View.

Group Settings Group Settings

You can enter a title, alter the colours and layout. Furthermore, you can decide if the widget should be styled as a card. See below what the card style looks like in your Home View.

Group card Group card

To select which experience groups to display in the Home View just active the button of each experience group. Add an image and avatar image to each experience of your Home View and choose a title and a slogan.

Add Group widget

If you wish to add multiple groups into your Homeview use an individual Group Widget for each one.

Add multiple Group widgets

Design your individual Group Widgets to your liking!

Multiple Groups

Your Homeview should look like this with multiple Group widgets!

Multiple Groups in Chat

Notifications Widget​

This widget presents a message for the customer. Call out for action, excite your customer or guide them - all possible by using the notifications widget.

Notification Widget

Roster Widget​

The roster shows the customer's previous chats and interactions with your chat experiences.

If you want the roster to be displayed in the home view, active the button.


Let your customers go back to previous conversations just like they would do while chatting with a friend.

Search Widget​

In the search widget your customers can search through LoyJoy experiences and jump right into them.

Search widget

Add a Title and Search pharse to help your customers.


Web Component Widget​

Here you are able to integrate a web component for your customers. "Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements." Wikipedia

For example the following web component defines a web component with the tag hello-world. To integrate the web component in LoyJoy, (1) deploy the following JavaScript snippet as a file to a Web hosting of your choice, (2) enter the URL to this file in LoyJoy as the URL of web component and (3) enter hello-world as the HTML tag of the web component.

(function () {
class HelloWorld extends HTMLElement {
constructor () {
this.attachShadow({ mode: 'open' })

* sic! firefox requires methods to be defined in constructor

this.someAttribute = () => this.attributes['foo']?.value

this.render = () => {
this.shadowRoot.innerHTML = `
<div class="hello-world">
Hello world

const helloWorld = this.shadowRoot.querySelector('.hello-world');

helloWorld.onclick = () => {
this.dispatchEvent(new CustomEvent('hello', { detail: { foo: this.someAttribute } }))

connectedCallback() {
if (!this._rendered) {
this._rendered = true

if (!customElements.get('hello-world')) {
customElements.define('hello-world', HelloWorld)

Web Component

Awesome! Now you are a Home View expert and ready to build your own LoyJoy Home View for your brand! πŸŽ‰