Widget Configuration

Customize the customer-facing support widget.

Widget Overview

The widget provides:

• Contact form for customers
• Self-service article search
• Availability indicator
• Branded experience

Accessing Widget Settings

1. Go to Settings → Widget
2. Configure options
3. Preview changes
4. Save and publish

Appearance

Branding Colors

Position

Choose widget location:

• Bottom Right (default)
• Bottom Left

Size

Custom Icon

Upload custom launcher icon:

• Format: PNG or SVG
• Size: 64x64px recommended
• Background: Transparent

Text & Language

Welcome Message

Customize greeting:

Hi there! 👋
How can we help you today?

Form Labels

Customize field labels:

• Name field: "Your name"
• Email field: "Email address"
• Message field: "How can we help?"

Button Text

Customize buttons:

• Send: "Send message"
• New conversation: "Start new chat"

Language

Select widget language:

• English
• Spanish
• French
• German
• More available

Multiple Languages

For multilingual support:

• Auto-detect browser language
• Or set specific language

Pre-Chat Form

What is It?

Form customers complete before messaging:

• Collects information upfront
• Routes to right team
• Qualifies requests

Default Fields

• Name (required)
• Email (required)
• Subject (optional)
• Message (required)

Custom Fields

Add your own fields:

Adding Custom Fields

1. Go to Widget → Form
2. Click + Add Field
3. Select type
4. Set label and options
5. Set required or optional
6. Save

Article Suggestions

Enable Search

Let customers search your knowledge base:

• Toggle "Show article search"
• Articles display in widget
• Customers can self-serve

Suggested Articles

Show relevant articles:

• Based on customer message
• Before sending to agent
• Reduces ticket volume

Configuration

Availability Display

Online/Offline Status

Widget shows team availability:

• Online: "We're here to help"
• Offline: "We're away right now"

Based On

Status determined by:

• Business hours
• Agent availability
• Manual override

Offline Message

Customize offline experience:

We're offline right now.
Leave a message and we'll reply
by 9 AM EST tomorrow.

Offline Form

Optionally hide form when offline or show reduced form.

Installation

Getting the Code

1. Go to Settings → Widget → Installation
2. Copy the code snippet
3. Paste before </body> tag

Code Snippet

<script>
  window.RelaySettings = {
    orgId: "your-org-id"
  };
</script>
<script src="https://widget.relay.help/widget.js" async></script>

Platform-Specific

Instructions for:

• WordPress
• Shopify
• Squarespace
• Custom HTML

Advanced Settings

Domain Whitelist

Restrict where widget appears:

• List allowed domains
• Widget won't load elsewhere
• Prevents unauthorized use

Custom CSS

Advanced styling:

.relay-widget-launcher {
  bottom: 30px;
  right: 30px;
}

JavaScript API

Control widget programmatically:

Relay.open();     // Open widget
Relay.close();    // Close widget
Relay.identify({ email: 'user@example.com' });

Event Callbacks

Listen to widget events:

Relay.on('open', function() {
  // Widget opened
});

Relay.on('messageSent', function(message) {
  // Customer sent message
});

Testing

Preview Mode

1. Make changes in settings
2. Click "Preview"
3. See live preview
4. Iterate until satisfied

Test in Staging

Before production:

1. Install on staging site
2. Test full flow
3. Verify appearance
4. Check article suggestions

Incognito Testing

Test as new customer:

1. Open incognito window
2. Visit your site
3. Interact with widget
4. Verify experience

Performance

Load Time

Widget optimized for speed:

• Async loading
• Lazy initialization
• Minimal impact on page

Mobile Optimization

Widget adapts to mobile:

• Responsive design
• Touch-friendly
• Full-screen on small devices

Troubleshooting

Widget Not Showing

1. Verify installation code
2. Check domain whitelist
3. Clear browser cache
4. Check for JavaScript errors

Styling Issues

1. Check for CSS conflicts
2. Use more specific selectors
3. Contact support for help

Messages Not Sending

1. Check API connectivity
2. Verify form validation
3. Check browser console

Best Practices

Keep It Simple

• Minimal pre-chat fields
• Clear, friendly language
• Easy-to-find launcher

Match Your Brand

• Use brand colors
• Consistent voice
• Professional appearance

Test Regularly

• After site updates
• After widget changes
• On different browsers

Monitor Usage

Review in analytics:

• Widget submissions
• Article searches
• Conversion rates

← Business Hours | Notifications →