### im.run(config) - Configure and Start

Source: https://context7.com/orestbida/iframemanager/llms.txt

Initializes the plugin with a configuration object defining services, language settings, and event callbacks.

```APIDOC
## im.run(config)

### Description
Configures the iframe manager and starts the monitoring process for iframe elements.

### Parameters
#### Request Body
- **config** (object) - Required - Configuration object containing services, language settings, and the onChange callback.
```

--------------------------------

### Configure YouTube Service

Source: https://context7.com/orestbida/iframemanager/llms.txt

Example configuration for YouTube video embeds with privacy-enhanced mode.

```javascript
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. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                    loadBtn: 'Load video',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});
```

--------------------------------

### Install IframeManager via NPM

Source: https://context7.com/orestbida/iframemanager/llms.txt

Install the IframeManager library using npm for your project.

```bash
# Install via npm
npm i @orestbida/iframemanager
```

--------------------------------

### Install iframemanager via CDN or NPM

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Use these commands or URLs to include the library in your project.

```bash
https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.3.0/dist/iframemanager.js
https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.3.0/dist/iframemanager.css
```

```bash
npm i @orestbida/iframemanager
```

--------------------------------

### im.getConfig() - Get Configuration

Source: https://context7.com/orestbida/iframemanager/llms.txt

Retrieves the configuration object currently used by the plugin instance.

```APIDOC
## im.getConfig()

### Description
Returns the entire configuration object passed to the run() method.

### Response
#### Success Response (200)
- **config** (object) - The configuration object containing current language settings and service definitions.
```

--------------------------------

### Configure Dailymotion Service

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Configure Dailymotion integration, including dynamic thumbnail URL fetching using their API. This setup is for embedding Dailymotion videos.

```javascript
im.run({
        currLang: 'en',
        services: {
            dailymotion: {
                embedUrl: 'https://www.dailymotion.com/embed/video/{data-id}',

                thumbnailUrl: async (dataId, setThumbnail) => {
                    // Use dailymotion's API to fetch the thumbnail
                    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: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.dailymotion.com/legal/privacy?localization=en" target="_blank">terms and conditions</a> of dailymotion.com.',
                        loadBtn: 'Load video',
                        loadAllBtn: "Don't ask again"
                    }
                }
            }
        }
    });
```

--------------------------------

### Get IframeManager Configuration

Source: https://context7.com/orestbida/iframemanager/llms.txt

Retrieve the entire configuration object that was passed to the `run()` method.

```javascript
const im = iframemanager();
im.run({ currLang: 'en', services: { /* ... */ } });

const config = im.getConfig();
console.log(config.currLang);     // 'en'
console.log(config.services);     // { youtube: {...}, vimeo: {...} }
```

--------------------------------

### Configure Google Maps Service with API Key

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Configuration for Google Maps integration that requires an API key. This snippet shows the initial setup for the service.

```javascript
im.run({
            currLang: 'en',
            services: {
                googlemaps: {

```

--------------------------------

### im.getState() - Get Current State

Source: https://context7.com/orestbida/iframemanager/llms.txt

Retrieves the current consent status of all managed services.

```APIDOC
## im.getState()

### Description
Returns the current state of all services, including a map of service statuses and an array of accepted service names.

### Response
#### Success Response (200)
- **services** (Map) - Map of all services and their boolean state.
- **acceptedServices** (Array) - List of accepted service names.
```

--------------------------------

### Setting iframe Attributes via Data Attributes

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

You can set any valid iframe attribute by prefixing it with 'data-iframe-'. This example shows how to set id, loading, and frameborder.

```html
<div
    data-service="youtube"
    data-id="5b35haQV7tU"
    data-autoscale
    data-iframe-id="myYoutubeEmbed"
    data-iframe-loading="lazy"
    data-iframe-frameborder="0">
</div>
```

--------------------------------

### Get Current State of Services

Source: https://context7.com/orestbida/iframemanager/llms.txt

Retrieve the current state of all managed services. The state includes a map of services and their boolean status, as well as an array of accepted service names.

```javascript
const im = iframemanager();
im.run({ /* config */ });

const state = im.getState();

// state.services: Map<string, boolean> - Map of all services and their state
console.log(state.services.get('youtube'));  // true or false

// state.acceptedServices: string[] - Array of accepted service names
console.log(state.acceptedServices);  // ['youtube', 'vimeo']
```

