Privacy
Cookie consent
Be GDPR / CCPA-friendly in a couple of lines. Two drop-in helpers handle the whole flow — storing the visitor's choice, respecting DNT/GPC, and gating analytics & marketing events until consent is given — so you never wire consent by hand.
Overview
Both helpers import directly from flowgrid-sdk:
setupConsent()— creates a consent manager andkeeps FlowGrid's consent gates in sync automatically. Returns the manager so you can readhasConsented()/getPreferences()and callacceptAll()/rejectNonEssential().attachConsentBanner()— does all of the above andwires an existing HTML banner's buttons, showing it only when the visitor hasn't consented yet.
Which one do I use?
Using plain HTML or a non-React framework? Reach for attachConsentBanner()— one call and you're done. Rendering the banner in React/JSX? Use setupConsent() and drive visibility with component state (shown below).
1. Add the banner markup
Give the container id="cookie-banner" and the buttonsid="accept-btn" / id="reject-btn". All three ids are configurable via options. Start it hidden — the helper reveals it when needed.
1<div id="cookie-banner" style="display:none" class="fixed bottom-0 inset-x-0 ...">
2 <p>We use cookies to improve your experience.</p>
3 <button id="reject-btn">Reject non-essential</button>
4 <button id="accept-btn">Accept all</button>
5</div>2a. Vanilla JS — one call
attachConsentBanner() does everything: clicking accept callsacceptAll(), reject calls rejectNonEssential(), the banner hides itself, and consent is synced to FlowGrid.
1import { attachConsentBanner } from "flowgrid-sdk";
2
3const banner = attachConsentBanner({
4 cookieName: "my_app_consent",
5 cookieDays: 180,
6 respectDNT: true,
7 requireExplicitConsent: true,
8});
9
10// banner is { manager, show, hide, destroy } (or null during SSR / if the
11// #cookie-banner element isn't on the page yet).Custom element ids
Pass bannerId, acceptId and rejectId to match your own markup, or manager to reuse a manager you already created with setupConsent().
2b. React component
Prefer JSX? Use setupConsent() (consent is already synced) and drive the banner with state. Drop <CookieBanner /> near your app root.
1import { useEffect, useState } from "react";
2import { setupConsent } from "flowgrid-sdk";
3
4export function CookieBanner() {
5 const [manager, setManager] = useState<ReturnType<typeof setupConsent>>();
6 const [visible, setVisible] = useState(false);
7
8 useEffect(() => {
9 const cm = setupConsent({ cookieName: "my_app_consent", cookieDays: 180, respectDNT: true });
10 setManager(cm);
11 if (!cm.hasConsented()) setVisible(true);
12 }, []);
13
14 if (!visible) return null;
15
16 return (
17 <div className="fixed bottom-0 inset-x-0 p-4 bg-background border-t">
18 <p className="text-sm">We use cookies to improve your experience.</p>
19 <button onClick={() => { manager?.rejectNonEssential(); setVisible(false); }}>
20 Reject non-essential
21 </button>
22 <button onClick={() => { manager?.acceptAll(); setVisible(false); }}>
23 Accept all
24 </button>
25 </div>
26 );
27}Re-open the banner later
A "Manage cookies" link in your footer is a common requirement. Keep the handle returned by attachConsentBanner() and call show() — or in React, flip your visible state.
1const banner = attachConsentBanner();
2
3document
4 .getElementById("manage-cookies")
5 ?.addEventListener("click", () => banner?.show());
6
7// Call banner?.destroy() on teardown (e.g. a React effect cleanup) to remove listeners.Consent categories
Preferences are tracked per category: necessary (always on),analytics, marketing, and preferences. FlowGrid automatically gates analytics & marketing events until the visitor opts in. Toggle individual categories from a custom settings panel with update():
1import { setupConsent } from "flowgrid-sdk";
2
3const consent = setupConsent();
4
5// Save granular choices from a "cookie settings" dialog:
6consent.update({ analytics: true, marketing: false, preferences: true });
7
8// Read current state:
9const prefs = consent.getPreferences(); // { necessary, analytics, marketing, preferences }
10if (consent.hasConsented()) { /* visitor has made a choice */ }DNT / GPC respected by default
With respectDNT: true, a visitor sending Do-Not-Track or Global Privacy Control is treated as having declined non-essential categories automatically.
Lower-level API
setupConsent() wraps new ConsentManager() and calls FlowGridTransport.setConsent() for you on every change. If you need full control, both are still exported — drop the helper and wire the transport yourself:
1import { ConsentManager, FlowGridTransport as transport } from "flowgrid-sdk";
2
3const consent = new ConsentManager({
4 cookieName: "my_app_consent",
5 onChange: (prefs) => {
6 transport.setConsent({ analytics: prefs.analytics, marketing: prefs.marketing });
7 },
8});Migrating?
If your app currently does the above by hand, replace it with a single setupConsent() (or attachConsentBanner()) call and delete the manual transport.setConsent() plumbing.