Support

Integration

How Flidget hooks into your cancel flow (any frontend)

Flidget does not care whether you built your app with React, Vue, Svelte, Angular, Next.js, Rails, Laravel, plain HTML, or something else. Integration is the same idea everywhere: load one script on the page where people cancel, tell Flidget which button opens cancel, and optionally pass who is logged in. The script runs on your domain next to your billing UI — it is not a separate checkout iframe you have to theme.

1. 1

   Get your embed snippet

   Create a Flidget account, then open Dashboard → Widget. Copy the script tag we show there — it includes your public key and the correct widget.js URL for your environment.

   Register if you do not have a workspace yet.

2. 2

   Put the script on the cancel page

   Add that single <script>tag once per page where users can start cancellation — usually the same page as your "Cancel subscription" or "Close account" button. A common pattern is placing it just before </body>.

   Works with: server-rendered pages, SPAs, and hybrid apps. If your framework has a root layout, document shell, or index.html, that is usually the right place — as long as the script runs on the live cancel route.

   Shape of the tag (values from your dashboard)

   <script
     src="https://YOUR-FLIDGET-APP/widget.js"
     data-public-key="YOUR_PUBLIC_KEY"
     async
   ></script>

3. 3

   Mark the real cancel control

   On the element that should start cancellation (button or link), add this attribute exactly:

   data-breakup="trigger"

   The first time someone clicks it, Flidget opens the exit chat and pauses the normal click. If they dismiss or finish the chat, the same click is allowed through so your existing cancel flow still runs unchanged.

   Stripe, Paddle, Chargebee, PayPal, etc. — same rule

   You cannot embed Flidget insidea provider's hosted customer portal (different site or their iframe). Put the trigger on yourpage: the button that says "Cancel", "Manage subscription", or "Open billing portal" on your domain. After the chat, your code still opens their portal URL or checkout — unchanged.

   Checkout overlay on your site? After widget.js loads, call window.FlidgetBreakup?.open()from your provider's close / cancel handler — same idea for Paddle, Stripe, Chargebee, or any SDK that fires when the overlay ends without payment. Flidget does not hook those UIs for you; one callback line per stack.

4. 4

   Optional: who is chatting (recommended)

   If the visitor is logged in, set a small global object before the script loads so transcripts show a stable identifier in your dashboard:

   window.__breakupUser = { email: "user@example.com" };

   In React/Vue/etc., run this in the same place you bootstrap the page (layout effect, route guard, or inline script from the server) so it exists when widget.js executes.

5. 5

   Style and copy in the designer

   Colors, position, first message, sounds, and quick replies are all configured in Dashboard → Widget — no redeploy needed for most tweaks. The embed snippet URL stays the same; changes apply to visitors on their next page load.