Learn more about how to best integrate our mastering iframe into your landing page.
The iframe Element
The iframe HTML element you receive from us follows the structure below.
<iframe allowtransparency="true" style="width: 100%; height: 300px; border: none; background-color: transparent;" height="300" src="https://partners.masterchannel.ai/partners/.../embed?lang=en" loading="eager"></iframe>The HTML snippet does the following:
- The mastering widget is loaded from the Masterchannel server.
- The widget is scaled to the full width of the page, and 300 pixels in height.
- The widget is loaded with a transparent background.
- The widget is loaded eagerly the moment your page is loaded, so users can see it immediately.
Implementation Best Practices
When copying the iframe onto your page, please ensure the following:
- Don't limit the maximum width of the iframe, as that may trigger the mobile view of the widget instead of the desktop view on desktop browsers. Make sure the iframe is as wide as the entire browser window.
- Don't modify any attributes of the iframe, especially not the
srcattribute. This can cause issues for end users.
Language Switching
The iframe comes with support for 16 different languages. You can specify which language should be loaded using the ?lang=... parameter at the end of the src URL. For example, the following snippet loads the iframe in Portuguese.
<iframe allowtransparency="true" style="width: 100%; height: 300px; border: none; background-color: transparent;" height="300" src="https://partners.masterchannel.ai/partners/.../embed?lang=pt" loading="eager"></iframe>The supported language codes for the lang parameter are en, de, cs, es, fr, fr-CA, hu, id, it, nl, pl, pt, ro, ru, th, tr. If no lang parameter is specified, the language defaults to English.