Help Center >CLI >Frontend API >
Developer Docs
Try it FreeLearn MoreYour AccountSupport

How to translate content in iframes

Suggest Edits

Sometimes your website contains content that is displayed via an iframe, which is essentially a web page within another web page.

If you want that content translated as well, then you will have to copy the Localize Code Snippet into the HTML source of the iframe (in the <head> section). You would use the same Project Key in both pages so that they share the same phrases and website translations.

If the iframe is coming from a 3rd-party source, Localize might be able to create a custom integration with the 3rd-party. Contact support and we can look into that possibility.

Syncing the Currently Selected Language in the iframe

Since the Localize code snippet is installed in both the parent page and the iframe child page, the currently selected language is managed separately by each page. To synchronize the currently selected language between the 2 pages, we provide the following sample code.

We suggest that you display the language switcher in the parent page, and hide the language switcher in the child iframe.

English (source language) version of a sample page with an iframe:

798

Spanish (target language) version of the sample page:

796

Parent Page Code

The following is the parent page sample code. It uses the postMessage function to keep the languages in sync.

We give the iframe a specific id so that we can target that iframe, in case there is more than 1 iframe in the page.

<!DOCTYPE html>
<html>
  <head>
    // other head stuff here...

    <script src="https://global.localizecdn.com/localize.js"></script>
    <script>!function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget","getSourceLanguage"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);</script>

    <script>
      Localize.on("setLanguage", function(data) {
        // Pass the data object onto the iframe with id="localize_iframe" so it can change the current language to match the parent language.
        document.querySelector('iframe[id="localize_iframe"]').contentWindow.postMessage(data, '*');
      });

      Localize.initialize({
        key: '[[app:key]]', 
        rememberLanguage: true,
        // other options go here, separated by commas
      });
    </script>
  </head>

  <body>
    <!-- Other content here -->
    
    <iframe id="localize_iframe" src="iframe_contents_id.html"></iframe>

    <!-- Other content here -->
  </body>
</html>

Child Page Code

The following is the child page sample code.

🚧

Set the PARENT_DOMAIN_NAME

Be sure to replace the [PARENT_DOMAIN_NAME] with the appropriate parent domain name, for security purposes.

<script src="https://global.localizecdn.com/localize.js"></script>
<script>!function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget","getSourceLanguage"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);</script>

<script>
  // Set up a listener so we can set the language to whatever the language is in the parent window.
  window.addEventListener("message", receiveMessage, false);

  function receiveMessage(event) {
    if (event.origin !== "https://[PARENT_DOMAIN_NAME]")
      return;

    if (event.data.to !== undefined) {
    	Localize.setLanguage(event.data.to);
    }
  }

  Localize.initialize({
    key: '[[app:key]]', 
    rememberLanguage: true,
    disableWidget: true,
    // other options go here, separated by commas
  });
</script>

We disable the default language-switching widget by setting disableWidget to true in our initialize call.

📘

Not using the default widget?

If you aren't using the default Localize language-switching widget, you will have to modify the code above appropriately.

📘

Using one of our integration guides?

If you have modified the default code snippet or you are using one of our integration guides that has modifications, you'll have to copy the relevant parts of the sample code above into your code snippet.

  • For the parent page you'd copy the Localize.on("setLanguage"... function.
  • For the child page you'd copy the window.addEventListener(... and receiveMessage(... functions.

Need Help?
Contact support for custom integration help or troubleshooting!

Updated 8 months ago