Yes, this is possible, but you would need to make some custom adjustments to the My Account Library Components template as well as in your JavaScript frontend code.
1. Add this Javascript to the My Account Library Components template:
HTML
<script>
function displayOffer() {
parent.postMessage('showOffer',"*" );}
</script>
2. Change this line in the My Account Library Components template from:
HTML
<tp-menu-item ng-click="cancelSubscription(libraryItem)" ng-if="libraryItem.cancelEnabled">
To:
HTML
<tp-menu-item onclick="displayOffer()" ng-click="cancelSubscription(libraryItem)" ng-show="libraryItem.cancelEnabled">
3. Then add this to your website's frontend JavaScript (or the Composer integration script):
window.onmessage = (event) => {
if(event.data == "showOffer"){
tp.offer.show({
offerId: "OFDZO31HZPRG",
templateId: "OTOF1HW03RQ6",
displayMode: "modal",
checkoutFlowId: "<Upgrade checkout flow ID>",
targetedTermId: "<The current term ID of the user that should be targetted>",
});
}
};
As you can see, you can specify which offer and template to show by replacing the respective offer and template IDs.