I am trying to add an amp-script tag in the body and want to call with an inline js script as mentioned below in the body. Anyone can solve help me with this? As given below code if you I had added an amp-script tag with some wrap dynamic content. Wants to translate the code below while calling below script tags.
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
margin: 1rem;
}
button{
margin:1rem;
}
amp-script{
color:black;
}
</style>
<meta name="amp-script-src" content="sha384-qhLQva9Z_2XXttcLseJyLWCi1nCwqWuO6pgC-RrXg3wEgakMc_sjfbcA4VdTovMU ">
</head>
<body>
**<amp-script layout="container" script="inline_amp" class="amp-script-sample">**
<button id="hello2">Translate Hindi!</button>
<h1 class="local" >Join To Reverie With Website Localization</h1>
<amp-carousel id="carousel-with-preview" width="800" height="400" layout="responsive" type="slides"
on="slideChange:AMP.setState({currentCat: event.index})">
<amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg"
alt="photo courtesy of Unsplash"></amp-img>
<amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg"
alt="photo courtesy of Unsplash"></amp-img>
<amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"
alt="photo courtesy of Unsplash"></amp-img>
<amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg"
alt="photo courtesy of Unsplash"></amp-img>
</amp-carousel>
** </amp-script>
<script id="inline_amp" type="text/javascript" target="amp-script">**
let button = document.querySelector('#hello2');
button.addEventListener('click', () => {
let element = document.body.getElementsByClassName('local');
console.log(element);
for (let child of element) {
console.log(child.innerHTML);
var raw = JSON.stringify({
"data": [child.textContent],
"isBulk": false,
"ignoreTaggedEntities": false
});
var requestOptions = {
method: 'POST',
headers: {
"Content-Type": "application/json",
"REV-API-KEY": "a241d264e7caae4b2e55d269d27c236e8",
"REV-APP-ID": "rev.platform",
"src_lang": "en",
"tgt_lang": "hi",
"REV-APPNAME": "transliteration",
"domain": "1",
"cnt_lang": "en"
},
body: raw,
redirect: 'follow'
};
fetch("https://revapi.reverieinc.com/", requestOptions)
.then(response => response.json())
.then(result => {
debugger
child.innerHTML= result.responseList[0].outString[0];
debugger
console.log(result.responses)
})
.catch(error => console.log('error', error));
}
});
</script>
</body>
</html>
amp-scriptis banned in the AMP for Email spec for security reasons. You should get a validation error if you try to use the above AMP HTML in the playground or feed it to the AMP validator.