07 Branding basics

Everything still looks a little flat. But there is a solution for that, too. Easily customize the look of the chat to your liking!

Subtitle

Let's go back to our 'Hello World' example and give it a proper styling. So currently it's kind of looking boring, right? let's change that by going to the Branding tab. Here you can click through all the elements of the chat UI and change the look and feel. It starts here on the conversation part, you see we have the header part, we have a part where we can add so-called persistent quick replies and we have the footer, also the chat bubble ,the chat bubble can have a call to action graphic or it can have what I strongly suggest a chat preview. Now let's dive a bit deeper here in the conversation. I will choose a main color: For example I could type it in or I can use this nice Color Picker here. You can also change the speed of the chat. So for example when it's set to instant there will be no typing indicator at all. For very slow there will be a long typing indicator. You can also change the storage time of the history of the chat, especially if you're producing or still working on a prototype I would set this to zero minutes, because if you share the link of the landing page with your colleagues and friends and you make a change to the accommodation they won't have a history of the older version. You can also use a chat Avatar and the chat background and you can set the behavior on the desktop and on a mobile device. So for example if your chat is the key part of the website I would open it automatically. You can do it here! You can do it separately on mobile. On the desktop you can also decide on the size of the chat between this, which would be like more smartphone size up to a full screen size. Let's just try it out! You see the chat can even appear in full screen and a lot of sizes in between depending on where you want to put it. Let's switch it back to the smallest one. You can also upload a font. I would suggest to do that! Let's select a font here. And now you can see there's a font here and you could also download it if someone else uploaded it for you. You can have a separate different font for the header and for buttons and for titles. Right now I will keep it with just one font for all the purposes. Let's also click here on the header, you see here is an element to restart the chat, to close the chat, you can hide these or show these. There's also an option to show a chat reset which will basically reset the whole session of the chat. You could enter a title and a tagline. I prefer to upload what we call a header image which will appear centered. So let's select the LoyJoy logo for that purpose and you see here for all image uploads you have an optional optimal size. You can also have a different color here in the style sheet and you could pick the size of the fonts if you use any here. I don't use any text in the header. In the conversation you could now also change all the separate messages. So for example automated messages you can decide which color should they be filled, should they be outlined so outline - meaning they have a border but are not filled - and you have all the different buttons and style sheets for example for quick replies. And you could add the footer here, so you see in our little demo here the footer is not shown but we can add it. Then we would have to decide if it's using a search or natural language processing, we will dive into that deeper. So for now I will keep it off but what I would suggest is to add a chat preview here so for example 'hey here is the chat'. You can have up to three messages popping out and you can also directly jump with buttons into the experience into the chat flow so you could say 'choose red pill', 'choose blue pill' and then you can jump for example directly into the questionnaire for the red pill or for the blue pill into the goodbye. How does it look like? Here you go! Here are now - is the new font and here is what we call the chat preview. I can close the chat preview and here in the export settings you could also have a delay. I would set it for example to two seconds and let's say after 20 seconds you want to automatically switch it off again. So that's the chat preview. Of course I can open the chat as before. The other option is click on a button and you see the chat starts not at the welcome module but in a later stage. Alright, I hope you enjoyed!