Using postMessage to control an iframe

You can invoke our referee name sharing journey via our EntryPoint API within your own iframe and manage the closing of that iframe and the applying of a coupon in your own checkout.

We do this by firing one or two postMessage events during the referee journey for you to listen for and then to manage iframe's and coupons on the back of it.

This solution requires no tags or 3rd party JS dependencies on Mention Me (unlike our standard referee tag integration).

In your checkout, you would listen for these postMessages something like this:

window.addEventListener('message', (event) => {  
    let { data = {} } = event;
    // For security, filter for accepted origins here

    // Handle IE browser support
    if (typeof data === 'string') {
        try {
            data = window.JSON.parse(data);
        } catch (error) {
            data = {};
            // Handle errors if desired.
        }
    }

    switch (data.action) {
        case 'mm:referee:close':
        case 'mm:referrer:close':
        case 'mm:referrer-share:close':
            // This will be triggered whenever the IFRAME needs to be closed
            // (by the user or by them reaching the end of the flow in any case)
            // You should close the IFRAME here
            break;
        case 'mm:referee:fulfilled':
            // This will be triggered whenever the user gets given a coupon at the
            // end of the happy path and you should apply the coupon if present
            // and possible
            break;
        default:
        // Future post message events may be provided.
        // They can be ignored for now.
    }
});

We fire the mm:referee:fulfilled event when the user gets given a coupon (or told they still have a valid coupon) - before they click the final CTA or close icon. So you should be able to apply the coupon as soon as there is one.

Because of this, when the user finishes the flow (by clicking either close or the final CTA to "continue shopping") you will have already handled the coupon and so we will fire the mm:referee:close event.

Note for clients with "after purchase" rewards, since there is no coupon produced by the journey, the only event that will be fired is the mm:referee:close one.

The payload would look something like this in each case:

{  
    "action": "mm:referee:fulfilled",  
    "referee": {  
        "email": "[email protected]"  
    },  
    "coupon": {  
        "couponCode": "REFEREE123",  
        "securityCode": "CODE456",  
        "expiryDate": "2021-01-02"  
    },  
    "message": "Here is 20% off your first order thanks to John",  
    "sourceName": "Referee1577983405347"  
}

Note: sourceName is our own internal validation mechanism, you can ignore this.

The elements of the payload are to be used how you see fit to optimise conversion in the referee journey - for example telling them how long they have to spend the coupon or using the content to explain why they have received this coupon and encourage conversion.

And for the close event:

{  
    "action": "mm:referee:close",  
    "sourceName": "Referee1577983405347"  
}

Note: sourceName is our own internal validation mechanism, you can ignore this.