Embed Profile Portal (Shopify)

The Omneo Profile Portal is a great way for customers to quickly interact with their profile in any situation. For many brands, it acts as a significant upgrade to the typical 'My Account' page used on their ecommerce websites.

This guide explains how to embed the Omneo Profile Portal experience into a typical Shopify Plus website.

Prerequisites

Shopify Plus with multiPass enabled

You will need

  • Shopify domain
  • Shopify api token
  • Shopify multiPass secret
  • Omneo Profile Portal URL (e.g. my.yourbrandomain.com)

Embed as iframe

Create a iFrame in your Shopify storefront, and link to the Omneo Profile Portal URL. You can customise the iFrame position and width, but most implementations see it replicate the standard cart configuration.

You need to give a unique ID to iframe and use that ID in event listeners - we recommend setting the ID to omneo_pp_iframe

Register Event Listener

Storefront needs to communicate with embed profile portal through postMessages.
Below are events used by Omneo Profile Portal

getUrl: get current URL request from iframe, you need to send current URL to Profile portal so it can redirect to current URL after login

const handleReceiveMessage = React.useCallback(event => {
        if (typeof event.data === 'object' && event.data.message === 'getUrl') {
            const childFrameObj = document.getElementById({iframe_id}); /** iframe_id from last step **/
            if (childFrameObj) {
                childFrameObj.contentWindow.postMessage(
                    {
                        url: window.location.href, /** Current url**/
                        action: event.data.action, 
                    },
                    '*'
                );
            }
        }
    });

 window.addEventListener('message', handleReceiveMessage);

login and logout: get Omneo Profile Portal login status so you can update storefront UI

const handleProfilePortalMessage = useCallback(event => {
        if (event.data === 'login') {
           /** handleLoginEvent **/;
        }

        if (event.data === 'logout') {
           /** handleLogoutEvent **/;
        }
    }, []);

window.addEventListener('message', handleProfilePortalMessage);

customer, get user details after login, includes

  • email
  • first_name
  • last_name
  • region
const handleReceiveMessage = React.useCallback(event => {
        if (typeof event.data === 'object' && event.data.message === 'customer') {
           /** get user data by event.data.data; **/
          
        }
    });

 window.addEventListener('message', handleReceiveMessage);

If the user does not leave the landing page on login from magic link and tries to log out, the token can remain in the URL and must be removed, using something similar to

function RemoveParameterFromUrl(url, parameter) {
      return url
      .replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
      .replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
      }

This function should then be called within your event.data === 'logout' function above, for example:

if (event.data === 'logout') {
        var refreshUrl = RemoveParameterFromUrl(window.location.href,'token');
        if($('.profileportal').hasClass('logged-in')){
          $.ajax('your logout url').done(function() {
            $('.profileportal').removeClass('logged-in');
            $('.account-mobile').removeClass('logged-in');
            $('.profileportal.headerItem').removeClass('profile-sidebar-view--active');
            $('#global-page-wrap').removeClass('darken');
            window.location.href = refreshUrl;
          });
        }
        $('.profileportal').removeClass('logged-in');
        $('.account-mobile').removeClass('logged-in');
      }