Widget Preview Mode Demo

How it works

The widget is configured with data-preview-param="preview-agent". This means the widget will only load when the URL contains ?preview-agent=true.

Try it:

• Load with preview mode ON (widget will appear)
• Load without param (widget will NOT appear)
• Load with param=false (widget will NOT appear)

Script Tag Usage

<script 
  src="https://cdn.jsdelivr.net/npm/@runtypelabs/persona@latest/dist/install.global.js"
  data-runtype-token="YOUR_TOKEN"
  data-preview-param="preview-agent"
></script>

Programmatic Usage

import { initAgentWidget } from '@runtypelabs/persona';

const widget = initAgentWidget({
  target: 'body',
  previewQueryParam: 'preview-agent',
  config: {
    clientToken: 'YOUR_TOKEN'
  }
});

// widget will be null if preview param is missing
if (widget) {
  console.log('Widget initialized!');
}

Use Cases

• Testing: Share preview links with clients before going live
• Staging: Load widget only on staging URLs
• Beta testing: Give select users access via special URLs
• A/B testing: Combine with feature flags