Installing the Nickelled JavaScript on a Single Page Application (SPA)

This article explains how to set up Nickelled Launchers on SPAs like Angular JS, Backbone, React and Vue JS.
Because JavaScript Single Page Applications (SPAs) only have one initial page ready (when the app first boots) and often hasn't accessed the user data at this time, we need to make a small change to the installation:

<script type="text/javascript">
 (function() {
    var NickelledLaunchers = window.NickelledLaunchers = NickelledLaunchers||{setUser:function(u){this.userData=u}};
    (function(){
      var s,f;
      s = document.createElement("script");
      s.async = true;
      s.src = "https://cdn.nickelled.com/launchers-2.min.js";
      f = document.getElementsByTagName("script")[0];
      f.parentNode.insertBefore(s,f);
    })();
  })();
</script>

The above code will install the Nickelled Launcher JS on the website like normal.

Then, add the Nickelled App Id to your environment file e.g.

export const environment = {
  production: true,
  nickelled_app_id: 'your-site.com-123123',
};

Finally, when your users sign in/up or you check the user details, you should call:

NickelledLaunchers.setUser({
  appId: environment.nickelled_app_id,
  userId: user.id,
  userType: user.user_type,
  counter: 5,
  isPaying: true
});

This will set the user details and load the relevant launchers for that user.