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:

<!-- language script to support div,span,select -->
<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",
              "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 (["DIV", "SPAN", "OPTION"].includes(parentTagName) && parentTagName !== "SCRIPT") {
				  				ccNode.textContent = ccNode.textContent.replaceAll(str, languageReplacementMap[str]);
				  			}
				  		}
			  		}
			  	} catch(error) {}
			}, 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

1. At the bottom of the script after the last “</div>”, insert the script and edit the specific text to the desired message

2. Replace “thisisatestiteonly.com” with your site's domain name

3. Replace "TEXT-NEEDING-CHANGE" with the message that you would like to change

4. Replace "DESIRED-TEXT" with the translated version of the original text

5. Add new lines if needed adding a comma at the end of every line except the last

6. Remove any extra lines with "TEXT-NEEDING-CHANGE": "DESIRED-TEXT"

7. Save the new HTML

8. 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.