iFrame blocking prevents embedded third-party content (videos, maps, social widgets, forms) from loading until the visitor consents to the relevant cookie category. A placeholder is shown in place of the blocked content, explaining what will load after consent.
What iFrame Blocking Does
Many third-party embeds use iFrames to load content from external domains. These iFrames often set cookies and track visitors. The iFrame blocker watches the page for iFrame elements, including ones added later by scripts, and replaces the ones it recognises with consent placeholders. The original iFrame is put back, unchanged, the moment the visitor accepts.
Supported Services
The iFrame blocker recognises 12 services. Each has an identifier (used by the per-service consent mode, see below) and a default cookie category:
- Video - YouTube (
youtube), Vimeo (vimeo), Dailymotion (dailymotion) - Marketing. - Maps - Google Maps (
google-maps) - Functional. - Social - Facebook (
facebook), Instagram (instagram), X / Twitter (twitter), TikTok (tiktok), LinkedIn (linkedin) - Marketing. - Music - Spotify (
spotify) - Marketing. - Forms and security - HubSpot (
hubspot) - Marketing; reCAPTCHA (recaptcha) - Functional.
Placeholder Display
When an iFrame is blocked, a placeholder appears in its place. It shows the service name, a message explaining that the content requires consent (in the banner's language), an Accept button for the relevant cookie category and a Manage preferences button that opens the cookie preferences panel with the category toggles.
By default the placeholder takes exactly the space the embed had - it copies the iFrame's classes and inline styles, so responsive wrappers (a Bootstrap ratio box, a Tailwind aspect-video, a page-builder video block) keep their layout - with the built-in card look. That is the Match the embed's layout setting. Switch it off to style the box yourself: a background colour or a transparent background (with an optional blur of the page behind it), a border and corners.
When the visitor clicks the accept button, consent is granted for that category, the placeholder is replaced with the original iFrame, and the content loads.
How to Enable
In the Banner Editor, go to the Integrations tab and switch on Block third-party iFrames until consent. The list of supported services appears below it as checkboxes - untick a service to let its embeds load without consent.
Tip: Only enable iFrame blocking for services that actually appear on your site. Enabling all services has no negative performance impact, but keeping the list focused makes it easier to manage.
Styling the Placeholder
Under the same toggle you will find Placeholder appearance; a live preview of the placeholder appears under the banner preview on the right while you edit:
- Match the embed's layout - copy the blocked iFrame's classes and inline styles onto the placeholder, keeping the built-in card look (on by default). While it is on, the box fields below are hidden and not applied.
- Background colour, or Transparent background to let your page show through, plus a background blur in pixels for a frosted-glass effect behind a transparent or semi-transparent box; border colour and border width (set the width to
0to remove the border); corner radius - the placeholder's own box, available when Match is off. - Text colour and minimum height - in pixels, or a length such as
100%to fill the embed's container when the container has a height of its own. - Accept button - background, text and border colours plus hover background and hover text; by default it uses your banner's primary colour with white text.
- Manage preferences button - background, text and border colours plus hover background and hover text; by default a transparent, outlined button in the text colour.
- Corner radius for both buttons.
- Every colour field here also accepts a CSS variable from your site, such as
var(--secondary)- see Using your site's CSS variables. - Toggles to hide the icon, the service name or the Manage preferences button.
- Placeholder custom CSS (paid plans) - CSS added to your page for the placeholders. The banner's own Custom CSS cannot reach them: the banner lives in a closed shadow DOM, while placeholders live in your page. Available classes:
.kk-ip(the placeholder),.kk-ip-ovand.kk-ip-in(the centred content),.kk-ip-ic(icon),.kk-ip-tn(service name),.kk-ip-tx(message),.kk-ip-btn(accept button),.kk-ip-bs(manage preferences button), plus a type class per embed:.kk-ip-video,.kk-ip-map,.kk-ip-social,.kk-ip-generic. This CSS is applied to the whole page, so keep your selectors scoped to.kk-ip.
A value you set in these fields wins over your site's own stylesheet, even over a theme that styles every button. Fields you leave empty keep the built-in look, which your stylesheet can restyle freely - the built-in rules use single-class selectors and no !important.
Embeds Detected by the Cookie Scanner
The cookie scanner records the embedded iFrames and scripts on every page it visits. When it recognises one of the 12 services above and your site has no service with that identifier yet, it adds the service automatically to the matching category (for example Google Maps under Functional, with the provider and privacy policy link filled in). Such services are marked Detected by scan in Cookies & Scripts. Deactivate a detected service to keep it out of the banner; a service you delete is not re-created by later scans.
Per-service Consent
When your site uses the per service consent mode, a service whose identifier matches one of the 12 above (google-maps, youtube, ...) binds its own toggle to the embed: the embed loads only when that service is accepted. Any other identifier leaves the embed governed by its category. In the per category mode the category toggle alone governs the embed and the identifier is informational. The identifier cannot be changed after a service is saved. In per category mode the preferences dialog still lists the services under each category, so visitors can see what a category covers, but only the category toggle can be switched.
