Skip to Content
HomeDashboardSign InGet Started
DeploymentChat Widget Deployment

Chat Widget Deployment

Deploy your AI chat widget to any website in minutes. The widget provides conversational support with automated actions, seamless escalation, and full customization.

Configuration Options

Install Widget settings

Access all widget configuration in the admin dashboard under the Install Widget → Widget view.

Primary Color

Set your brand color for the widget theme:

  • Format: Hex code (e.g., #10B981)
  • Where it appears:
    • Launcher button background
    • Send button
    • User message bubbles
    • Links and interactive elements

Position

Choose where the widget launcher appears:

  • bottom-right (recommended, most common)
  • bottom-left (useful if bottom-right conflicts with other UI)

Most users expect chat widgets in the bottom-right. Use a different position only if that location conflicts with other page elements.

Welcome Message

Customize the first message users see:

  • Default: “Hi! How can I help you today?”
  • Examples:
    • “Welcome to [Company]! What can I help you with?”
    • “Hi there! I’m here to answer your questions.”
    • “Need help? Ask me anything!”

Language

Select the default language for the widget interface (English by default, with additional locales available in the dropdown).

Theme

Choose between light and dark mode:

  • Light: White background, dark text
  • Dark: Dark background, light text

Quick Replies

Set suggested questions that appear before the first response:

  • Format: Comma-separated list
  • Example: “Pricing, Demo, Contact”
  • Best practice: 2-4 suggestions that cover common questions

Quick replies help guide customers to common topics and reduce the time to first interaction.

Launcher Behavior

Control how the widget launcher behaves:

  • Show launcher: Display the launcher button
  • Auto-open: Automatically open widget on page load
  • Delay: Wait X seconds before auto-opening (reduces intrusiveness)

Live Preview

Desktop and Mobile Views

The Install Widget section includes a live preview:

  • Desktop view: See widget as it appears on desktop browsers
  • Mobile view: Preview mobile appearance and behavior
  • Real-time updates: Changes reflect instantly
  • Fully interactive: Test the widget while configuring

Testing in Preview

  1. Type messages to test responses
  2. Click quick replies to verify they work
  3. Test launcher open/close behavior
  4. Verify colors match your brand
  5. Check mobile responsiveness

The preview uses your TEST mode configuration. For production behavior, deploy the widget using the embed code below.

Embed Code

Getting the Code

Configure Your Widget

Set all options in the Install Widget → Widget view (color, position, welcome message, etc.)

Generate API Key

If you haven’t already:

  1. Click Generate API Key in the Install Widget → API or API view
  2. Copy the key securely
  3. Use this key in the embed code below

Copy Embed Code

The Install & Integrate section provides production-ready code:

<script src="https://yoursite.com/embed.js"></script>
<script>
  window.fw('init', {
    primaryColor: '#10B981',
    position: 'bottom-right',
    welcomeMessage: 'Hi! How can I help you today?',
    language: 'en',
    showLauncher: true,
    autoOpen: false,
    theme: 'light',
    quickReplies: 'What is Resly?, Pricing, Get Started',
    apiKey: 'YOUR_API_KEY'
  });
</script>

Add to Your Website

Paste the code before the closing </body> tag on your website.

The widget loads asynchronously and won’t block page rendering or affect Core Web Vitals scores.

Installation Methods

Static HTML Sites

Add the embed code directly to your HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your content here -->
 
  <!-- Resly Widget -->
  <script src="https://yoursite.com/embed.js"></script>
  <script>
    window.fw('init', {
      primaryColor: '#10B981',
      welcomeMessage: 'Hi! How can I help you today?',
      apiKey: 'YOUR_API_KEY'
    });
  </script>
</body>
</html>

React / Next.js

Add to your root layout or main component:

useEffect(() => {
  // Load widget script
  const script = document.createElement('script');
  script.src = 'https://yoursite.com/embed.js';
  script.async = true;
 
  script.onload = () => {
    window.fw('init', {
      primaryColor: '#10B981',
      welcomeMessage: 'Hi! How can I help you today?',
      apiKey: process.env.NEXT_PUBLIC_RESLY_API_KEY
    });
  };
 
  document.body.appendChild(script);
 
  return () => {
    // Cleanup on unmount
    document.body.removeChild(script);
  };
}, []);

WordPress

  1. Go to Appearance → Theme Editor
  2. Edit footer.php
  3. Add embed code before </body>
  4. Save changes

Or use a plugin like Insert Headers and Footers:

  1. Install and activate the plugin
  2. Go to Settings → Insert Headers and Footers
  3. Paste embed code in Footer section
  4. Save

Shopify

  1. Go to Online Store → Themes
  2. Click Actions → Edit code
  3. Open theme.liquid
  4. Add embed code before </body>
  5. Save

For CMS platforms, you may need administrator access to edit theme files. Contact your web developer if you don’t have access.

Advanced Configuration

Programmatic APIs (open/close events, custom triggers, analytics callbacks) are on our roadmap. Today the embed exposes only window.fw('init', {...}) and relies on the launcher for open/close behavior.

Customization Examples

E-commerce Site

window.fw('init', {
  primaryColor: '#007BFF',
  position: 'bottom-right',
  welcomeMessage: 'Hi! Need help with your order?',
  quickReplies: 'Track Order, Returns, Shipping',
  theme: 'light',
  apiKey: 'YOUR_API_KEY'
});

SaaS Product

window.fw('init', {
  primaryColor: '#10B981',
  position: 'bottom-right',
  welcomeMessage: 'Welcome! How can I help you get started?',
  quickReplies: 'Getting Started, Pricing, API Docs',
  theme: 'dark',
  apiKey: 'YOUR_API_KEY'
});

Documentation Site

window.fw('init', {
  primaryColor: '#6366F1',
  position: 'bottom-left', // Keep right side clear for code examples
  welcomeMessage: 'Looking for something specific? Ask me!',
  quickReplies: 'Installation, API Reference, Examples',
  theme: 'dark',
  apiKey: 'YOUR_API_KEY'
});

Deployment Checklist

Before deploying to production:

  • Test widget in preview mode
  • Verify all quick replies work
  • Check colors match your brand
  • Test on mobile devices
  • Verify launcher position doesn’t conflict with page elements
  • Generate and secure API key
  • Add embed code to website
  • Test on staging site first (if available)
  • Monitor initial conversations in ANALYZE tab
  • Iterate based on real usage

Always test on a staging site before deploying to production, especially for high-traffic websites.

Troubleshooting

Widget Not Appearing

Check:

  • Embed code is before </body> tag
  • API key is correct
  • Script URL is accessible
  • No JavaScript errors in console
  • Ad blockers aren’t blocking the widget

Widget Appears But Doesn’t Work

Check:

  • API key has correct permissions
  • Knowledge base has content
  • Widget is not in error state (check console)
  • Network requests are succeeding

Styling Issues

Check:

  • Primary color is valid hex code
  • Position doesn’t conflict with other elements
  • Z-index issues with other page elements
  • Mobile viewport settings

Check the browser console for error messages. Most issues show helpful error messages that point to the solution.

Next Steps

Last updated on
API and IntegrationsSearch Experience