Customization

Widget Customization

Customize the look and feel of your chat widget from the Settings page in your dashboard.

Available Options

Primary Color

The primary color affects:

• Widget launcher button
• Chat header
• Send button
• Visitor message bubbles

Set any hex color (e.g., #dc2626) in Settings > Widget Customization.

Position

Choose where the widget appears:

• Bottom Right (default) - Standard position for most websites
• Bottom Left - For sites with content on the right

Greeting Message

Set a welcome message that appears when visitors open the chat. This helps set expectations and encourages engagement.

Example: "Hi! How can we help you today?"

Programmatic Customization

You can customize the widget via the JavaScript API:

window.HalWidget.init({
  appId: 'your-app-id',
  serverUrl: 'https://your-server.com', // Optional
  openOnLoad: true,   // Auto-open the widget
  openDelay: 3000,    // Delay before opening (ms)
  locale: 'de'        // Override browser locale
});

Or use data attributes on the script tag:

<script
  src="https://api.chatwithhal.com/widget.js"
  data-app-id="your-app-id"
  data-open="true"
  data-open-delay="3000"
  data-locale="de"
></script>

Dark Mode

The widget supports light and dark themes. Configure the default theme in Settings > Theme Settings.

Theme Options

• System (default) - Automatically follows visitor's OS preference
• Light - Always display light theme
• Dark - Always display dark theme

Visitor Theme Toggle

Enable "Allow visitors to toggle dark/light mode" to show a theme switch button in the chat header. This lets visitors choose their preferred theme regardless of the default setting.

Programmatic Theme Override

You can also set the theme via the script tag:

<script src="https://hal.example/widget.js"
  data-app-id="your-app-id"
  data-theme="dark"></script>

Or via the JavaScript API:

window.HalWidget.init({
  appId: 'your-app-id',
  theme: 'dark' // 'light', 'dark', or 'system'
});

CSS Isolation

The widget uses Shadow DOM, so your website's CSS won't affect its appearance. This ensures consistent styling across all websites where Hal is installed.

Mobile Behavior

On mobile devices (screens under 420px wide):

• Chat window expands to nearly full screen
• Launcher button shrinks slightly
• Touch-friendly input areas

Branding Guidelines

Tips for a cohesive look:

1. Match your brand color - Use your primary brand color for consistency
2. Consider contrast - Light colors may need adjustment for visibility
3. Test on your site - Preview the widget on your actual pages
4. Mobile check - Ensure it looks good on smaller screens