Skip to content
ChatbotIQ

Tutorial: Match Your Widget to Your Brand

A chatbot that looks like it belongs on your website builds trust. In this tutorial, you’ll customize the ChatbotIQ widget to match your brand — from colors and fonts to the launcher icon and welcome message.

Time needed: About 10 minutes.

What you’ll need: Your brand’s primary color (hex code), a logo or icon (optional), and ideas for a welcome message.

What you’ll learn:

  • How to set brand colors for the widget
  • How to customize the launcher button
  • How to configure the header with your logo
  • How to write an effective welcome message and suggested questions
  • How to preview on desktop and mobile

Step 1: Open the Widget Designer

Section titled “Step 1: Open the Widget Designer”
  1. Go to Bots and click “Design & Deploy” on your bot.
  2. You’re in the Playground. The left panel shows a live preview of your widget on a simulated website background.
  3. The right panel is the Widget Designer where all customization happens.

Every change you make is instantly visible in the preview. No need to save and refresh.

Step 2: Set your brand colors

Section titled “Step 2: Set your brand colors”
  1. Find the Colors section in the Widget Designer.
  2. Set your Primary Color to your brand color (e.g., #4F46E5 for indigo). This affects the launcher button and user message bubbles.
  3. Adjust the other colors if needed:
    • Bot Bubble — a light version of your brand color or light gray works well.
    • Background — usually white or a very light shade.
    • Text Color — keep dark for readability.

Tip: Stick to your brand’s primary color for the launcher and user bubbles. Use neutral colors (white, light gray, dark gray) for the chat background and text. This keeps things clean and readable.

Step 3: Customize the launcher button

Section titled “Step 3: Customize the launcher button”

The launcher is the floating button visitors see on your website.

  1. Go to the Launcher section.
  2. Choose a Style:
    • Icon only — clean and minimal (most popular).
    • Icon + text — icon with a label like “Chat with us”.
    • Text only — just the text label.
  3. Choose an Icon — presets include chat bubble, sparkle, headset, robot, and more. Or upload your own icon.
  4. Pick a Shape — circle, rounded square, or squircle.
  5. Optionally add an Effect — a subtle pulse or glow can draw attention without being annoying.

Step 4: Set up the header

Section titled “Step 4: Set up the header”

When the widget opens, the header is the first thing visitors see.

  1. Go to the Header section.
  2. Set the Title — something inviting like:
    • “Need help?”
    • “Ask us anything”
    • “Chat with [Company Name]”
  3. Set a Subtitle (optional):
    • “We typically reply instantly”
    • “Powered by AI”
    • “Available 24/7”
  4. Choose an Avatar — upload your company logo or pick a preset icon.

Step 5: Write a welcome message

Section titled “Step 5: Write a welcome message”

The welcome message appears when a visitor first opens an empty chat.

  1. Go to the Messages section.
  2. Set your Welcome Message. Keep it friendly and action-oriented:

Good examples:

  • “Hi! I’m here to help you find answers about [Product]. Ask me anything, or try one of the suggestions below.”
  • “Welcome! I know everything about our documentation. What can I help you with?”
  • “Hey there! Need help? Ask me a question or browse the topics below.”
  1. Set the Placeholder Text for the input field:
    • “Type your message…” (default)
    • “Ask me anything…”
    • “What would you like to know?”

Step 6: Add suggested questions

Section titled “Step 6: Add suggested questions”

Suggested questions appear as clickable prompts when the chat is empty. They guide visitors to common topics.

  1. Go to your bot settings (gear icon).
  2. Add 3—5 Suggested Questions that cover your most important topics:
    • “How do I get started?”
    • “What pricing plans are available?”
    • “How do I contact support?”
    • “What features are included?”
  3. Set Suggested Questions Count to how many you want to show (3 is usually right).

Step 7: Preview on mobile

Section titled “Step 7: Preview on mobile”
  1. Click the mobile preview toggle in the Playground.
  2. Check that:
    • The launcher is visible and not overlapping other elements.
    • The chat window is readable on a small screen.
    • Colors and fonts look good at mobile size.
  3. If needed, toggle Show on Mobile off if you prefer to hide the widget on mobile devices.

Step 8: Save and embed

Section titled “Step 8: Save and embed”

Your customizations are saved automatically. Now embed the widget on your website:

  1. Switch to the Embed tab.
  2. Copy the embed code.
  3. Paste it into your website’s HTML.

Visit your website and admire your branded chatbot.

Section titled “Related”