--------------------------------

### Custom Widget Implementation

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

How to implement custom widgets using the onAccept callback.

```APIDOC
## Custom Widget Implementation

### Description
Custom widgets require specific markup inside a `data-placeholder` div and an `onAccept` callback to load external scripts and initialize the widget.

### Implementation Example
```javascript
im.run({
    services: {
        twitter: {
            onAccept: async (div, setIframe) => {
                await CookieConsent.loadScript('https://platform.twitter.com/widgets.js');
                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();
            }
        }
    }
})
```
```

--------------------------------

### Initialize Custom Widget Service

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Load the widget script and initialize the component within the onAccept callback.

```javascript
im.run({
    services: {
        twitter: {
            onAccept: async (div, setIframe) => {
                // Using cookieconsent v3
                await CookieConsent.loadScript('https://platform.twitter.com/widgets.js');

                // Make sure the "window.twttr" property exists
                await im.childExists({childProperty: 'twttr'}) && await twttr.widgets.load(div);

                // Make sure the "iframe" element exists
                await im.childExists({parent: div}) && setIframe(div.querySelector('iframe'));
            },

            onReject: (iframe) => {
                iframe && iframe.parentElement.remove();
            }
        }
    }
})
```

--------------------------------

### Manage Services via API

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Use the provided methods to accept, reject, or reset services and retrieve configuration state.

```javascript
// accept specific service only
im.acceptService('youtube');

// accept all services (for example if user has given full consent to cookies)
im.acceptService('all');

// reject specific service
im.rejectService('youtube');

// reject all services (for example when user opts out of cookies)
im.rejectService('all');

// get entire config object
const config = im.getConfig();

// get current state (enabled/disabled services)
const state = im.getState();

// state.services: Map<string, boolean>
// state.acceptedServices: string[]

// soft reset, removes internal event listeners
im.reset();

// hard reset, same as above, but also resets each div to its original state (for react frameworks)
im.reset(true);
```

--------------------------------

### Configure and Run IframeManager

Source: https://context7.com/orestbida/iframemanager/llms.txt

Initialize the iframe manager with a configuration object. This includes language settings, callbacks, and service definitions. The `onChange` callback is fired when a service's state changes.

```javascript
const im = iframemanager();

im.run({
    currLang: 'en',
    autoLang: false,  // Set true to auto-detect browser language

    // Callback fired when service state changes
    onChange: ({ changedServices, eventSource }) => {
        console.log('Changed services:', changedServices);
        console.log('Event source type:', eventSource.type);    // 'api' or 'click' 
        console.log('Service name:', eventSource.service);
        console.log('Action:', eventSource.action);              // 'accept' or 'reject'
    },

    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;',
                params: 'mute=1&start=21'  // Optional query parameters
            },

            cookie: {
                name: 'im_youtube',
                path: '/',
                samesite: 'lax',
                domain: location.hostname,
                expiration: 182  // Days
            },

            languages: {
                en: {
                    notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                    loadBtn: 'Load video',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});
```

--------------------------------

### Configure YouTube Service

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Set up YouTube integration by providing embed and thumbnail URLs, iframe attributes, and language-specific text. This configuration is used when you want to embed YouTube videos.

```javascript
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. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                        loadBtn: 'Load video',
                        loadAllBtn: "Don't ask again"
                    }
                }
            }
        }
    });
```

```html
<!-- https://www.youtube.com/watch?v=5b35haQV7tU -->
<div
    data-service="youtube"
    data-id="5b35haQV7tU"
></div>
```

--------------------------------

### Configure Vimeo Service

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Set up Vimeo integration with dynamic thumbnail fetching via the Vimeo API. This configuration is for embedding Vimeo videos.

```javascript
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: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://vimeo.com/terms" target="_blank">terms and conditions</a> of vimeo.com.',
                        loadBtn: 'Load video',
                        loadAllBtn: "Don't ask again"
                    }
                }
            }
        }
    });
```

--------------------------------

### Create an iframe placeholder

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Use data attributes to define the service and ID for the iframe content.

