function onMessage(e) { var bot = e.message.annotations[0].userMention.user.displayName; var loc = encodeURI(e.message.text.substring(bot.length+2)); var mapClick = { "openLink": { "url": "https://google.com/maps/search/?api=1&query=" + loc } }; return { // see JSON payload in the documentation link above }; }
<!doctype html> <html ⚡4email> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"><'/script> <!-- The AMP4email boilerplate. --> <style amp4email-boilerplate>body{visibility:hidden}</style> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-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.1.js"></script> <style amp-custom> html{font-family: 'Roboto';} ... </style> </head> <body> <h2>Hello dear user,</h2> <div class="photo-gallery"> <div class="text">Photos from your latest trips: <span [text]="+selectedSlide + 1">1</span>/4</div> <amp-selector layout="container" name="carousel-selector"...> <amp-carousel controls width="430" height="80"> <amp-img ...></amp-img> ... </amp-carousel> </amp-selector> <amp-carousel ...> <amp-img ...></amp-img> ... </amp-carousel> <div class="trip-location">Please rate your trip location:</div> <form id="rating" class="p2" method="post" ...> <fieldset class="rating"> <input name="rating" type="radio" id="rating1" value="1" .../> <label for="rating1" title="1 stars">★</label> ... </fieldset> <div submit-success> <template type="amp-mustache"> <div class="text">Thanks for rating {{rating}} star(s)!</div> </template> </div> </form> </div> </body> </html> [Full example in AmpByExample’s Playground]
