Support Widget
Widget Configuration
Customize your Support Station widget's appearance and behavior to match your brand and support workflow.
Accessing Widget Settings
- Go to Integrations > Widget
- Configure options
- Copy the updated embed code when done
Availability Settings
Enable/Disable Widget
Toggle the widget on or off for your site. When disabled, the widget won't appear even if the code is still embedded.
AI Agent
AI Agent Enabled - Toggle whether customers can chat with the AI agent in the widget.
Requirements:
- Pro plan or higher
- AI credits available
When enabled, customers can ask questions and get instant answers from your knowledge base.
Appearance Settings
Colors
Widget colors are inherited from your Organization settings:
- Primary Color - Main button and header color
- Accent Color - Secondary elements
To change widget colors, update your organization's brand colors in Settings > Organization > Branding.
Dark Mode
Enable or disable dark mode for the widget. When enabled, the widget adapts to dark color schemes.
Logo
The widget uses your organization logo from Settings > Organization > Branding.
Button Configuration
Button Icon
Choose which icon appears on the widget launcher button. Default is a chat/message icon.
Button Text
Customize the text that appears on the widget button. Default is "Chat with us" or similar.
Example: "Help", "Support", "Ask a question"
Welcome Messages
Header Text
The main welcome message customers see when opening the widget.
Default: "Need help? Just ask!" Max length: 100 characters
Examples:
- "How can we help you today?"
- "Welcome to Acme Support"
- "Questions? We're here to help"
Welcome Subtitle
A secondary message below the header.
Max length: 200 characters
Examples:
- "Get instant answers or submit a support request"
- "Our team typically responds within 2 hours"
Static Links
Add helpful links that appear in the widget:
- Label - Link text
- URL - Where the link goes
Examples:
- "Help Center" → https://help.yoursite.com
- "Status Page" → https://status.yoursite.com
- "Product Docs" → https://docs.yoursite.com
Customers can click these links without submitting a ticket.
Widget Modes
Support Form Only
Customers fill out a form to submit support requests. No AI interaction.
Use when:
- You don't have AI credits
- You prefer structured ticket intake
- AI isn't appropriate for your use case
AI Chat Mode
Customers can chat with AI to get instant answers from your knowledge base.
Use when:
- You have AI credits (Pro plan or higher)
- You want to deflect common questions
- Your knowledge base is comprehensive
Both Modes
Customers can choose to chat with AI or submit a form directly.
Use when:
- You want to offer both options
- Different customers have different preferences
Applying Changes
After configuring your widget:
- Review all settings
- Click Save
- Copy the embed code if it changed
- Update your website if needed
Note: Some changes like colors require updating your organization branding settings, not just widget settings.
Z-Index (Advanced)
By default, the widget renders at z-index 2147483647 (the maximum value) to ensure it appears above all other page elements. If this conflicts with other overlays or modals on your site, you can customize it.
Setting Z-Index at Initialization
Add a zIndex property to your widget configuration:
window.SupportStation = {
orgSlug: 'your-org-slug',
zIndex: 9999
};
Changing Z-Index at Runtime
Use the setZIndex method on the widget API to adjust the z-index dynamically after the widget has loaded:
SupportStationWidget.setZIndex(9999);
This updates the widget container, iframe, and all overlays immediately.
Bug Report Diagnostics
Optionally attach browser info, console logs, network requests, and a masked screenshot to widget-submitted tickets. Off by default. See the Bug Report Diagnostics article for what's captured and the privacy model.
What's NOT Configurable
The following are not currently supported:
- Custom positioning (always bottom-right)
- Custom fields on forms
- Suggested topics or conversation starters
- Multiple widget instances per page
User Context (Advanced)
Pass contextual information about the current user to help the AI provide personalized responses.
Configuration
Add a userContext string (max 10000 characters) to your widget configuration:
window.SupportStation = {
orgSlug: 'your-org-slug',
email: 'user@example.com',
name: 'Jane Smith',
userContext: `Account: Acme Corp (Enterprise Plan)
User Role: Admin
Account Created: January 2024
Features Enabled: SSO, API Access, Custom Domains
Recent Activity: Upgraded plan last week`
};
Recommended Information
Include context that helps the AI understand who they're helping:
Account Information:
- Account/company name
- Subscription plan or tier
- Account creation date
- Account status (trial, active, churned)
User Information:
- User's role or permissions
- Department or team
- User since date
Product Context:
- Features enabled/disabled
- Recent significant actions
- Current usage metrics
- Known issues or flags
Support History:
- Number of previous tickets
- Open tickets count
- VIP or priority status
Example Contexts
SaaS Application:
Account: TechStartup Inc (Pro Plan)
User: Sarah Chen, Admin
Member Since: March 2024
Features: API Access, Webhooks, SSO enabled
Usage: 1,247 API calls this month
Status: Active, billing current
E-commerce Platform:
Customer: john.doe@email.com
Orders: 12 lifetime orders
Last Order: #45678 on Dec 15, 2024
Loyalty Tier: Gold Member
Cart: 3 items ($89.99 total)
Developer Tool:
Organization: DevTeam LLC
Plan: Team (5 seats)
Projects: 8 active
Last Deploy: 2 hours ago
Integration: GitHub, Slack connected
Best Practices
- Keep it concise - Include only relevant information
- Use structured format - Key: Value pairs are easy for AI to parse
- Avoid sensitive data - Don't include passwords, API keys, or PII beyond what's necessary
- Update dynamically - Generate this server-side with current user data
- Be factual - Include objective information, not subjective opinions
Security Note
The userContext is sent to the AI model. While it's not displayed to users, avoid including:
- Passwords or secrets
- Full credit card numbers
- Social security numbers
- Internal system IDs that could be exploited
Character Limit
Maximum 10000 characters. Content exceeding this limit is automatically truncated server-side.
Was this article helpful?