```html
<div data-service="youtube" data-id="<video-id>"></div>
```

--------------------------------

### Configure Basic Iframe Embeds

Source: https://context7.com/orestbida/iframemanager/llms.txt

Configure embeds using data attributes on div elements.

```html
<!-- YouTube video embed -->
<div
    data-service="youtube"
    data-id="5b35haQV7tU"
    data-autoscale>
</div>

<!-- Vimeo video with custom thumbnail -->
<div
    data-service="vimeo"
    data-id="123456789"
    data-thumbnail="/path/to/custom-thumbnail.jpg"
    data-autoscale>
</div>

<!-- Google Maps embed -->
<div
    data-service="googlemaps"
    data-id="!1m18!1m12!1m3..."
    data-autoscale>
</div>

<!-- With custom iframe attributes -->
<div
    data-service="youtube"
    data-id="5b35haQV7tU"
    data-autoscale
    data-iframe-id="myYoutubePlayer"
    data-iframe-loading="lazy"
    data-iframe-frameborder="0">
</div>
```

--------------------------------

### Configure Vimeo Service with Dynamic Thumbnail

Source: https://context7.com/orestbida/iframemanager/llms.txt

Uses the thumbnailUrl callback to fetch video thumbnails asynchronously via the Vimeo API.

```javascript
im.run({
    currLang: 'en',
    services: {
        vimeo: {
            embedUrl: 'https://player.vimeo.com/video/{data-id}',

            iframe: {
                allow: 'fullscreen; picture-in-picture;'
            },

            // Fetch thumbnail dynamically via Vimeo API
            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: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://vimeo.com/terms" target="_blank">terms and conditions</a> of vimeo.com.',
                    loadBtn: 'Load video',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});
```

--------------------------------

### iframemanager() - Initialize Plugin

Source: https://context7.com/orestbida/iframemanager/llms.txt

Creates and returns a new IframeManager instance to access all plugin methods.

```APIDOC
## iframemanager()

### Description
Initializes the IframeManager plugin and returns an instance object containing all available API methods.

### Request Example
```javascript
const im = iframemanager();
```
```

--------------------------------

### JavaScript Configuration Object

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Global configuration options for the Iframe Manager, including service definitions, language settings, and callbacks.

```APIDOC
## JavaScript Configuration Object

### Description
Configure the Iframe Manager globally using a JavaScript object. This includes defining services, language settings, and callbacks.

### Method
JavaScript Configuration

### Endpoint
N/A

### Parameters
#### Configuration Object Properties
- **currLang** (String) - Optional - Current language of the notice (must also be defined in the `languages` object). Defaults to 'en'.
- **autoLang** (Boolean) - Optional - If enabled, uses the browser's current language instead of `currLang`.
- **onChange** (Function) - Optional - Callback fired when the state changes (a new service is accepted/rejected). Receives an object with `changedServices` (string array) and `eventSource` ({type: 'api' | 'click', service: string, action: 'accept' | 'reject'}).
- **services** (Object) - Required - An object containing definitions for each supported service.
    - **[serviceName]** (Object) - Configuration for a specific service.
        - **embedUrl** (String) - Required - The base URL for embedding content from this service.
        - **thumbnailUrl** (String | Function) - Optional - URL or function to fetch a thumbnail. Can be a static string, a dynamic string (e.g., `https://myservice_embed_url/{data-id}`), or a function `(dataId, setThumbnail) => { ... }`.
        - **iframe** (Object) - Optional - Global iframe settings for this service.
            - **allow** (String) - Optional - The `allow` attribute for the iframe.
            - **params** (String) - Optional - URL query parameters to append to the iframe source URL.
            - **onload** (Function) - Optional - A function that runs for each iframe configured with this service. Receives `dataId` and `setThumbnail`.
            - Any other property specified here will be set directly as an attribute on the iframe element (e.g., `frameborder`, `style`).
        - **cookie** (Object) - Optional - Settings for the cookie set when a service is accepted.
            - **name** (String) - Required - The name of the cookie.
            - **path** (String) - Optional - The path for the cookie.
            - **samesite** (String) - Optional - The `SameSite` attribute for the cookie (e.g., 'lax').
            - **domain** (String) - Optional - The domain for the cookie (defaults to `location.hostname`).
        - **languages** (Object) - Required - Language-specific settings for the service.
            - **[langCode]** (Object) - Settings for a specific language.
                - **notice** (String) - The HTML notice message.
                - **loadBtn** (String) - Text for the button to load the current iframe.
                - **loadAllBtn** (String) - Text for the button to load all iframes for this service and set a cookie.

