Widget Embedding

Add your AI co-pilot to any web application in minutes

Basic Embedding

Copy your unique widget script tag from the dashboard and paste it into your HTML. The co-pilot appears automatically.

<!-- Add this before closing </body> tag -->
<script src="https://widget.strikeup.io/embed.js"
        data-widget-id="wgt_abc123xyz">
</script>

<!-- Add this before closing </body> tag -->
<script src="https://widget.strikeup.io/embed.js"
        data-widget-id="wgt_abc123xyz">
</script>

<!-- Add this before closing </body> tag -->
<script src="https://widget.strikeup.io/embed.js"
        data-widget-id="wgt_abc123xyz">
</script>

Customization Options

Customize the widget’s appearance and behavior using data attributes:

<script src="https://widget.strikeup.io/embed.js"
        data-widget-id="wgt_abc123xyz"
        data-position="bottom-right"
        data-theme="light"
        data-primary-color="#3B82F6"
        data-greeting="Hi! How can I help you today?"
        data-user-id="user_12345"
        data-user-email="john@example.com"
        data-handoff-user-id="crm_user_12345">
</script>

<script src="https://widget.strikeup.io/embed.js"
        data-widget-id="wgt_abc123xyz"
        data-position="bottom-right"
        data-theme="light"
        data-primary-color="#3B82F6"
        data-greeting="Hi! How can I help you today?"
        data-user-id="user_12345"
        data-user-email="john@example.com"
        data-handoff-user-id="crm_user_12345">
</script>

<script src="https://widget.strikeup.io/embed.js"
        data-widget-id="wgt_abc123xyz"
        data-position="bottom-right"
        data-theme="light"
        data-primary-color="#3B82F6"
        data-greeting="Hi! How can I help you today?"
        data-user-id="user_12345"
        data-user-email="john@example.com"
        data-handoff-user-id="crm_user_12345">
</script>

Available Configuration Options

Attribute	Values / description	Default
data-position	bottom-right, bottom-left, top-right, top-left	bottom-right
data-theme	light, dark, auto	auto
data-primary-color	Any hex color code	#3B82F6
data-greeting	Custom greeting message	Hello! How can I help?
data-user-id	Your internal user ID	(none)
data-user-email	User’s email for context	(none)
data-handoff-user-id	CRM/support system user ID — used as priority external_id when creating or matching Intercom contacts during handoff. Overrides data-user-id for handoff integrations.	(none)
data-auto-open	true, false	false

White-Labeling

Customize the widget to match your brand identity. Available options:

Custom colors (primary, secondary, background)
Your logo instead of StrikeUp branding
Custom greeting messages and button text
Custom avatar images
“Powered by” badge removal (Enterprise plan)

Configure white-label settings in your dashboard under Widget → Branding.

React/Vue/Angular Integration

Using a modern framework? Import the widget dynamically:

// React Example
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://widget.strikeup.io/embed.js';
  script.setAttribute('data-widget-id', 'wgt_abc123xyz');
  script.setAttribute('data-user-id', userId);
  if (handoffUserId) script.setAttribute('data-handoff-user-id', handoffUserId);
  document.body.appendChild(script);
  
  return () => {
    document.body.removeChild(script);
  };
}, [userId]);

// React Example
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://widget.strikeup.io/embed.js';
  script.setAttribute('data-widget-id', 'wgt_abc123xyz');
  script.setAttribute('data-user-id', userId);
  if (handoffUserId) script.setAttribute('data-handoff-user-id', handoffUserId);
  document.body.appendChild(script);
  
  return () => {
    document.body.removeChild(script);
  };
}, [userId]);

// React Example
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://widget.strikeup.io/embed.js';
  script.setAttribute('data-widget-id', 'wgt_abc123xyz');
  script.setAttribute('data-user-id', userId);
  if (handoffUserId) script.setAttribute('data-handoff-user-id', handoffUserId);
  document.body.appendChild(script);
  
  return () => {
    document.body.removeChild(script);
  };
}, [userId]);

Multiple Widgets Per Page
You can embed multiple widgets with different configurations on the same page. Each widget maintains its own state and conversation history.

Previous: Feature Flags & Granular Control

Next: Human Handoff