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

Now, let’s personalize the colors and overall design of your chatbot. In the Theme tab, 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 color and size.
2. Header — Set the colors for header elements.
3. Chat — Adjust the chat window color 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. ✨