### Request Example
```javascript
{
    currLang: 'en',
    autoLang: false,
    onChange: ({changedServices, eventSource}) => {
        console.log('Service state changed:', changedServices);
    },
    services: {
        myservice: {
            embedUrl: 'https://<myservice_embed_url>',
            thumbnailUrl: (dataId, setThumbnail) => {
                let url = `https://example.com/thumbnails/${dataId}.jpg`;
                setThumbnail(url);
            },
            iframe: {
                allow: 'fullscreen',
                params: 'mute=1&start=21',
                onload: (dataId, setThumbnail) => {
                    console.log(`Iframe loaded with data-id=${dataId}`);
                },
                frameborder: '0',
                style: 'border: 4px solid red;'
            },
            cookie: {
                name: 'cc_myservice',
                path: '/',
                samesite: 'lax',
                domain: location.hostname
            },
            languages: {
                en: {
                    notice: 'This content requires your consent.',
                    loadBtn: 'Load Content',
                    loadAllBtn: 'Allow All'
                },
                de: {
                    notice: 'Diese Inhalte erfordern Ihre Zustimmung.',
                    loadBtn: 'Inhalt laden',
                    loadAllBtn: 'Alle erlauben'
                }
            }
        }
    }
}
```

### Response
N/A (This section describes configuration, not API responses.)
```

--------------------------------

### Accept Service Programmatically

Source: https://context7.com/orestbida/iframemanager/llms.txt

Programmatically accept a specific service or all services. This action sets the consent cookie and loads the corresponding iframes.

```javascript
const im = iframemanager();
im.run({ /* config */ });

// Accept a specific service
im.acceptService('youtube');

// Accept all configured services at once
im.acceptService('all');
```

--------------------------------

### Configure Google Maps with API Key

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Configuration object for Google Maps requiring an API key, followed by the corresponding HTML placeholder.

```javascript
embedUrl: 'https://www.google.com/maps/embed/v1/place?key=API_KEY&q={data-id}',

                    iframe: {
                        allow: 'picture-in-picture; fullscreen;'
                    },

                    languages: {
                        en: {
                            notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://cloud.google.com/maps-platform/terms" target="_blank">terms and conditions</a> of Google Maps.',
                            loadBtn: 'Load map',
                            loadAllBtn: "Don't ask again"
                        }
                    }
                }
            }
        });
```

```html
<div
    data-service="GoogleMaps"
    data-id="Space+Needle,Seattle+WA"
    data-autoscale
></div>
```

--------------------------------

### im.acceptService(serviceName) - Accept Service

Source: https://context7.com/orestbida/iframemanager/llms.txt

Programmatically grants consent for a specific service or all services, triggering the loading of associated iframes.

```APIDOC
## im.acceptService(serviceName)

### Description
Accepts a service, sets the consent cookie, and loads all iframes associated with the service.

### Parameters
#### Path Parameters
- **serviceName** (string) - Required - The name of the service to accept, or 'all' to accept every configured service.
```

--------------------------------

### Import iframemanager assets in HTML

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Include the stylesheet in the head and the script in the body of your HTML document.

```html
<html>
  <head>
    ...
    <link rel="stylesheet" href="iframemanager.css">
  </head>
  <body>
    ...
    <script defer src="iframemanager.js"></script>
  <body>
</html>
```

--------------------------------

### Initialize IframeManager Plugin

Source: https://context7.com/orestbida/iframemanager/llms.txt

Create a new IframeManager instance to access its API methods.

```javascript
// Initialize iframemanager
const im = iframemanager();

// The im object now has access to all API methods:
// im.run(), im.acceptService(), im.rejectService(), im.getState(), im.getConfig(), im.reset()
```

--------------------------------

### Configure Custom Widget for Twitter

Source: https://context7.com/orestbida/iframemanager/llms.txt

