Integration

LiteConsent provides two ways to control which scripts run based on consent: markup mode and resource rules. You can combine both approaches.

Markup mode

Add data-consent attributes directly to your script tags and move the URL to data-src. This is the recommended approach for most sites.

<script data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
        type="text/plain"
        data-consent="analytics"></script>

You can also block iframes the same way:

<iframe data-src="https://www.youtube.com/embed/VIDEO_ID"
        data-consent="marketing"
        width="560" height="315"></iframe>

Supported attributes:

Resource rules

Resource rules let you block third-party scripts and iframes by domain, without modifying your HTML. Configure rules in the Rules tab of your site settings. Each rule maps a domain (or URL pattern) to a consent category.

Rules are compiled into your site's config file (c.js) and applied automatically at runtime. LiteConsent intercepts DOM appendChild and insertBefore calls and blocks scripts that match a rule until the corresponding category is consented to.

You can also use the Setup Assistant to automatically discover third-party scripts on your site and create resource rules for them.

Google Tag Manager

If you use Google Tag Manager, add the GTM script with data-consent="necessary" (or leave it uncategorized) so GTM itself always loads. Then use GTM's built-in consent mode triggers, which LiteConsent updates automatically via Google Consent Mode v2.

Single-page applications (SPAs)

LiteConsent works with SPAs built on React, Vue, Next.js, Nuxt, and similar frameworks. Place the script tag in your root HTML file. The banner persists across client-side route changes. Consent state is available via the JavaScript API:

// Check if a specific category is consented
if (window._lc && window._lc.has('analytics')) {
    // Load analytics
}

// Get the full consent object
var consent = window._lc.getConsent();