​
Assistant Styling

Customize the appearance and messaging of your assistant through the Style tab to match your brand and create a better user experience.

​
Images & Icons

​
Profile Picture

​
profile_picture
file
Upload image (supports JPG, PNG with cropping, and SVG files up to 1MB)
Avatar image that appears at the top of the chat and when responding.
Use a professional headshot or brand logo that represents your assistant’s personality.

​
Chat Icon

​
chat_icon
file
Upload image (supports JPG, PNG with cropping, and SVG files up to 1MB)
Custom icon for the chat widget when closed (defaults to IllumiChat icon if not set).
The chat icon appears on your website when the chat widget is minimized. Choose something recognizable and on-brand.

​
Content & Messaging

​
Display Name

​
display_name
string
default:"Assistant"
Name that appears at the top of the chat widget.
Good display names: “Customer Support”, “Sales Assistant”, “Help Bot”

​
Initial Message

​
initial_message
string
default:"Hello! How can I help you today?"
Greeting message that appears when the chat opens (max 500 characters).
Make your initial message welcoming and specific to your assistant’s purpose. Include what users can ask about.

​
Suggested Messages

​
suggested_messages
array
Quick response options for users (max 5 messages).
Suggested messages for a customer support assistant:
  • “I need help with my order”
  • “What are your return policies?”
  • “How do I reset my password?”
  • “Contact a human agent”

​
Auto Popup Delay (seconds)

​
auto_popup_delay
integer
default:"-1"
Auto show initial message popup after this many seconds. Use -1 to disable.
Set to a positive number (e.g., 5) to automatically show the chat after users spend time on your page. Use -1 to keep it closed until users click.

​
Basic Styling

​
Brand Color

​
brand_color
color
Your branding color, will be used for chat bot bubble on your website.
Choose a color that contrasts well with your website background for visibility.

​
Background Color

​
background_color
color
Background color of the chat widget.
Use a light, neutral color that doesn’t interfere with readability.

​
User Message Color

​
user_message_color
color
Background color for user message bubbles.
This color should contrast well with the text color for readability.

​
Position

​
position
select
default:"Bottom Right"
Position of the chat widget on your website.
Available positions:
  • Bottom Right
  • Bottom Left
  • Top Right
  • Top Left

​
Show “Powered By IllumiChat”

​
show_powered_by
boolean
default:"true"
Display “Powered By IllumiChat” in the chat footer.
This helps promote IllumiChat and may be required depending on your plan.
​
custom_footer_message
string
Custom message to display in the chat footer (max 200 characters).
Custom footer messages:
  • “Need immediate help? Call us at 1-800-HELP”
  • “Chat available 24/7 for your convenience”
  • “This conversation is recorded for quality assurance”

​
Best Practices

​
1. Brand Consistency

  • Use your brand colors and fonts
  • Match your website’s design language
  • Keep the styling professional and on-brand

​
2. User Experience

  • Choose colors with good contrast for readability
  • Write clear, helpful initial messages
  • Provide relevant suggested messages to guide users

​
3. Accessibility

  • Ensure text is readable against background colors
  • Use appropriate color contrast ratios
  • Consider users with visual impairments

​
4. Mobile Optimization

  • Test your styling on mobile devices
  • Ensure the chat widget is easily accessible on small screens
  • Keep suggested messages concise for mobile users

​
Preview and Testing

After configuring your styling:
  1. Preview the chat widget to see how it looks
  2. Test on different devices to ensure responsiveness
  3. Check color contrast for accessibility
  4. Verify all images load correctly
  5. Test the user experience from a visitor’s perspective

​
Next Steps

Share Your Assistant

Choose how to share your styled assistant with users.

Assistant Configuration

Configure your assistant’s core functionality.

Knowledge Base Setup

Add knowledge to make your assistant more helpful.

Analytics & Insights

Track how users interact with your styled assistant.