Widget Widget
Customize Your Web Widget
Configure how your agent appears on your website:
Agent Avatar
Click Upload Avatar to add a profile image for your agent.
Widget Title
Enter the title shown in the chat window (e.g., "Help with EngageOS")
Enable 24/7 Chat
Toggle: ON — Users can chat with your agent anytime
Primary & Secondary Color
Set the widget's color scheme using hex codes or color picker.
Primary Color: Main widget color (e.g., #8351ec)
Secondary Color: Accent color (e.g., #c5b0ee)
Response Length
Choose how detailed responses should be:
Short — Brief answers
Medium — Balanced responses
Long — Detailed explanations
Initial Greet Message
The first message users see when they open the chat widget.
Example: "Hi, I'm Maya from EngageOS. How can I help you?"
Widget Position
Choose where the chat widget appears on your website:
Bottom Right (recommended)
Bottom Left
Top Right
Top Left
Save & Deploy
Click Save to apply your widget settings.
Your agent card appears in the dashboard.
Get Embed Code
Click the Deploy button on your agent card.
A modal opens showing your embed code:
Add to Your Website
Copy the embed code based on website type (HTML/Reach/Nextjs)
Your agent is now live on your website! 🚀
Users can start chatting immediately from any page.
Add Announcements (Optional)
Announcement Text
Enter a message to display to users (e.g., "We are onboarding pilot projects. Book a call to gain access")
Announcement Hyperlink
Add a URL where users can take action (e.g., https://engageos.ai)
Announcement Hyperlink Text
Set the link text (e.g., "CLICK!!")
Widget Feedback Type (Optional)
Choose how users provide feedback when closing the chat:
Options:
None (default) — No feedback form
Lead Form — Capture user information (name, email, phone, comments)
Agent Feedback — Users rate the agent's response (thumbs up/down, ratings)
If Lead Form Selected:
Form Heading: Title of the form (e.g., "Get exclusive updates straight to your inbox!")
Capture Fields: Choose which fields to collect:
☑ Full Name (recommended)
☑ Email (recommended)
☐ Phone
☐ Comments
Comments Heading: Label for additional comments (e.g., "Any specific requirements?")
Last updated