Customizing Your Alhena Chat Widget
Last updated
Last updated
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.
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.
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.
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.
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.
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.
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).