Website logo
⌘K
Guide to Serviceform's WhatsApp for Business
Getting started
Create your Serviceform account
Pixel
Your Dashboard
Conversational tools
Serviceform glossary
FAQs
Cookies
What does a Serviceform lead look like?
WhatsApp Setup with Serviceform
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
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




Updated 03 Mar 2023
Did this page help you?
PREVIOUS
Design your chatbot
NEXT
Welcome page
Docs powered by Archbee
Docs powered by Archbee