# Migration Guide

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](/javascript-api/overview/events.md)

* [MemberSpace.ready](/javascript-api/overview/events/memberspace.ready.md), 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](/javascript-api/overview/events/memberspace.member.info.md), 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](/javascript-api/overview/events/memberspace.member.logout.md), is fired if a user logs out or is being logged out.&#x20;

#### Getter [functions](/javascript-api/overview/functions.md)

* [MemberSpace.getMemberInfo](/javascript-api/overview/functions/memberspace.getmemberinfo.md) Returns MemberInfo (if member is logged in)

#### [Flags](/javascript-api/overview/flags.md)

* [MemberSpace.ready](/javascript-api/overview/events/memberspace.ready.md) set to boolean `true` after the widget has been loaded

#### Usage Options

* You can subscribe to the [ready](/javascript-api/overview/events/memberspace.ready.md) or [member.info](/javascript-api/overview/events/memberspace.member.info.md) event before initializing the widget, i.e.,

```javascript
  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](/javascript-api/overview/events/memberspace.ready.md) flag is already true (you probably missed the .[ready](/javascript-api/overview/events/memberspace.ready.md) and initial .[member.info](/javascript-api/overview/events/memberspace.member.info.md) events) you can also get the current user state from the [MemberSpace.getMemberInfo](/javascript-api/overview/functions/memberspace.getmemberinfo.md) getter fn.

### Additional documentation

More information about the events, getters, and the [memberInfo](/javascript-api/overview/structures-and-examples/structures.md) structure with examples can be found [Here](/javascript-api/overview.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.memberspace.com/javascript-api/migration-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.