In case 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 does allow you to build Experiences across any IFrames you might have in your application. You just need to implement Chameleon separately within those.

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

👉 Understand the specifics about IFrames

In case your IFrames share the same subdomain as the top-level page, all you need to do is:

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.

In case your IFrames render data from a different subdomain, you will need to apply a small code change before implementing Chameleon there.

You will need to change the document.domain for both the main page and the IFrame, setting it to the same value.

For example: If your main page is staging.yourapp.com, but your IFrame is rendering content from test.yourapp.com, you will need to define document.domain = 'yourapp.com' on both sides.

To wrap it up, what you need to do to enable Chameleon to work across IFrames with a different subdomain, is:

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

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

👉 See how we support the tech stack used in your product