Preview Mode Demo

Test your chat widget in production without showing it to all visitors.

🔗 Current URL

✨ Enable Preview Mode 🚫 Disable Preview Mode

💡 How It Works

The previewQueryParam option lets you deploy your widget script to production but only show it when a specific URL parameter is present. This is perfect for:

🧪 Testing in Production

Test the widget on your live site without affecting real users.

👀 Merchant Preview

Let store owners preview the widget before enabling it globally.

🎯 Staged Rollout

Share preview links with select users before full launch.

🐛 Debug Mode

Add the param to any page to debug widget issues.

📝 Implementation

Add previewQueryParam to your widget initialization:

const widget = initAgentWidget({
  target: 'body',
  previewQueryParam: 'preview',  // ← Enable preview mode
  config: {
    apiUrl: '/api/chat/dispatch',
    launcher: { enabled: true }
  }
});

// widget is null if preview param is missing
if (widget) {
  console.log('Widget loaded in preview mode!');
}
      

When the ?preview=true parameter is missing, the widget simply doesn't load. No DOM elements are created, no CSS is injected, and no API calls are made.

🔧 Script Tag Version

For CDN/script tag installations, add the data-preview-param attribute:

<!-- Widget will only load with ?my-preview=true -->
<script
  src="https://cdn.jsdelivr.net/npm/vanilla-agent@latest/dist/install.global.js"
  data-preview-param="my-preview"
></script>
      