IframeManager

You can synchronize the state of iframe-manager with CookieConsent (v1.2.0+) by using the onChange callback. When a user clicks the loadAllBtn button, the eventSource.type will be 'click'. You can then retrieve the currently accepted services from CookieConsent and merge them with the changedServices provided by the onChange callback to ensure all newly loaded services are also accepted in CookieConsent.

im.run({
    currLang: 'en',

    onChange: ({changedServices, eventSource}) => {

        if(eventSource.type === 'click') {
            /**
             * Retrieve array of already accepted services
             * and add the new service
             */
            const servicesToAccept = [
                ...CookieConsent.getUserPreferences().acceptedServices['analytics'], //cookieconsent v3
                ...changedServices
            ];

            CookieConsent.acceptService(servicesToAccept, 'analytics');
        }
    },

    services: {
        // ...
    }
});

To use IframeManager, import the script and stylesheet, then call iframemanager() to create an instance and .run() to apply your configuration.

As an external script

Create an app.js file and import it after the iframemanager.js script in your HTML.

As an inline script

Wrap your configuration in a window.addEventListener('load', ...) listener to ensure the DOM is ready.

(function(){
    const im = iframemanager();

    im.run({
        currLang: 'en',
        services : {
            youtube : {
                embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}',
                thumbnailUrl: 'https://i3.ytimg.com/vi/{data-id}/hqdefault.jpg',
                iframe : {
                    allow : 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;'
                },
                languages : {
                    en : {
                        notice: 'This content is hosted by a third party...',
                        loadBtn: 'Load video',
                        loadAllBtn: "Don't ask again"
                    }
                }
            }
        }
    });
})();

If a service (like Twitter) provides its own markup and script to generate iframes, you can implement a custom widget.

1. Markup: Place the service's markup inside a div with a data-placeholder attribute. Ensure the parent container has data-service="[service_name]" and a fixed width and height to prevent layout shifts.
2. Implementation: Define the service in the im.run configuration using onAccept and onReject callbacks.
   • onAccept: Dynamically load the required scripts, initialize the widget, and call setIframe with the resulting iframe element.
   • onReject: Remove the element from the DOM.

Use im.childExists to safely check for the existence of properties or elements during initialization.

<div data-service="twitter" data-widget style="width: 300px; height: 501px">
    <div data-placeholder>
        <blockquote class="twitter-tweet">...</blockquote>
    </div>
</div>

im.run({
    services: {
        twitter: {
            onAccept: async (div, setIframe) => {
                // Load external script
                await CookieConsent.loadScript('https://platform.twitter.com/widgets.js');

                // Initialize widget and set the iframe
                await im.childExists({childProperty: 'twttr'}) && await twttr.widgets.load(div);
                await im.childExists({parent: div}) && setIframe(div.querySelector('iframe'));
            },
            onReject: (iframe) => {
                iframe && iframe.parentElement.remove();
            }
        }
    }
})

Vimeo configuration uses an asynchronous thumbnailUrl function to fetch the thumbnail from the Vimeo API v2.