Implements onAccept and onReject callbacks to manage external widget scripts and DOM elements.

```html
<!-- HTML: Twitter embed with widget attribute -->
<div data-service="twitter" data-id="463440424141459456" data-widget style="width: 300px; height: 501px">
    <div data-placeholder>
        <blockquote class="twitter-tweet">
            <p lang="en" dir="ltr">Tweet content here...</p>
        </blockquote>
    </div>
</div>
```

```javascript
im.run({
    currLang: 'en',
    services: {
        twitter: {
            onAccept: async (div, setIframe) => {
                // Load Twitter widget script
                await loadScript('https://platform.twitter.com/widgets.js');

                // Wait for twttr global to be available
                await im.childExists({ childProperty: 'twttr' });

                // Create tweet widget
                const tweet = await twttr.widgets.createTweet(div.dataset.id, div.firstElementChild);

                // Register the iframe with IframeManager
                tweet && setIframe(tweet.firstChild);
            },

            onReject: async (iframe, serviceDiv, showNotice) => {
                await im.childExists({ parent: serviceDiv });
                showNotice();
                serviceDiv.querySelector('.twitter-tweet').remove();
            },

            languages: {
                en: {
                    notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://twitter.com/tos" target="_blank">terms and conditions</a> of twitter.com.',
                    loadBtn: 'Load tweet',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});

// Helper function to load external scripts
function loadScript(src) {
    return new Promise((resolve) => {
        let script = document.querySelector(`script[src="${src}"]`);
        if (script) return resolve(true);

        script = document.createElement('script');
        script.onload = () => resolve(true);
        script.onerror = () => { script.remove(); resolve(false); };
        script.src = src;
        document.head.appendChild(script);
    });
}
```

--------------------------------

### Configure iframemanager as an external script

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Load the library and a custom configuration file in your HTML markup.

```html
<body>
    ...
    <script defer src="iframemanager.js"></script>
    <script defer src="app.js"></script>
<body>
```

```javascript
(function(){

    const im = iframemanager();

    // Example with youtube embed
    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. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                        loadBtn: 'Load video',
                        loadAllBtn: "Don't ask again"
                    }
                }
            }
        }
    });
})();
```

--------------------------------

### Configure Twitch Service

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Configure Twitch integration, including the embed URL which dynamically includes the parent hostname. This is for embedding Twitch streams.

```javascript
im.run({
        currLang: 'en',
        services: {
            twitch: {
                embedUrl: `https://player.twitch.tv/?{data-id}&parent=${location.hostname}`,

                iframe: {
                    allow: 'accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen;',
                },

                languages: {
                    en: {
                        notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.twitch.tv/p/en/legal/terms-of-service/" target="_blank">terms and conditions</a> of twitch.com.',
                        loadBtn: 'Load stream',
                        loadAllBtn: "Don't ask again"
                    }
                }
            }
        }
    });
```

--------------------------------

### Define a Custom Widget Placeholder

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Place the service-specific markup inside a data-placeholder div and remove any associated script tags.

```html
<div
    data-service="twitter"
    data-widget
    style="width: 300px; height: 501px"
>

    <div data-placeholder>
        <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a></blockquote>
    </div>

</div>
```

--------------------------------

### HTML Configuration

Source: https://context7.com/orestbida/iframemanager/llms.txt

Configure iframe embeds directly in the HTML using data attributes on div elements.

```APIDOC
## HTML Configuration

### Description
Configure embeds using data attributes on div elements.

### Parameters
#### Data Attributes
- **data-service** (string) - Required - Service name from configuration.
- **data-id** (string) - Required - Unique resource ID.
- **data-title** (string) - Optional - Notice title.
- **data-params** (string) - Optional - Iframe URL query parameters.
- **data-thumbnail** (string) - Optional - Custom thumbnail path.
- **data-ratio** (string) - Optional - Aspect ratio (e.g., 16:9).
- **data-autoscale** (boolean) - Optional - Enables responsive scaling.
- **data-widget** (boolean) - Optional - Used for custom widgets.
- **data-iframe-<attribute>** (string) - Optional - Sets any specific iframe attribute.
```

--------------------------------

### HTML Div Element Configuration

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Available options for the `<div>` element used to embed iframes.

```APIDOC
## HTML Div Element Configuration

