Skip to main content

Chatbot Appearance: widget position, color, and behavior

Chatbot Appearance controls how the chatbot looks and behaves on your website.

It is not enough for the chatbot to answer correctly. It should also look right, avoid disturbing visitors, and match the website brand.

When to use this guide​

Use this guide when you want to:

  • change the chatbot position,
  • adjust colors,
  • match the chatbot to your brand,
  • check how it looks on mobile,
  • configure whether it opens automatically,
  • change the welcome message,
  • make the widget more subtle or more visible,
  • improve the visitor experience.

Why appearance matters​

The chatbot is visible on many pages of the website.

If it is too aggressive, it may annoy visitors.

If it is too hidden, visitors may not use it.

The goal is for it to be:

  • visible,
  • useful,
  • subtle,
  • easy to open,
  • correct on mobile,
  • consistent with the brand.

Step 1 — Open Chatbot settings​

Open the Centuply app, select your website, and open Chatbot.

Then open appearance options such as Appearance, Style, Widget, or the relevant tab.

Step 2 — Choose widget position​

The chatbot usually appears at the bottom right or bottom left.

The most common position is bottom right because visitors recognize it easily.

However, check whether it:

  • covers buttons,
  • covers forms,
  • hides mobile navigation,
  • overlaps with a sticky CTA,
  • blocks important content.

Step 3 — Configure colors​

The chatbot should match the website colors.

You can usually configure:

  • button color,
  • header color,
  • message color,
  • background color,
  • text color,
  • accent color.

Use colors with good contrast so everything is easy to read.

Step 4 — Configure welcome message​

The welcome message is the first message visitors see.

Examples:

Hi! How can we help?

Need help with services or bookings?

Ask us about services, opening hours, or location.

Keep the message short, friendly, and relevant to the business.

Step 5 — Configure quick actions​

If the chatbot supports quick actions, add useful options.

Examples:

  • View services,
  • Book an appointment,
  • Contact us,
  • Request a quote,
  • See opening hours,
  • Find location.

Quick actions help visitors continue without typing a question.

Step 6 — Configure auto-open behavior​

On some websites, the chatbot can open automatically after a few seconds.

Use this feature carefully.

Auto-open can help, but it can also annoy visitors if it appears too quickly.

Best practices:

  • do not open immediately,
  • do not cover the hero,
  • do not reopen repeatedly,
  • make it easy to close,
  • do not harm the mobile experience.

Step 7 — Check mobile appearance​

Mobile is critical.

Open mobile preview and check:

  • whether the chatbot button looks correct,
  • whether it does not cover CTA buttons,
  • whether the window opens correctly,
  • whether text is readable,
  • whether closing is easy,
  • whether it blocks forms or booking.

If the chatbot feels intrusive on a small screen, make it more subtle.

Step 8 — Check desktop appearance​

On desktop, the chatbot should look clean without taking too much attention.

Check:

  • position,
  • size,
  • colors,
  • spacing,
  • whether it matches header and footer,
  • whether it does not cover important sections.

Step 9 — Test opening and closing​

Before publishing, test the basic interaction.

Check:

  • opening the widget,
  • closing the widget,
  • scrolling inside the conversation,
  • quick actions,
  • sending a question,
  • answer display,
  • mobile behavior.

The experience should feel simple and natural.

Step 10 — Save and publish​

When you are happy with the appearance, save the changes.

Then publish and check the live website, not only the preview.

Best practices​

  • Keep the widget subtle.
  • Use colors with good contrast.
  • Do not cover important buttons.
  • Always check mobile.
  • Keep the welcome message short.
  • Add useful quick actions.
  • Do not make auto-open too aggressive.
  • Test the live website after publishing.

Video tutorial​

Suggested video for this article:

Title: How to change chatbot appearance in Centuply

Duration: 3-5 minutes

Video flow:

  1. Open Chatbot settings.
  2. Open Appearance.
  3. Change widget position.
  4. Change colors.
  5. Configure welcome message.
  6. Add quick actions.
  7. Check mobile.
  8. Test open and close.
  9. Publish.

Frequently asked questions​

Where should the chatbot appear?​

Usually bottom right, unless it covers important buttons or content.

Should it open automatically?​

Not necessarily. If it opens automatically, it should do so subtly and not immediately.

What color should I use?​

Use a color that matches your brand and has good contrast.

What should I write in the welcome message?​

Write something short and useful, such as “Hi! How can we help?”

Should I check it on mobile?​

Yes. The chatbot may cover important elements on small screens, so mobile checking is essential.