Serviceform academy logo
Log in
Search
Chatbot
Last updated on
October 23, 2024

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.

The following is a list of the integrations supported by our system, highlighting key features and benefits. Click on any of the below integrations to explore detailed guides and connect the right tools to your system(s).

Native integrations

Getting started with Dynamic form

Create a dynamic form within a few minutes and embed it on your own and/ or business website. Dynamic forms can be customized to serve various purposes. Here are a few ways in which Dynamic forms can be customized:

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:

FAQs

I want to know more about pricing

Serviceform starts for free and you can use it for free forever. If you want to generate more than 50 interactions per month, our plans start at,

  • $49/mo (51 - 150 interactions per month)
  • $79/mo (151 - 300 interactions per month
  • $99/mo (301 - 500 interactions per month)
How do I get support for my Serviceform account?

Our help team is always ready to help. You can visit help.serviceform.com to access our help documentation or you can chat with one of our support team members here. Also, you can ask anything in an email to our support team via help@serviceform.com.

What does my Serviceform plan include?

The free forever plan gives you access to all conversion tools. Our conversion tool suite includes Chatbots, Forms, Popups, WhatsApp Chatbots, Landing Pages, and much more. You can install as many tools as you wish and get 50 interactions every month entirely for free.

How do I create my account?

You can sign up with just a single click through Google or Microsoft. Or you can enter your company email address and sign up. No credit card required and you can use Serviceform for free forever.

Do I need to know how to code?

Our easy drag and drop builder lets you custom, personalized chatbots without having to write a single line of code. If you run into any issues, you can always refer to our help documentation.

How do I install a tool on my website?

Serviceform generates a unique pixel code which you need to simply copy and paste into the <head> tag of your website. Then all you need to do is to toggle a button from our simple website setup, and your conversion tool will be live on your website.

Can you do the setup for me?

Yes, our conversion specialists are happy to help you do the setup. Simply book an appointment with our team and let them know what you want.

Can I integrate Serviceform into my CRM?

Yes, Serviceform tools can be integrated with more than 100 applications including, Hubspot, Salesforce, ClickUp, and even Google Sheets. Click here to learn more.

How many AI Scraper jobs can run at the same time?

Currently, only 5 AI Scraper jobs can run simultaneously. If you have more jobs, they will queue and start automatically once a slot is free.

What should I do if discovery all URLs or sitemaps do not return any data (character count = 0)?

Try using Manual mode and add a few links to see if they work. If successful, you can continue using Manual mode. For websites with complex structures, also try Manual mode with the Advanced Scraper type.

What happens if the scraper gets blocked while accessing a website?

Some websites block automated requests, which may prevent scraping. To fix this, the customer must whitelist our IP addresses:

  • 167.71.15.186
  • 142.93.231.157

Whitelisting these IPs allows our scraper to access the website without being blocked or hitting rate limits. We use only these two fixed IP addresses for scraping.

Why does AI Scraper sometimes not return data even though the URL is correct?

his may happen if:

  • The content is loaded dynamically via JavaScript and not accessible with the selected scraper type.
  • Your website has security measures like firewalls or bot protection.
  • The CSS selectors or inclusion/exclusion rules are incorrect.

Solution: Use Advanced Scraper, double-check CSS selectors, and ensure required URLs are included.

Can I scrape only specific languages on multilingual sites?

Yes. Limit scraping to one language per site to avoid duplicate information. For example, set the site name to Customer FI if scraping Finnish pages only.

Which scraper type should I use?

Basic: Always try first—it’s less resource-intensive.

Advanced: Use if Basic doesn’t return results.