im.run({
    currLang: 'en',
    services: {
        vimeo: {
            embedUrl: 'https://player.vimeo.com/video/{data-id}',
            iframe: {
                allow : 'fullscreen; picture-in-picture, allowfullscreen;',
            },
            thumbnailUrl: async (dataId, setThumbnail) => {
                const url = `https://vimeo.com/api/v2/video/${dataId}.json`;
                const response = await (await fetch(url)).json();
                const thumbnailUrl = response[0]?.thumbnail_large;
                thumbnailUrl && setThumbnail(thumbnailUrl);
            },
            languages: {
                en: {
                    notice: '...', 
                    loadBtn: 'Load video',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});

Configure YouTube by providing the embedUrl (using {data-id} as a placeholder), thumbnailUrl, and iframe permissions. You can also define localized languages for the notice, load button, and 'don't ask again' button.

im.run({
    currLang: 'en',
    services: {
        youtube: {
            embedUrl: 'https://www.youtube-nocookie.com/embed/{data-id}',
            thumbnailUrl: 'https://i.ytimg.com/vi/{data-id}/hqdefault.jpg',
            iframe: {
                allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;',
            },
            languages: {
                en: {
                    notice: 'This content is hosted by a third party...',
                    loadBtn: 'Load video',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});

<div data-service="youtube" data-id="5b35haQV7tU"></div>

Dailymotion configuration supports an asynchronous thumbnailUrl function that can fetch data from the Dailymotion API using the dataId.

im.run({
    currLang: 'en',
    services: {
        dailymotion: {
            embedUrl: 'https://www.dailymotion.com/embed/video/{data-id}',
            thumbnailUrl: async (dataId, setThumbnail) => {
                const url = `https://api.dailymotion.com/video/${dataId}?fields=thumbnail_large_url`;
                const response = await (await fetch(url)).json();
                const thumbnailUlr = response?.thumbnail_large_url;
                thumbnailUlr && setThumbnail(thumbnailUlr);
            },
            iframe: {
                allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;',
            },
            languages: {
                en: {
                    notice: '...', 
                    loadBtn: 'Load video',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});

Google Maps can be configured in two ways:

1. With API Key: Use the v1/place endpoint.
2. Without API Key: Use the standard embed endpoint with a protobuf pb parameter.

Both methods support data-autoscale on the container div.

// With API Key
im.run({
    currLang: 'en',
    services: {
        googlemaps: {
            embedUrl: 'https://www.google.com/maps/embed/v1/place?key=API_KEY&q={data-id}',
            iframe: { allow: 'picture-in-picture; fullscreen;' },
            languages: {
                en: { notice: '...', loadBtn: 'Load map', loadAllBtn: "Don't ask again" }
            }
        }
    }
});

<!-- Example with API Key -->
<div data-service="GoogleMaps" data-id="Space+Needle,Seattle+WA" data-autoscale></div>

<!-- Example without API Key -->
<div data-service="googlemaps" data-id="!1m18!1m12!1m3!1d2659..." data-autoscale></div>

The .run() method accepts a configuration object to define how different services behave.

Top-level options:

• currLang: [String] Current language of the notice (must be defined in languages).
• autoLang: [Boolean] If true, uses the client's browser language instead of currLang [Optional].
• onChange: [Function] Callback fired when state changes. Receives ({changedServices, eventSource}) where changedServices is a string[] and eventSource contains type ('api' | 'click') and service (string) and action ('accept' | 'reject'). [Optional].

Service object properties:

Each service key (e.g., youtube) contains:

• embedUrl: [String] The URL template for the iframe. Use {data-id} as a placeholder.
• thumbnailUrl: [String | Function] URL for automatic thumbnails. Can be a static string, a dynamic string with {data-id}, or a function (dataId, setThumbnail) => void.
• iframe: [Object] Global settings for all iframes of this service. Includes:
  • allow: [String] Iframe's allow attribute.
  • params: [String] Iframe URL query parameters.
  • onload: [Function] (dataId, setThumbnail) => void called for each iframe [Optional].
  • Any other property added here will be set directly as an attribute on the <iframe> element.
• cookie: [Object] Settings for the cookie set when the service is accepted. Includes name, path, samesite, and domain [Optional].
• languages: [Object] Multilanguage support. Each language key must contain a notice string, loadBtn (load single iframe), and loadAllBtn (load all and set cookie).

{
    currLang: 'en',
    autoLang: false,
    onChange: ({changedServices, eventSource}) => {
        // handle change
    },
    services : {
        myservice : {
            embedUrl: 'https://<myservice_embed_url>/{data-id}',
            thumbnailUrl: (dataId, setThumbnail) => {
                // fetch and set
                setThumbnail('https://path/to/image.png');
            },
            iframe: {
                allow: 'fullscreen',
                params: 'mute=1',
                frameborder: '0'
            },
            cookie: {
                name: 'cc_myservice',
                path: '/'
            },
            languages: {
                en: {
                    notice: 'Notice text',
                    loadBtn: 'Load video',
                    loadAllBtn: 'Don\'t ask again'
                }
            }
        }
    }
}

The plugin provides several methods to control service consent and manage state:

• run(config): Initializes the manager with the provided configuration.
• acceptService(service_name): Accepts a specific service or 'all' to enable all services. This sets the consent cookie and creates the iframes.
• rejectService(service_name): Rejects a specific service or 'all'. This erases the cookie and removes the iframes.
• getState(): Returns the current state of services.
  • state.services: Map<string, boolean>
  • state.acceptedServices: string[]
• getConfig(): Returns the entire configuration object.
• reset(hard_reset):
  • reset() (soft): Removes internal event listeners.
  • reset(true) (hard): Removes event listeners and resets each div to its original state (useful for React frameworks).

// Accept/Reject specific or all
im.acceptService('youtube');
im.acceptService('all');
im.rejectService('youtube');
im.rejectService('all');

// State and Config
const config = im.getConfig();
const state = im.getState();

// Resetting
im.reset(); // soft
im.reset(true); // hard