Single-Page Applications

Single-page applications (SPAs) built with frameworks like React, Angular, or Vue manage page transitions by dynamically rewriting the DOM rather than performing full page navigations. The consent banner is injected as a DOM element, and your application can remove it during route changes or component re-renders.

Banner Removal

When DataGrail Consent initializes, it injects an <aside class="dg-consent-banner"> element into the document body using a Shadow DOM container. On a traditional multi-page site, this element persists until the visitor navigates away. In an SPA:

• Route changes may cause your framework to replace or clear portions of the DOM
• Full re-renders of the application root can remove all child elements, including the banner
• DOM cleanup routines in your framework may remove elements it did not create

When the banner element is removed from the DOM, visitors can no longer interact with it.

Re-displaying the Banner

Call window.DG_BANNER_API.showConsentBanner() to re-inject and display the banner after your application removes it. This method reinitializes the banner DOM, resets it to the first consent layer, and makes it visible.

window.DG_BANNER_API.showConsentBanner();

Calling showConsentBanner() when the banner is already in the DOM is a no-op — it will not duplicate the element.

Integration Patterns

Route Change Listener

Re-display the banner after client-side navigation by listening for route changes.

// React Router example
useEffect(() => {
  if (window.DG_BANNER_API) {
    window.DG_BANNER_API.showConsentBanner();
  }
}, [location.pathname]);

On-demand Display

Trigger the banner from a "Cookie Settings" link in your footer so visitors can update their preferences at any time.

function openConsentBanner() {
  if (window.DG_BANNER_API) {
    window.DG_BANNER_API.showConsentBanner();
  }
}

<a href="#" onclick="openConsentBanner(); return false;">Cookie Settings</a>

Checking Visibility

Use window.DG_BANNER_API.isVisible() to check whether the banner is currently displayed before taking action.

if (!window.DG_BANNER_API.isVisible()) {
  window.DG_BANNER_API.showConsentBanner();
}

Block Page Reloads

By default, DataGrail Consent reloads the page when a visitor updates their consent preferences. In an SPA, a full page reload disrupts the user experience and defeats the purpose of client-side routing.

You should block page reloads and use callbacks to respond to consent changes in your application code. See the Blocking Page Reloads guide for all available methods.

Callback Requirement

When you block reloads, your application must handle consent changes through callbacks. DataGrail will not automatically enforce updated preferences on scripts already running on the page.

API Reference

These window.DG_BANNER_API methods are relevant for SPA integrations.

Method	Description
showConsentBanner()	Re-injects (if needed) and displays the banner from the first layer
hideConsentBanner()	Hides the banner without changing consent state
isVisible()	Returns true if the banner is currently displayed
getConsentPreferences()	Returns the visitor's current consent preferences
categoryEnabled(category)	Returns whether a specific consent category is enabled
blockReload(block)	Dynamically enables or disables page reload blocking