The visual factors of the chatbot, believe it or not, have a great impact on the success of the tool.
Design is not the most technical part of building a chatbot, however, it is crucial for user experience, which is ultimately the goal of implementation of a chatbot in any company. Here we will show you how to design and style your chatbot in ChatCompose.
The visual factors right now are not very complex but they are influential. In ChatCompose you can decide about the frame color, the background color, the typeface of the text and add if you like the company logo to appear in the conversation interface.
You can also add an avatar instead of the one that appears by default, so that it appears as the bot in each reply in the conversation.
How can you customize your chatbot? The steps are very simple, you just have to navigate within the user interface to Install on the left side panel and in the drop-down menu select within Web Configuration, the Customization option. Once there, you will find all the aforementioned customization options:
To choose the main color of the bot (which is the color of the frame and the bubble) you can position the cursor in the color box and a spectrum of colors will appear through which you can move the cursor until you find the one of your preference.
You can also enter a color code that you already have defined. The same applies to the choice of background color, which for readability terms we recommend white or any neutral color.
As for the typeface of the text, there are more than 40 fonts available from which you can choose.
Optionally, you can add your company logo, an image with dimensions of 40 x 40 and upload your own chatbot avatar from the files on your computer.
The last customization option is the chatbot design, which basically indicates how the chatbot interface will be presented to the user. You have three options to choose from, select the one that best suits you:
Once you edit all of these customization factors to your liking, you can click style or restart.
Then you can test the chatbot to see how it looks. If you don't like the result, you can edit again as many times as you want.
To do the test, navigate to Chatbots and in the menu that appears, select Test Url. A different tab will automatically open where you can check the bot's design elements as well as test the conversation.
Each of the elements that you edited in Personalization will be visible and you can change them as many times as you want.
