Flidget setup guide

Setup steps

Steps 1–3 connect your app once. Step 4 turns on drift; steps 5–6 turn on exit capture; step 7 polishes the chat in the dashboard.

1. 1

   Create an account and open Widget Studio

   Register free, then open Dashboard → Widget Studio. You’ll use Drift Detection and Retention Copilot studio — both ship ready-made snippets with your URLs and public key filled in.

   • Copy, don’t type

     Use the copy buttons in the UI. Wrong URLs or keys are the #1 setup issue.

   • Same public key

     Drift and Copilot use the same key; you’ll paste it wherever the docs say appId / public key.

2. 2

   Add Flidget to your app

   In bundled apps run npm install @flidget/web-sdk. Without a bundler, use the script tags from Widget Studio on the routes where Flidget should run.

   • One install, both products

     init + track power drift; the same init loads Retention Copilot on pages where you enable it.

   • Browser only

     Call init and track from client code (e.g. useEffect), not during SSR.

3. 3

   Identify every logged-in user

   Call Flidget.init with your public key, userId, and email once you know who they are. Best practice: a shared client layout for the whole logged-in app so drift events and cancel-page behavior always attach to the right person.

   • Retention Copilot

     loadExitChat stays on by default so the cancel route can open the widget after you add the embed and trigger (steps 5–6).

   • Drift

     The same init session receives Flidget.track events from anywhere in the app (step 4).

4. 4

   Drift: configure features, then send events

   In Widget Studio → Drift Detection, list the actions that prove a user is getting value (one per line) and the event name your code will send (e.g. feature_used). Save — that mapping is what makes dashboard reasons readable.

   • Track real behavior

     After init, call Flidget.track when those actions happen — same pattern as the samples below.

   • Richer signal

     session_start on login and page_view on navigation help show the user is still active.

   • Read the results

     Open Dashboard → Drift for labels (Healthy / Risky / Drifting) and plain-language explanations.

   Implementation

   Recommended for Next.js, Vite, and bundled apps: install once, init after login, track on success.

   npm (@flidget/web-sdk)HTML (script tag, no bundler)

   npm (@flidget/web-sdk)

   Keep it short. Copy & paste.

   "use client";
   
   import Flidget from "@flidget/web-sdk";
   import { useEffect } from "react";
   
   // npm install @flidget/web-sdk
   
   const PUBLIC_KEY = process.env.NEXT_PUBLIC_FLIDGET_PUBLIC_KEY ?? "YOUR_PUBLIC_KEY";
   
   export function FlidgetDriftRoot({ userId, userEmail }: { userId: string; userEmail: string }) {
     useEffect(() => {
       Flidget.init({ appId: PUBLIC_KEY, userId, email: userEmail });
     }, [userId, userEmail]);
   
     const onInviteSuccess = () => {
       Flidget.track("feature_used", { feature: "invite_teammate" });
     };
   
     return <button onClick={onInviteSuccess}>Invite teammate</button>;
   }

   Healthy

   Active recently, using key features.

   Risky

   Engagement dropping — good time to reach out.

   Drifting

   High churn risk — act soon.

   Tracked users & pricing

   Free: 10 users · Starter: 200 · Growth: 1,000 · Scale: unlimited. Over limit, new drift rows pause until you upgrade — Dashboard → Billing. Pricing →

   Full drift code guideDrift configuration →
5. 5

   Retention Copilot: embed on the cancel page

   Open Retention Copilot studio and copy the snippet. Place it only on the URL where people actually cancel — not on your entire marketing site.

   • React / Next / SPA

     Client code on the cancel route; same Flidget.init pattern as step 3.

   • Plain HTML

     Scripts before </body>: identity, then widget loader — order matters.

   • Verify

     Load the cancel URL in a private window; you should see Flidget network activity.

   Implementation

   Recommended: init loads widget.js and wires the overlay; add data-breakup="trigger" on your cancel control.

   npm (@flidget/web-sdk)HTML (script tag)

   npm (@flidget/web-sdk)

   Copy from Retention Copilot studio for your exact URL and key.

   "use client";
   
   import Flidget from "@flidget/web-sdk";
   import { useEffect } from "react";
   
   // npm install @flidget/web-sdk
   
   const PUBLIC_KEY = process.env.NEXT_PUBLIC_FLIDGET_PUBLIC_KEY ?? "YOUR_PUBLIC_KEY";
   
   export function RetentionCopilotCancelArea({ userId, userEmail }: { userId: string; userEmail: string }) {
     useEffect(() => {
       Flidget.init({
         appId: PUBLIC_KEY,
         userId,
         email: userEmail,
         loadExitChat: true,
       });
     }, [userId, userEmail]);
   
     return null;
   }
   
   // Add data-breakup="trigger" on your cancel button, or call Flidget.openExitChat() after load.

   Samples use https://flidget.com; your studio snippet uses your production origin.

6. 6

   Wire the cancel control

   Retention Copilot must open before your existing cancel, portal, or confirmation flow.

   • Find the real control

     The button or link that starts churn or opens the billing portal.

   • Add the trigger

     On that element: data-breakup="trigger" (below).

   • Flow

     Chat first; when they finish or skip, your previous behavior runs unchanged.

   data-breakup="trigger"

   Stripe, Paddle, Chargebee hosted pages

   Put the trigger on your button that opens the portal — hosted pages can’t run your script.

   Overlay checkout? In the cancel callback call Flidget.openExitChat() or window.FlidgetBreakup?.open().

7. 7

   Tune Retention Copilot in the dashboard

   In Retention Copilot studio, adjust copy, colors, position, and voice vs text. Changes apply on the next page load — usually no new deploy.

Get help

Email us for same-day replies on setup questions, or use the contact form.