website logo
⌘K
Getting started
Create your Serviceform account
Pixel
Your Dashboard
Conversational tools
Serviceform glossary
FAQs
Cookies
GA 4 and DataLayer
Send events into GA4 from DataLayer
Cookie controller
Website analytics (Insights)
Custom event tracking
Chatbot
Design your chatbot
Build your chatbot
Settings
Preview your chatbot
Install your chatbot
Duplicate your chatbot
Translate your chatbot
Facebook Chatbot
Advanced
Live chat
Livechat teams
Trigger your livechat
Set hours
Desktop notifications
SMS notifications
Livechat in Serviceform App
Talk with the clients
Popup
Create your first popup
Popup type settings
Popup content
Popup design
Thank you page
Tracking and advanced settings
Language
Install your popup
Leadbar
Create your Lead bar
Types of Bars
Form
Build your form
Question types
Settings and design
Custom CSS & JS
Install your form
Emails
Install tools
Insights
Website analytics
Flow statistics
Live chat statistics
Ourly Calendar
Setup Ourly
Events
Sync Calendar
Email signature
Add email signature to Gmail
Social Inbox
Connect Facebook and Instagram
Meta Business Suite
Integrations
Sending lead via Webhooks
Google Analytics
Zapier and Webhooks
HubSpot with Zapier webhooks
Collect payments with Stripe
Leads
Filter leads
Export leads as XLS
Account
Settings
Change password
Plan settings and invoice history
Docs powered by archbee 
9min

Colors and icons

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



Updated 03 Apr 2022
Did this page help you?
Yes
No
UP NEXT
Welcome page
Docs powered by archbee