Alhena
  • Introduction
  • Getting Started
  • Architecture
  • Reference
    • Website SDK
      • Configure Proactive Nudges
    • Product FAQs
    • Website chatsdk events
    • Website chatsdk APIs
    • Chat SDK api and events examples
      • Open other external widget once human transfer is initiated
      • Show the Alhena AI widget only when someone scroll the page by 5 px
    • Website SDK - Custom data
      • Website SDK - Customer data with Agent
    • Website SDK - Internationalization
    • API Reference
      • API calls
    • Device Compatibility
  • Tutorials
    • AI Training
      • Training Steps
      • Training Data Sources
        • Websites
        • Youtube videos
        • Google Drive
        • Twitter Pages
        • Discord Messages
        • Confluence Pages
        • Upload Documents
        • Github
        • Zendesk Tickets
        • Freshdesk Tickets
        • Freshchat Tickets
        • Custom data sources
        • Shopify API
        • Woocommerce API
        • PDF Crawling
      • Training Frequently Asked Questions
    • Tuning Alhena AI Post Training
      • Best Practices for configuring the Alhena AI’s personality and guidelines
      • Adding Human Feedback for improving specific Questions
      • Adding to your knowledge base with FAQs
      • Frequently Asked Questions - Tuning Responses
    • QAing Al Conversations
      • Smart Flagging: Streamline Your AI Quality Assurance
    • Integrations
      • Alhena Website Chat SDK
        • Customizing Your Alhena Chat Widget
      • Integrating Alhena AI With Slack
      • Integrating Alhena AI With Discord
      • Integrating Alhena With Freshdesk
      • Integrating Alhena AI With Zendesk
      • Integrating Alhena AI With Email
      • Integrating Alhena AI With Shopify
      • Integration Alhena AI With Trustpilot
      • Integrating Alhena With Gorgias
      • Integrating Alhena With Kustomer
    • Notifications
    • Alhena Dashboard
      • Managing Team
Powered by GitBook
On this page
  • 🎨 Widget Customization Options
  • 🖼️ 1. Widget Welcome Text
  • 🎨 2. Widget Style
  • 🧿 3. Widget Icon & Launcher Style
  • 🧩 4. Widget Features
  • ⏰ 5. Human Handoff Hours
  1. Tutorials
  2. Integrations
  3. Alhena Website Chat SDK

Customizing Your Alhena Chat Widget

PreviousAlhena Website Chat SDKNextIntegrating Alhena AI With Slack

Last updated 22 days ago

Alhena provides multiple customization options for its chat widget to ensure it seamlessly integrates with the aesthetic of your website. This guide explores the available customization features.

To begin, access the settings by going to the Alhena dashboard. From there, select "Integrations," and choose "Configure Settings" under the Website section to view the chat widget's settings. This allows you to adjust settings and immediately see the effects of your changes.

🎨 Widget Customization Options

Alhena AI offers extensive customization options to tailor the website chat widget to your brand and user experience needs. Below is a breakdown of all configurable sections available via the Widget Configuration Panel.


🖼️ 1. Widget Welcome Text

Customize the first impression users have when they open the widget.

  • Welcome Screen Title: Headline text shown at the top. Example: Welcome to Alhena AI ✨

  • Welcome Screen Subtitle: Subheading to set context. Example: We delight our customer's customers

  • Welcome Message: Default message shown in the chat input area. Example: What can I answer for you?

  • Add Multiple Welcome Messages: Click “+ Add welcome message” to cycle through greetings.

  • Privacy Consent Button: Toggle if you want to display a GDPR-style consent before starting the chat.


🎨 2. Widget Style

Visually customize the chat widget itself.

  • AI Agent Icon: Upload a custom icon for the chat bot.

  • Widget Width: Width in pixels (e.g., 400).

  • Widget Border Radius: Corner rounding for a modern look (e.g., 12).

  • Header & Button Color: Customize header and button color using hex codes (e.g., #0866ff).

  • Customer Message Color: Set the text bubble color for user messages.

  • Font Family: Choose typography (e.g., Nunito, sans-serif).

  • Message Font Size: Font size in pixels (e.g., 15).

  • Message Line Height: Vertical spacing between lines in percentages (e.g., 125).

  • Z-index: Controls overlay priority. Default 200000 ensures it's above most elements.


🧿 3. Widget Icon & Launcher Style

Control how the widget launcher button appears on the page.

  • Launcher Icon: Upload your brand logo or avatar.

  • Launcher Text: Optional label beside the icon (e.g., Questions? Let's Chat!).

  • Launcher Background Color: Customize background (e.g., #0866ff).

  • Launcher Text Color: Typically white (#ffffff) for contrast.

  • Launcher Shape: Choose between:

    • Circle

    • Square

  • Launcher Border Radius: Make the square launcher more rounded if desired.

  • Widget Position:

    • Bottom Left or Bottom Right

  • Spacing Controls: Set pixel spacing from edges (e.g., 20px bottom & right).

  • Mobile Settings: Option to reuse the same position settings for mobile.


🧩 4. Widget Features

Enable or disable advanced interaction features.

  • Attach Files: Toggle whether users can upload documents during chat.

  • Request Full Transcript: Let users request the full chat transcript.

  • Human Transfer Form Text: Custom message when switching to a human agent.

  • Collect Additional Info for Human Transfer:

    • Email: Can be marked as Required.

    • Name: Optional.

    • Phone Number: Optional.


⏰ 5. Human Handoff Hours

Define when live agents are available.

  • Enabled 24/7: Human transfer always available.

  • Custom Hours: Schedule specific availability windows (not shown in the screenshots but often available in such interfaces).