If you want to show an Offer within the My Account section, you can't use the Piano function tp.offer.show as you would do on any other page of your website that's running Piano's integration code. You can't use an external-event attribute.
Instead, you can use post messages to achieve this. In order to have a button, which when clicked will show the Offer to the user, you need to do as follows:
-
In the My Account Common Components template, you first need to create a function that will send a post message to the parent window.
Here is an example of sending it to the localhost:
HTML<script> function displayOffer() { parent.postMessage('showOffer', 'http://localhost:8080/myaccount.html');} </script> <button onclick="displayOffer()">Click to Subscribe</button> -
Then in your front-end code, you would handle the post message to show an Offer.
For example, like this:
window.addEventListener('message', function(e) { if(e.data == "showOffer"){ tp.offer.show({offerId:'XYZ'}); }});
If instead of showing an Offer you'd want to log a user out, you would change in the above code example the function tp.offer.show to tp.pianoId.logout().