Serviceform academy logo

Design the Chatbot

This section guides you through customizing your chatbot's interface. Optimize design elements for a user-friendly experience with detailed instructions and visuals.

After creating a chatbot, you can design and modify how the chatbot looks to boost the user experience.

Chatbot Design Settings

To access the Design Settings, click on the Design tab in the Design section of the Chatbot builder interface. You can find a preview of the Chatbot on the right hand side of the page. Refer to the following visual guide:

Bot Type

Personalize Tool Type, Page Alignment, and Language settings for your chatbot.

• Tool Type:

You can change how the chatbot works by picking a different "Tool Type" that fits your needs. Below is a visual guide, along with a list of available tools for you to select from:

1. Chatbot

Guides users through predefined conversational flows and enables connection to a live agent as necessary.

2. Live Chat

Directly connects users to a live agent for immediate assistance.

3. Step by Step

Step by Step shows elements from the flow and presents options for the user to choose. Each element is displayed one after the other, following the flow.

4. Inline/ Engagement

An inline bot operates within a webpage rather than as a separate chat window, interacting with visitors as they browse.

5. Forms

The Form works in its own window, letting users enter information separately from the main chatbot interface.

6. Pop-ups

This is similar to Chatbot.

• Page Alignment:

Align the chatbot on the page (left, center, or right).

• Language:

Select the chatbot interface language (English, Finnish, Spanish, Hebrew, and Swedish).

Header & Images

Customize the visual elements of the Chatbot's header. Refer to the following visual content:

• Header Image:

Add or change the image displayed at the top of the chatbot. Recommended size is 300px by 300px.

• Avatar:

Enable or disable the visual representation in the chatbot interface.

• Header Background Color:

Customize the background color of the chatbot's header.

• Refresh Button:

Show a refresh button at the top-right corner of the chatbot interface.

• Phone Button:

Incorporate a mobile number option within the chatbot interface.

• Progress Bar:

Display the progress of the conversation based on the number of elements in the conversational flow.

Buttons & Colors

• Text Area:

Enable/disable the text area and modify its placeholder.

• Button:

Customize button appearance, including colors, text, and borders. Additionally, you can customize the placement of the Continue button for Form tool.

• Text Color:

Adjust chatbot and customer text background and font colors.

• Background:

Customize the background color or set background videos/images. You have the choice to display either a video or an image, but not both simultaneously.

• Video:

Manage settings for background videos, including sound and loop options.

Bottom Icon & Footer

Customize the appearance and functionality of the chatbot's lower section.

• Upload Icon:

Add an icon to the bottom of the Chatbot interface. Recommended image size is 300px by 300px.

• Icon Type:

Choose between Circle, Vibrating, and Text icon styles.

• Icon Decoration:

Options for a red circle notification above the bottom icon and a small green circle.

• Background Color:

Customize the background color of the bottom icon.

• Offset Bottom & Right:

Adjust the position of the chatbot by entering values in pixels to move it towards the top and right.

• Privacy Policy:

Enable or disable the visibility of the privacy policy.

Advanced Settings

• Continue Flow:

Resume from the user's previous point when switching pages on the same site.

• Hide Our Brand:

Option to remove the watermark or branding.

• Open as Default:

Fully load the chatbot when the page loads.

• Custom CSS Coding:

Implement custom CSS for advanced design adjustments.

Preview Image

Provides a visual representation of the chatbot integrated into your webpage's background. You can use the 'Preview' option to view the Chatbot with the webpage's background image. Here's how you can do it: