Appearance

Async Script Loading ​

Consent Pro supports loading scripts asynchronously to ensure your website performance is not impacted by consent management.

Overview ​

By default, Consent Pro blocks third-party scripts until user consent is granted. When consent is provided, blocked scripts are loaded asynchronously to avoid blocking the main thread and degrading page performance.

How It Works ​

  1. Script Detection — Consent Pro scans your page for third-party scripts and categorizes them based on your configuration
  2. Script Blocking — Scripts that require consent are prevented from loading until the user grants permission
  3. Async Loading — Once consent is granted, scripts are loaded asynchronously in the correct order

How to use async ​

1. Enable Load Script Async ​

Go to ‘Banners’ > ‘Global settings’ and enable ‘Load Script Async’

docs (19).png

2. Scan and complete setup in the app ​

Before updating the scripts in the app, make sure your setup is complete in the app. This will ensure the trackers are detected, categorized, and filled with the necessary information for users. Go to the next step when you see the success message "You are all set”.

docs (20).png

3. Update scripts & iframes manually ​

We must be able to load or block scripts on your website based on a user's consent preferences. For Consent Pro to block scripts before the user's decision, you need to update each cookie-related script in your project.

Scripts:

Set the type attribute to fs-consent and add fs-consent-categories with the appropriate category value.

Example:

jsx
<script type="fs-consent" fs-consent-categories="analytics" src="https://example.com/analytics.js"></script>

When you do that, the scripts will look disabled. This is fine and expected.

image.png

Iframes:

Replace the src attribute with fs-consent-src and add the fs-consent-categories attribute.

Example:

jsx
<iframe
  fs-consent-src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0"
  fs-consent-categories="analytics"
  allowfullscreen=""
  title="Video embed"
></iframe>

Category Reference

Set fs-consent-categories to the value that matches the type of cookies the element sets:

CategoryValue
Analyticsanalytics
Marketingmarketing
Personalizationpersonalization

You can assign an element to multiple categories by separating values with a comma, the element will only load once the visitor has accepted all of the specified categories:

jsx
<script type="fs-consent" fs-consent-categories="analytics,marketing" src="https://example.com/script.js"></script>

Callback Queue Pattern ​

Since the script loads asynchronously, use the callback queue pattern to ensure your code runs after Consent Pro is ready:

jsx
window.FinsweetConsentPro = window.FinsweetConsentPro || [];
window.FinsweetConsentPro.push([
  'consent',
  (FinsweetConsentPro) => {
    // Your code here, runs after Consent Pro initializes
  },
]);

A common use case is loading a custom font only when the visitor has accepted the personalization category. Place this inline script after the Consent Pro script tag:

html
<script>
  window.FinsweetConsentPro = window.FinsweetConsentPro || [];
  window.FinsweetConsentPro.push([
    'consent',
    (FinsweetConsentPro) => {
      if (FinsweetConsentPro.consents.personalization) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap';
        document.head.appendChild(link);
      }
    },
  ]);
</script>

Best Practices ​

  • Always use the non async attribute on the Consent Pro script tag for proper compliance management

  • Use the callback queue pattern instead of relying on script load order

  • Place the Consent Pro script tag as early as possible in the <head> for faster initialization

  • Do not use defer on the Consent Pro script tag to ensure consent is evaluated as early as possible

  • Never combine auto-blocking with async loading — use the synchronous setup for auto-blocking

  • If in doubt, use the synchronous (non-async) setup with auto-blocking for the strongest compliance guarantee

Need help? ​

Get free support in our forum