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

<figure><img src="/files/x3nsdzMiCPkNqXAvOGxT" alt=""><figcaption></figcaption></figure>

### Step 1: Copy the Entire Code Snippet  <a href="#languagereplacementmapping-step1-copytheentirecodesnippet" id="languagereplacementmapping-step1-copytheentirecodesnippet"></a>

```
<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 <a href="#languagereplacementmapping-step2-openthepageeditorandeditthehtml" id="languagereplacementmapping-step2-openthepageeditorandeditthehtml"></a>

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

<figure><img src="/files/XGKdEh03CJplDLlaaoPv" alt=""><figcaption></figcaption></figure>

### Step 3: Edit the HTML in the page builder by clicking the edit icon in the top right corner <a href="#languagereplacementmapping-step3-editthehtmlinthepagebuilderbyclickingtheediticoninthetoprightcorner" id="languagereplacementmapping-step3-editthehtmlinthepagebuilderbyclickingtheediticoninthetoprightcorner"></a>

<figure><img src="/files/U5lPifuFqHZpreJIbgeb" alt=""><figcaption></figcaption></figure>

### Step 4: Transfer the Script to the Body of the Desired Page <a href="#languagereplacementmapping-step4-transferthescripttothebodyofthedesiredpage" id="languagereplacementmapping-step4-transferthescripttothebodyofthedesiredpage"></a>

<figure><img src="/files/ihoUtSba9Csn7LQRdfLy" alt=""><figcaption></figcaption></figure>

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 <a href="#languagereplacementmapping-step5-publish" id="languagereplacementmapping-step5-publish"></a>

### Step 6: Review Changes <a href="#languagereplacementmapping-step6-reviewchanges" id="languagereplacementmapping-step6-reviewchanges"></a>

<figure><img src="/files/lyHSQh3GGd37fxm586TG" alt=""><figcaption></figcaption></figure>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/language-replacement-mapping.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.