Step 2: Adjust Your AI Chatbot Design & Skills

Once you've trained your AI Chatbot, it’s time to fine-tune its behavior and appearance. 🚀

In this article, you’ll learn how to manage chatbot skills and adjust the design to create a smoother experience for your visitors.

Manage Chatbot Skills

In the Skills tab, you can control how the chatbot interacts with visitors. Click ➕Add Skill and select the option you need:

1. Action Buttons
2. Collect Contacts
3. Follow-up Messages
4. Contact a Human

Action Buttons

Add buttons to chatbot messages and choose when they should appear so visitors can take specific action directly in the chat:

1

Buttons — Set up buttons that redirect visitors when clicked. You can choose from the available options or create a custom button with your own link:

2

Description Field — Define when the buttons should appear in the conversation:

Collect Contacts

Use this skill to collect visitor details, such as an email address or phone number, for follow-ups or support requests:

1. Form Display Options — Decide when the contact form should appear during the conversation.
2. Form Fields — Select which fields to include in the form.
3. Messages — Customize the request and success messages (with or without the visitor's name).

Follow-up Message

Set automatic follow-up messages to appear after a period of inactivity — perfect for sharing offers, contact details, or thank-you notes:

By default, Inactivity Delay is set to 5 minutes, but you can manually adjust it to your liking.

Contact a Human

Use this skill to offer visitors a way to reach a real person:

1. Human Profile — Add a photo, name, position, and short bio for the person visitors will contact.
2. Contact Buttons — Add buttons to the AI Agent's messages that will redirect the visitor to a real person.
3. Options for Contacting a Human — Choose when the chatbot should offer a transfer to a real person. You can use the built-in options or describe your own scenarios in Other Situations.

Customize Chatbot Appearance

In the Settings tab, you can personalize the layout, colors, and overall design of your chatbot.

Click on Placement & Layout to choose where your chatbot appears on the page and how it is displayed (floating or embedded). You can also select a Launcher Button and customize when the chat opens for visitors:

In the Theme section, you can select a preset theme and adjust accent colors to match your website's look. If you need more control, click Customize Theme to configure specific parts of the chatbot interface:

1. Launcher Button — Change the launcher button colors and size.
2. Header — Set the colors for header elements.
3. Chat — Adjust the chat window colors and corner radius.
4. Message Field — Customize the appearance of the message input field.
5. Footer — Select the footer text color.
6. Font — Choose the chatbot font.

Here is a visual demonstration of what you can change:

Great job! You’ve successfully personalized your AI Chatbot. Next, let’s move on to configuring the advanced settings to finalize the setup and enhance its functionality. ✨