Update docs: add section about iframemanager

docs/.vitepress/config.js

@@ -120,7 +120,8 @@ function getGuideSidebar() {
                 { text: 'Callbacks and Events', link: '/advanced/callbacks-events' },
                 { text: 'Custom Attribute', link: '/advanced/custom-attribute' },
                 { text: 'Revision Management', link: '/advanced/revision-management'},
-                { text: 'Consent Logging', link: '/advanced/consent-logging'}
+                { text: 'Consent Logging', link: '/advanced/consent-logging'},
+                { text: 'IframeManager', link: '/advanced/iframemanager'}
             ]
         },
         {

docs/advanced/iframemanager.md

@@ -0,0 +1,68 @@
+# IframeManager Configuration
+How to properly set up CookieConsent and IframeManager so that changes in state are reflected in both plugins.
+
+Checkout the [demo on Stackblitz](https://stackblitz.com/edit/web-platform-ahqgz3?file=index.js);
+
+::: info Info
+This is an example config. and assumes that all iframes belong to the `analytics` category.
+:::
+
+## Connect IframeManager -> CookieConsent
+When an iframe is accepted via a button click we must notify cookieconsent using the `onChange` callback:
+
+::: warning Note
+The `onChange` callback is available in iframemanager v1.2.0+.
+:::
+
+```javascript
+const im = iframemanager();
+
+im.run({
+    onChange: ({ changedServices, eventSource }) => {
+        if(eventSource.type === 'click') {
+            const servicesToAccept = [
+                ...CookieConsent.getUserPreferences().acceptedServices['analytics'],
+                ...changedServices
+            ];
+
+            CookieConsent.acceptService(servicesToAccept, 'analytics');
+        }
+    },
+
+    services: {
+        youtube: {
+            // ...
+        },
+
+        vimeo: {
+            // ...
+        }
+    }
+});
+```
+
+## 2. Connect CookieConsent -> IframeManager
+Enable/disable iframes via CookieConsent:
+
+```javascript
+CookieConsent.run({
+    categories: {
+        analytics: {
+            services: {
+                youtube: {
+                    label: 'Youtube Embed',
+                    onAccept: () => im.acceptService('youtube'),
+                    onReject: () => im.rejectService('youtube')
+                },
+                vimeo: {
+                    label: 'Vimeo Embed',
+                    onAccept: () => im.acceptService('vimeo'),
+                    onReject: () => im.rejectService('vimeo')
+                }
+            }
+        }
+    }
+})
+```
+
+For more examples or details about the configuration options, checkout the [iframemanger repo](https://github.com/orestbida/iframemanager).

docs/essential/getting-started.md

@@ -9,8 +9,9 @@ You can download/import the plugin using one of the following methods:
 
 1. Install via [NPM](https://www.npmjs.com/package/vanilla-cookieconsent).
     ```shell
-    npm i vanilla-cookieconsent
-    yarn add vanilla-cookieconsent
+    npm i vanilla-cookieconsent@next
+    yarn add vanilla-cookieconsent@next
+    pnpm add vanilla-cookieconsent@next
     ```
 
     Special thanks to [Till Sanders](https://github.com/tillsanders) for bringing the plugin on npm!