Migration Guide

Migrating from V1 to V2

We have completely rewritten our frontend system and with that comes the better structure of Events and Functions. We will be sunsetting our legacy JS Hook. If you are using that old system this migration guide is here to help.

Previous solution

Previously, the MemberSpace V1 widget supported a single onReady style callback hook detailed in the following site: https://help.memberspace.com/article/162-javascript-hook-developers-only

This hook has some limitations especially:

• It is only fired once, if user details change host site is not notified

• It contains only limited information

• The host site needs to store the information provided, no way to access the data directly from the widget after the event is triggered

• Can cause memory management issues in the host site depending on the host environment

Widget v2 uses custom JavaScript events, getters and flags instead:

Events

• MemberSpace.ready, this behaves much like the previous solution, only fired once. Note: The v2 widget will not refresh the page after a user logs in. If you need to be kept informed about the logged in user, use the MemberSpace.member.info event instead.

• MemberSpace.member.info, This is event is designed to be declarative in nature; It will keep the host site updated about the member's information. Only fired if there is a logged in member.

• MemberSpace.member.logout, is fired if a user logs out or is being logged out.

Getter functions

• MemberSpace.getMemberInfo Returns MemberInfo (if member is logged in)

Flags

• MemberSpace.ready set to boolean true after the widget has been loaded

Usage Options

• You can subscribe to the ready or member.info event before initializing the widget, i.e.,

  const handleMemberInfo = ({ detail }) => {
    const { memberInfo } = detail;

    // Your code here
  }
  document.addEventListener('MemberSpace.member.info', handleMemberInfo);

  // Standard widget init code
  var MemberSpace = window.MemberSpace || {subdomain: "yourSubdomain"};
  (function(d){
    var s = d.createElement("script");
    s.src = "https://cdn.memberspace.com/scripts/widgets.js";
    var e = d.getElementsByTagName("script")[0];
    e.parentNode.insertBefore(s,e);
  }(document));

• If your code runs after the widget initialization, or in an unknown state (for i.e., in a web application, need the info in a specific screen only) You can subscribe to the same events and if the MemberSpace.ready flag is already true (you probably missed the .ready and initial .member.info events) you can also get the current user state from the MemberSpace.getMemberInfo getter fn.

Additional documentation

More information about the events, getters, and the memberInfo structure with examples can be found Here.