Appearance

Async Script Loading ​

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

For how consent management relates to site performance, see Performance & Privacy.

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, then click Save Changes.

docs (19).png

2. Copy the updated script and replace it in Webflow ​

Enabling async changes the script tag — it now includes the async attribute. You must update the script in your Webflow site settings for this change to take effect.

  1. Go to the Installation tab in Consent Pro
  2. Click the copy button to copy the updated script snippet — it will now look like:
    html
    <script async src=”https://api.consentpro.com/...” type=”text/javascript” finsweet=”consentpro” siteid=”...”></script>
  3. Go to Webflow Site Settings > Custom Code and replace the existing Consent Pro script in the <head> section with the copied script
  4. Publish your site to apply the change

WARNING

If you skip this step, the script on your live site will still load in blocking mode regardless of the setting in the app.

3. 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

4. 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 ​

  • After toggling async on or off, always copy the updated script from the Installation tab and replace it in Webflow Site Settings — the script tag itself changes and the live site won't reflect your setting until you do
  • 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 — it must execute before other scripts are evaluated
  • Never combine auto-blocking with async loading — use the synchronous (non-async) setup for auto-blocking
  • If in doubt about GDPR compliance, use the synchronous (non-async) setup — it guarantees no tracking scripts run before the user consents

Need help? ​

Get free support in our forum