Embed Script

One line of code to add RetainQ to any website or app.

Basic Integration

Add this script tag to your site, typically before the closing </body> tag:

<script
  src="https://app.retainq.com/widget.js"
  data-flow="your-flow-slug"
  data-trigger="#BUTTON_ID"
></script>

Attributes

Attribute	Required	Description
`data-flow`	Yes	Your flow's unique slug (found in Flow Settings)
`data-trigger`	Yes	CSS selector of your cancel button (e.g. `#cancel-btn`, `.cancel-subscription`)

Identifying Users (Optional)

To skip the email collection step and pre-identify the customer, add this before the widget script:

<script>
  window.RetainQ = {
    user: {
      id: "user_123",        // Your internal user ID
      email: "user@example.com",
      name: "John Doe"       // Optional
    }
  };
</script>

When a user is identified, RetainQ tracks their full cancellation history and calculates a churn risk score automatically.

How It Works

The script loads asynchronously (~4KB, no performance impact)
It attaches a click listener to the element matching your data-trigger selector
When clicked, it opens the retention flow in a modal overlay
If the customer accepts an offer → you get notified (email + webhook)
If they decline → they're redirected to your cancellation URL

Single Page Apps (React, Vue, etc.)

For SPAs where the cancel button might not exist on initial page load, the widget uses a MutationObserver to detect when the trigger element appears in the DOM. No extra configuration needed.

Testing

You can test your flow directly at: https://app.retainq.com/c/your-flow-slug

This hosted URL works without the embed script — useful for previewing before integration.