MemberSpace API
  • Welcome
  • Getting Started
    • Install Code
      • Multi-subdomain site
    • Using query parameters
  • Javascript API
    • Signature
      • Events
        • MemberSpace.ready
        • MemberSpace.member.info
        • MemberSpace.member.logout
        • MemberSpace.member.registration
        • MemberSpace.conversion
      • Functions
        • MemberSpace.getMemberInfo
        • MemberSpace.getMemberMetadata
        • MemberSpace.updateMemberMetadata
        • MemberSpace.clearMemberMetadata
      • Flags
        • MemberSpace.ready
      • Structures
        • MemberInfo
    • Guides
      • Getting Member Information - SSR
      • Getting Member Information - SPA
    • Migration Guide
  • Protecting content
    • Showing/Hiding Elements
  • Embedding
    • Member Information
      • Embedding Member Info
      • Prefilling Forms
      • Available Data Types
  • Links
    • Help Center
    • Admin
    • Sign Up
Powered by GitBook
On this page
  • Previous solution
  • Widget v2 uses custom JavaScript events, getters and flags instead:
  • Additional documentation

Was this helpful?

  1. Javascript API

Migration Guide

Migrating from V1 to V2

PreviousGetting Member Information - SPANextShowing/Hiding Elements

Last updated 3 years ago

Was this helpful?

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:

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:

  • , 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.

  • , 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.

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

Getter

  • Returns MemberInfo (if member is logged in)

Usage Options

  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));

Additional documentation

set to boolean true after the widget has been loaded

You can subscribe to the or event before initializing the widget, i.e.,

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 flag is already true (you probably missed the . and initial . events) you can also get the current user state from the getter fn.

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

https://help.memberspace.com/article/162-javascript-hook-developers-only
Events
MemberSpace.ready
MemberSpace.member.info
MemberSpace.member.logout
functions
MemberSpace.getMemberInfo
Flags
MemberSpace.ready
ready
member.info
MemberSpace.ready
ready
member.info
MemberSpace.getMemberInfo
memberInfo
Here