Language Replacement Mapping

This article explains how to map any text on the page to personalized text. The intended use of this is for translating any text on the page. This is useful for any text that cannot be changed easily such as the required messages. This will allow for better communication with the customer of exactly what is expected.

One reason to use Language Replacement Mapping would be to translate the required field messages. In the image below you can see the required field messages in red and are in English.

Step 1: Copy the Entire Code Snippet

<script>
	$(document).ready(function() {
		var siteDomain = "thisisatestsiteonly.com";
		if (window.location && window.location.href && window.location.href.includes(siteDomain)) {
			var languageReplacementMap = {
              " TEXT-NEEDING-CHANGE ": " DESIRED-TEXT ",
		  	  " TEXT-NEEDING-CHANGE ": " DESIRED-TEXT "
			}
			setInterval(function() {
				try {
					for (var str in languageReplacementMap) {
			 			var ccNode, ccWalker = document.createTreeWalker(document, NodeFilter.SHOW_TEXT, null, false);
				 	 	while (ccNode = ccWalker.nextNode()) {
				 	 		var parentTagName = ccNode && ccNode.parentElement && ccNode.parentElement.nodeName;
				  			if ((parentTagName === "DIV" || parentTagName === "SPAN") && parentTagName !== "SCRIPT") {
				  				ccNode.textContent = ccNode.textContent.replaceAll(str, languageReplacementMap[str]);
				  			}
				  		}
			  		}
			  	} catch(error) {}
			}, 100);
		}
	});
</script>

If that script is not successful then this is an alternative:

<script>
  var siteDomain = "thisisatestsiteonly.com";
  if (window.location && window.location.href && window.location.href.includes(siteDomain)) {
    var languageReplacementMap = {
      " TEXT-NEEDING-CHANGE ": " DESIRED-TEXT ",
      " TEXT-NEEDING-CHANGE ": " DESIRED-TEXT "
    }
    setInterval(function() {
      var languageReplacementMapCollection = {};
      for (var str in languageReplacementMap) {
        const replacementStringSearchQuery = $("div:contains('" + str + "'), span:contains('" + str + "')");
        languageReplacementMapCollection[str] = replacementStringSearchQuery;
      }
      for (var str in languageReplacementMapCollection) {
        var pageElements = languageReplacementMapCollection[str];
        if (pageElements && pageElements.length) {
          pageElements.html(function() { return $(this).html().replace(str, languageReplacementMap[str]) });
        }
      }
    }, 100);
  }
</script>

Step 2: Open the Page Editor and Edit the HTML

Go to the desired page in the funnel builder and select the page

Step 3: Edit the HTML in the page builder by clicking the edit icon in the top right corner

Step 4: Transfer the Script to the Body of the Desired Page

At the bottom of the script after the last “</div>”, insert the script and edit the specific text to the desired message
Replace “thisisatestiteonly.com” with your site's domain name
Replace " TEXT-NEEDING-CHANGE " with the message that you would like to change
Replace " DESIRED-TEXT " with the translated version of the original text
Add new lines if needed adding a comma at the end of every line except the last
Remove any extra lines with " TEXT-NEEDING-CHANGE ": " DESIRED-TEXT "
Save the new HTML
Save the page

Step 5: Publish

Step 6: Review Changes

The required field message is now translated

If there are multiple pages that will need mapping, then adding this script to the globals scripts may be a better option.