Chatbot
Design your chatbot

Colors and icons

7min

Buidling the base for the design of your chatbots starts with choosing your bot type. Depending on which one you choose the chatbot builder will slighlty alter with different advanced options.

These advanced options will be introduced in more detail later on.

Document image


After you have chosen the bot type it is time to upload your logo on to the chatbot.

Serviceform offers three different placements of logos or pictures.

  • The first one is the "Logo (Chat logo)" which will display by default inside the welcome page (read more about that later on) and as the icon in the bottom corner if nothing is chosen separately for that.
Document image

  • The second one is the Avatar (image of person chatting). This one will be displayed next to the messages the chatbot is sending to your clients, and in the chatbot popup.
Document image

  • The third one is the Icon (Icon in bottom corner), this will work as the button to open your chatbot for further conversations. If left without an image or logo the icon will get an image from the Logo (chat logo).
Document image

  • Next up you can choose your main colors of the chatbot. This is done by simply clicking on the pre-selected color-blocks or alternatively you can add the hex-code of your choice.
Document image




  • More specific colors are chosen with the action color. This will change the color of buttons (button text) and icons (file upload icon, send message icon).
Document image




The chatbot also offers customer-side tools to make interaction with the bot easier.

Instead of refreshing the whole webpage, the customer can have an option to refresh the chat with the bot and start over with a new path. This is done by toggling on (show refresh button) or off (hide the refresh button).

Document image




When enabling the welcome page a back button will appear in the top left of the chatbot. This one can be toggled off in the same way as the refresh button.

Document image




At the bottom of the chatbot there is a text area for customers to write in when talking to the bot or through livechat. This can be hidden if not needed by toggling it off or on.

Document image




We also offer the opportunity to add a phone button that is displayed to mobile users. Clicking on the button will directly call the number of your choice. This is done by adding a phone number in the box below the 'phone button' toggle.

Document image




With the language dropdown you can choose in what languages the default text are shown in your chatbot.

Document image