Widget Settings

The Widget Settings page allows you to customize the appearance, content, and behavior of your chat widget. Changes are previewed in real-time on the right side of the page.

Accessing Widget Settings

Log in to your Chatim dashboard
Select your project from the sidebar
Click Widget in the navigation menu

Appearance Settings

Widget Color

Choose the primary color for your chat widget. This color is used for the widget header background, chat bubble launcher button, selected options and buttons, and various accent elements.

Select from preset color swatches
Enter a custom hex color code

Tip: Choose a color that matches your brand while ensuring good contrast and visibility.

Button Shape

Shape	Description
Circle	Round launcher button (default)
Rounded	Rounded square launcher button

Images

Header Avatar

Upload a custom avatar image that appears in the widget header next to your title. Accepts JPG, PNG, or WebP up to 500KB. Square (1:1) aspect ratio recommended, 100x100 pixels or larger.

Button Icon

Replace the default chat launcher button icon with your own custom image. Accepts JPG, PNG, or WebP up to 500KB. Square (1:1) aspect ratio recommended, 70x70 pixels or larger. Consider using a transparent PNG for best results.

Content Settings

Widget Title

The main heading displayed in the widget header when opened. Keep it under 85 characters.

Examples: "Chatim Support", "How can we help?", "Chat with Sales"

Widget Subtitle

Optional secondary text displayed below the title. Keep it under 85 characters.

Examples: "We typically reply within minutes", "Available 24/7", "Ask us anything!"

Hello Message

The popup message that appears next to the closed widget to attract visitor attention. Keep it under 50 characters.

Examples: "Need help? Chat with us!", "Hi there! Any questions?", "We're online now!"

Position Settings

Widget Position

Position	Description
Right	Bottom-right corner (most common)
Left	Bottom-left corner

Desktop Margin

Control how far the widget is positioned from the edge of the screen on desktop devices. Range: 1px to 300px. Default: 15px.

Mobile Margin

Control how far the widget is positioned from the edge of the screen on mobile devices. Range: 1px to 300px. Default: 15px. You may want a smaller margin on mobile to maximize screen space.

Timing Settings

Auto-Open Widget

Automatically open the chat widget after a visitor has been on your page for a specified time. Range: 0 to 120 seconds.

0 seconds - Disabled (widget stays closed until clicked)
5-10 seconds - Good for engaging interested visitors
30+ seconds - Less intrusive, catches engaged visitors

Reset Chat (Session Duration)

Control how long visitor chat history is preserved before starting fresh. Range: 0 to 120 hours (5 days).

0 hours - Never reset (chat persists indefinitely)
24 hours - Daily reset (default)
72 hours - Three-day sessions
120 hours - Maximum five-day sessions

URL Parameters

Configure automatic capture of URL parameters from visitor pages. This is useful for tracking marketing attribution and campaign data without any code changes.

Enable URL Parameter Capture - Toggle to enable or disable
Capture all URL parameters - Captures every valid URL parameter
Only capture specific parameters - Uses a whitelist (defaults: utm_source, utm_medium, utm_campaign, utm_term, utm_content, ref)

For more details on how URL parameters work with the JavaScript SDK, see the Widget SDK documentation.

Sound Settings

Toggle the notification sound that plays when new messages arrive in the chat widget. Enabled by default.

Live Preview

The right side of the Widget Settings page shows a real-time preview of your chat widget. It updates instantly as you make changes, is fully interactive, and shows both opened and closed states.

Note: The preview uses demo mode and doesn't connect to your actual chatbot flow.

Saving Changes

Click Save to apply your changes. Changes will be immediately reflected on your live website. Always save before leaving the page - unsaved changes will be lost.

Best Practices

Brand Consistency - Use your brand colors, upload your logo as the header avatar, and match the tone of your website
User Experience - Position the widget where it won't cover important content, write friendly and inviting messages
Mobile Optimization - Test on mobile devices, adjust mobile margin separately, keep text short
A/B Testing - Try different hello messages, auto-open timings, positions, colors, and button shapes