### Description
Configure the iframe embed using data attributes on a `<div>` element.

### Method
HTML Attributes

### Endpoint
N/A

### Parameters
#### HTML Attributes
- **data-service** (String) - Required - Name of the service (must also be defined in the config. object).
- **data-id** (String) - Required - Unique ID of the resource (e.g., video ID).
- **data-title** (String) - Optional - Notice title.
- **data-params** (String) - Optional - Iframe query parameters.
- **data-thumbnail** (String) - Optional - Path to a custom thumbnail.
- **data-autoscale** (Boolean) - Optional - Specify for responsive iframe (fills parent width and scales proportionally).
- **data-ratio** (String) - Optional - Custom aspect ratio (e.g., '16:9').
- **data-widget** (Boolean) - Optional - Ignore default aspect ratio; specify when implementing a custom widget with explicit width and height (e.g., Twitter, Facebook, Instagram).

### Request Example
```html
<div
    data-service="youtube"
    data-id="5b35haQV7tU"
    data-autoscale
    data-iframe-id="myYoutubeEmbed"
    data-iframe-loading="lazy"
    data-iframe-frameborder="0">
</div>
```

### Response
N/A (This section describes HTML attributes, not API responses.)
```

--------------------------------

### Customize service icons

Source: https://github.com/orestbida/iframemanager/blob/main/demo/index.html

Replaces the default play arrow icon with custom base64 encoded images for specific services.

```css
div[data-service="twitter"] .c-n-c .c-l-b::before{ border: none!important; /* remove default "play" arrow icon */ height: 15px; width: 15px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAATZJREFUOE+lk78rRWEcxj/PJhmUMhhkkMEgGyZSlCR27qRYFItRXWVQJsVm8A8w3GSQUpTcYlCUzXAzKPEnPHp1zunc0znXkW+9y/s+30/P98cr/hkqk2+7E1gA2oG6pIeQZ3v6B2B7T9JmHsz2LHAA9KXeq8AUsCTbE8AVcAGsS3pJg2zXgLkM/Bm4BL7SgKB5B3aBm5RNF5RZlbQdl3AHjGSET8AtsFIAGJVUDw76gS0gwCplmhppuiR9xg7OgZk/JDck9QZ9DJgEdoCxkpCapPk0YBA4jJJ7gIFfQOOSrhNAtAvLwFEJB/uSNmJd0ybaDk5CGWvAcA7sMeyEpEYTwHY3EJqyCCT0DOAUWJX0kb4PYwzzD3tQFCfAsaSzPEFSgu0OYCg6bcAb8CrpvlVfSv3GVoBvLzlh7eQqydQAAAAASUVORK5CYII=') }
```

```css
div[data-service="leaflet"] .c-l-b::before{ border: none!important; /* remove "play" arrow icon */ height: 15px; width: 15px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAyCAYAAAAayliMAAAD7ElEQVRoge2aW4hVVQCGvy0zpdFYKjaWMpZOlKFhXoYQmfHB0B4UtASxlzHUARWcYLrRS2/VgyMWqV0eDDJI8EL0kASDl0KQmnnwYYamNGwQDMmh8Ubo/D2sfXDPmb3XWvty5syDP2zO3uvyr/9fa+112wfuo7oISjeSqqnDFwuA9cBG4EAQBHtrqizIhaeAF4EWYAXwTCRuFsB4MlALPAcsBpaFv/NJ1liHJXIsUAe8ACzFCF4IzEmR/2EYWwM1GLEtQDOwBJieg29iibSSmAS8BKwNfxsK5K6FyhloArYC64BpObmGMaNlUBY+AYo38ArwLuYFLAL9mHdlRkxcAMUZWAV0YkaRovAV8B1wJCF+GMJmyIGpYSE/UKz4Y0ArsNqS5s6IJ0lpr5WSBlU89oX8sx3pvoHsLdAG/Ag8kjF/EtqB7eF9hyPt0IinFDXfXoFavyapJVLGAkl3HXk+gPQt8BqwJ2UeF7owM/CpSNhHuLX9PeLJo+YXSvqv4Jp/I6acXR75bkrakNbA6QKFn5PUGFPGcs/8/ZKa0hjYVqD4txLKmCvpqifHCUn1vgYekPRbAcJ/kfRsQhn1ki6k4NqvcAPm8xJvAp72SGfD25jVZ19MXD3wM2bz4otfR4VYWqArR633Sppn4X5S0l8ZeBeVWsBlYH4O8V9ahCNpqaR/MvD2SaqRZxdqTtGsUXQAWyzxbcA5YEoG7rNE1kGu1WhLhgI2At8mxNUDXwMrM/CWcDw2NKGZz6ds3jWWLrNd0o0MXSaKS5LqSpwuAw2ShlKQv5ogfJmknpzCS/g4yu0y4DsrStLOmPyNkr4vSHgJi5TCwHpP0t1l+R6VWdMXjcPlGl0GWj1IT0TSB5LelHSrAuKlstpXaMA2Crk2KwOYEQfMnvgzYLYjT1Z0At1xETYDDzpI1wDXgMPABkfaPOgF3kuKtBkoP4eJYjNwGbgCPJZNlzfagNtJkTYDdxLCuzBnNX9iTt4qiR3AGVsC21LiVkJ4A/AhlRf/PrDPlcjWAv8mhDdmUZMS72D2xU7YDFwvRksq3MYcHBz1zWDrQldzy0mHU5iNk7d4sBvoxoz1lcZFzHyyIkt5ti70POF3qArhJ+BTzDwynJUkycAU4FB4L+AgZl5oAubinuTiMAD0ACcxB8K/Z+AYhSQDn3Pve1Ub8EV4PwF4ArNkmIk5t58OTAYeCvnuYobgQcxENwD8gTnrT5yQciOySNocWUC9Xr6AGk9XnIHHZQ5apfhjv3F1xRn4JBS/p9rifA1E/2owM+yvZzHfbcc9giAYMQ/swow4a6ukJxOiBl7GfBYd6xk4F6IG9mLG5/sYS/wPVjpXYPzhT9AAAAAASUVORK5CYII='); } 
```

--------------------------------

### Configure Non-JS Browser Placeholder

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Use the data-visible attribute on a data-placeholder div to display content when JavaScript is disabled.

```html
<div data-placeholder data-visible></div>
```

```html
<div
    data-service="youtube"
    data-id="5b35haQV7tU"
    data-autoscale>

    <div data-placeholder data-visible>
        <p>I'm visible only if js is disabled</p>
    </div>

</div>
```

--------------------------------

### JavaScript Configuration Object

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Configure Iframe Manager globally using a JavaScript object. Set current language, auto language detection, and define services with their specific settings.

```javascript
{
    currLang: 'en',
    autoLang: false,

    onChange: ({changedServices, eventSource}) => {
        // changedServices: string[]
        // eventSource.type: 'api' | 'click'
        // eventSource.service: string
        // eventSource.action: 'accept' | 'reject'
    },

    services : {
        myservice : {

            embedUrl: 'https://<myservice_embed_url>',

            thumbnailUrl: 'https://<myservice_thumbnail_url>',

            iframe: {
                allow: 'fullscreen',
                params: 'mute=1&start=21',

                onload: (dataId, setThumbnail) => {
                    console.log(`loaded iframe with data-id=${dataId}`);
                }
            },

            cookie: {
                name: 'cc_youtube',
                path: '/',
                samesite: 'lax',
                domain: location.hostname
            },

            languages: {
                en: {
                    notice: 'Html <b>notice</b> message',
                    loadBtn: 'Load video',
                    loadAllBtn: "Don't ask again"
                }
            }
        },

        anotherservice: {
            // ...
        }
    }
}
```

--------------------------------

### Configuring thumbnailUrl as a Function

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

The thumbnailUrl can be a function that dynamically fetches the thumbnail URL based on the dataId. Use the provided setThumbnail function to pass the obtained URL.

```javascript
thumbnailUrl: (dataId, setThumbnail) => {
    // fetch thumbnail url here based on dataId of the current element ...
    let url = 'fetched_url';

    // pass obtained url to the setThumbnail function
    setThumbnail(url);
}
```

--------------------------------

### im.childExists(options)

Source: https://context7.com/orestbida/iframemanager/llms.txt

Utility method that waits for a child element or property to exist, which is useful when integrating with external widget APIs.

```APIDOC
## im.childExists(options)

### Description
Utility method that waits for a child element or property to exist. Useful when integrating with external widget APIs.

### Parameters
#### Request Body
- **parent** (Element/Window) - Optional - Parent element or window to search within (default: window).
- **childProperty** (string) - Optional - Property name to check on parent.
- **childSelector** (string) - Optional - CSS selector to find child if no childProperty is provided.
- **timeout** (number) - Optional - Check interval in ms (default: 1000).
- **maxTimeout** (number) - Optional - Max wait time in ms (default: 15000).
```

--------------------------------

### Configure Google Maps without API Key

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Configuration object for Google Maps using a direct embed URL, followed by the corresponding HTML placeholder.

```javascript
im.run({
    currLang: 'en',
    services : {
        googlemaps : {
            embedUrl: 'https://www.google.com/maps/embed?pb={data-id}',

            iframe: {
                allow : 'picture-in-picture; fullscreen;'
            },

            languages : {
                en : {
                    notice: 'This content is hosted by a third party. By showing the external content you accept the <a rel="noreferrer noopener" href="https://cloud.google.com/maps-platform/terms" target="_blank">terms and conditions</a> of Google Maps.',
                    loadBtn: 'Load map',
                    loadAllBtn: "Don't ask again"
                }
            }
        }
    }
});
```

```html
<div
    data-service="googlemaps"
    data-id="!1m18!1m12!1m3!1d2659.4482749804133!2d11.644969316034478!3d48.19798087922823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479e7499e2d4c67f%3A0x32f7f02c5e77043a!2sM%C3%BCnchner+Str.+123%2C+85774+Unterf%C3%B6hring%2C+Germany!5e0!3m2!1sen!2sin!4v1565347252768!5m2!1sen!2sin"
    data-autoscale
></div>
```

--------------------------------

### Define Non-JavaScript Placeholder

Source: https://context7.com/orestbida/iframemanager/llms.txt

Provides fallback content for users with JavaScript disabled using the data-visible attribute.

```html
<div data-service="youtube" data-id="5b35haQV7tU" data-autoscale>
    <div data-placeholder data-visible>
        <p>JavaScript is required to load this video.
           <a href="https://youtube.com/watch?v=5b35haQV7tU">Watch on YouTube</a>
        </p>
    </div>
</div>
```

--------------------------------

### HTML Div Element Configuration

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Use these data attributes on a div element to configure an iframe. Required attributes are data-service and data-id. data-autoscale enables responsive behavior.

```html
<div
    data-service="<service-name>"
    data-id="<resource-id>"
    data-params="<iframe-query-parameters>"
    data-thumbnail="<path-to-image>"
    data-autoscale
    data-ratio="<x:y>">
</div>
```

--------------------------------

### Configure iframemanager as an inline script

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Initialize the manager directly within an inline script tag after the window load event.

```html
<body>
  ...
  <script defer src="iframemanager.js"></script>

  <!-- Inline script -->
  <script>
    window.addEventListener('load', function(){

        const im = iframemanager();

        // Example with youtube embed
        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. By showing the external content you accept the <a rel="noreferrer noopener" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of youtube.com.',
                            loadBtn: 'Load video',
                            loadAllBtn: "Don't ask again"
                        }
                    }
                }
            }
        });
    });
  </script>
<body>
```

--------------------------------

### Integrate IframeManager with CookieConsent

Source: https://github.com/orestbida/iframemanager/blob/main/README.md

Use the onChange callback to synchronize accepted services with CookieConsent.

```javascript
im.run({
    currLang: 'en',

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

        if(eventSource.type === 'click') {
            // Retrieve all accepted services:
            // const allAcceptedServices = im.getState().acceptedServices;

            /**
             * 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: {
        // ...
    }
});
```

--------------------------------

### Include IframeManager via CDN

Source: https://context7.com/orestbida/iframemanager/llms.txt

Include the IframeManager CSS and JavaScript files directly via CDN.

```html
<!-- Or include via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.3.0/dist/iframemanager.css">
<script defer src="https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.3.0/dist/iframemanager.js"></script>
```