Skip to main content

How to Display Blocked Content Notices for Dynamically Injected iframe

Ronald
Updated

Some integrations require dynamically adding iframes to the page using scripts that load only after user consent. In these cases, the iframe content cannot be detected by Termly’s Resource Blocker at page load. As a result, the blocked content placeholder will not automatically appear unless you tell Termly in advance where the iframe will be injected.

This guide explains how to use the data-termly-placeholder-id attribute to define a placeholder container so that Termly can render a blocked content notice, even before the actual iframe is present in the DOM.

Step 1: Create the Placeholder Container

Insert a container element in your HTML with a unique id. This is where Termly will render the blocked content notice:

<div id="dynamic-widget-container"
     style="height: 250px; width: 600px; border: 1px solid #ccc; overflow: hidden;">
</div>

This element should visually match the expected dimensions of the iframe it will eventually contain.

Step 2: Add the Dynamic Script with Placeholder Reference

Load the script that will insert the iframe using the data-termly-placeholder-id attribute. The value of this attribute must match the id of the container element:

<script>
  function onWidgetLoad() {
    // Example dynamic iframe injection
    const iframe = document.createElement("iframe");
    iframe.src = "https://example.com/widget";
    iframe.width = "600";
    iframe.height = "250";
    iframe.style.border = "none";
    document.getElementById("dynamic-widget-container").appendChild(iframe);
  }
</script>

<script
  data-cfasync="false"
  data-termly-placeholder-id="dynamic-widget-container"
  type="text/javascript"
  charset="utf-8"
  onload="onWidgetLoad()"
  src="https://example.com/load-widget.js">
</script>

When consent has not yet been given, Termly will render a blocked content notice inside the container. Once the user consents, the script executes and injects the actual content.

Step 3: Test the Integration

To validate the behavior:

  1. Load the page and decline all cookie categories.
  2. Confirm that a blocked content notice appears inside the container.
  3. Click the Preferences button and enable the necessary categories.
  4. After saving preferences, verify that the blocked content is replaced by the intended iframe content (e.g., a storefront or widget).
  5. Ensure that the content loads fully after a short delay.

You may also test the Preferences button within the placeholder notice itself to confirm it opens the modal and triggers the unblock after consent.

Manual Script Blocking

You can also block the script manually instead of relying on auto-blocking. Use the data-type and data-src attributes in place of type and src:

<script
  data-cfasync="false"
  data-termly-placeholder-id="dynamic-widget-container"
  data-type="text/javascript"
  charset="utf-8"
  onload="onWidgetLoad()"
  data-src="https://example.com/load-widget.js">
</script>

There should be no difference in behavior between auto-blocked and manually-blocked scripts when properly configured.

Error Handling

If you misconfigure the placeholder, such as by entering an incorrect ID in data-termly-placeholder-id, the placeholder will not be rendered. In this case, Termly will log a console warning:

Unable to render placeholder: container not found

This error indicates a mismatch between the placeholder ID and the target container’s id. To resolve this, ensure that the data-termly-placeholder-id exactly matches the id of the placeholder container.

Related articles