How to use Chameleon with iFrames

Understand how to build and deploy Chameleon Experiences that travel across iFrames.

Tiago Mota avatar
Written by Tiago Mota
Updated over a week ago

If your application contains iFrames, you might be concerned about whether you'll be able to deploy Chameleon Experiences across those. Don't worry, we've got you covered, Chameleon allows you to build Experiences on any iFrames you might have in your application. You will just need to implement Chameleon separately within your iFrames.

There are, however, some aspects you'll need to consider before going in and building your Experiences. You will need to:

  • Determine whether your iFrames share the same subdomain as the top-level page.

  • Ensure the iFrame does not use the sandbox attribute.

If your iFrames share the same subdomain as the top-level page, you'll need to:

You can do this in a similar fashion as what you did to install Chameleon in the first place, using whatever installation method you decided to go for.

As of July 20, 2023, Chrome and other modern browsers have lost the ability to access content within an iframe using a different subdomain.
In order to add interact with content within iframes in your application, those iframes will need to use the same domain and subdomain as the parent page.

Once everything is set up, you can go in and build your Chameleon Experiences. You will notice that you're now able to select elements within those iFrames.

🀝 We recommend that you always live-test your Experiences, by publishing them only to yourself before publishing them live to end-users. Particularly with iFrames, this will allow you to identify any flaws that could've happened during the installation process.

Know more

Did this answer your question?