A practical guide for making the Bakstage.AI widget load only after a visitor accepts functional cookies, instead of loading unconditionally on every page view.

Why bother?

If your site shows a cookie banner at all, any non-essential third-party script — chat widgets included — should legally only load after the visitor consents to that category of cookie (usually "Functional" or "Preferences"). Loading Bakstage.AI unconditionally alongside a cookie banner that implies it's optional is a common compliance gap, and it also means the widget's own network requests and storage happen before anyone's agreed to them.

The goal: the widget doesn't exist on the page at all until consent is given, and it appears seamlessly right after — no page reload required.

The high-level approach

1. Don't load the Bakstage script tag directly in your HTML. Keep only the small config snippet (the one that sets bakstageAppId / bakstageSettings) — define it as a function, don't call it yet.
2. Register Bakstage as a named service in your cookie consent tool, under whichever category you use for functional/chat cookies.
3. On consent, dynamically inject the Bakstage script tag, then call the config function and the widget's init function yourself.
4. On revoke, hide the widget (full teardown usually isn't supported by chat widgets — more on that below).
5. Any button that opens the widget (e.g. a "Chat with us" CTA elsewhere on the site) needs to check consent state first, rather than assuming the widget is already loaded.

This same pattern works with any cookie consent manager (OneTrust, Cookiebot, vanilla-cookieconsent, CookieYes, etc.) — only the exact hook/callback names differ. The examples below use vanilla-cookieconsent since it's common and free, but the logic transfers directly.

Step-by-step implementation

1. Make the widget config-only at page load

In your HTML, keep the config function defined, but don't call it and don't load the script tag yet:

<script type="text/javascript">
  window.initWebWidgetConfig = function () {
    window.bakstageAppId = "YOUR_APP_ID";
    window.bakstageSettings = { widgetId: "YOUR_WIDGET_ID" };
  };
</script>

Remove (or comment out) the line that used to load the script directly:

<!-- Don't do this unconditionally anymore -->
<!-- <script src="<https://app.bakstage.me/inject/web-widget-bakstage.js>"></script> -->