Development

Using the Memberful Overlay with Ember.js

One of our long time clients is a non-profit. As you can imagine fund-raising is a mission critical part of what they do. And they don't have a huge technology budget. So when they came to us wanting to add a paid membership (complete with a newsletter and special members only pages) to their website we had a bit of a conundrum. Not only because they couldn't afford a custom solution, but we didn't have the time to build one (we've been crazy booked up for the last couple of months and we were squeezing them in). It turns out Memberful will handle just about all of that for you and they'll even integrate with your website via a modal overlay. We only had one problem. Their overlay isn't built to work with single-page apps. 

Luckily their customer support team is awesome and Drew and Patrik gave me some tips to get it working. It turns out that the overlay script is designed with two constraints:

  1. It needs to be called after the page has been rendered. The script looks for links to your memberful subdomain, and when they are clicked it intercepts them and pulls up the modal overlay instead of taking your users to your memberful subdomain.
  2. It can only be called once, or else it won't work. The script inserts a div with the class "memberful-overlay". If there is more than one such div the script gets confused and doesn't pull up either.

That said, fixing both of those issues is as simple as putting the overlay script in the head element of your index.html and adding this didTransition function to the routes for whatever pages you need to use the Memberful overlay on:


App.MembershipRoute = Ember.Route.extend({
  actions: {
    didTransition: function() {
      // Call this after the page has rendered. The memberful
      // script will bail out if it doesn't find any memberful links.
      Ember.run.scheduleOnce('afterRender', this, function() {
        var overlays = Ember.$('.memberful-overlay');
        for(var i = 0; i < overlays.get('length'); i++) {
          overlays.get(i).remove();
        }
        window.MemberfulEmbedded.setup();
      });
    }
  }
});

You may have noticed that in that code we are calling the memberful script every time that we transition to our page. We need to do that or else the memberful script won't intercept our links and our users will be taken off site instead of being greeted with the memberful overlay. That said it runs afoul of the second constraint I talked about earlier. So if there are any existing overlays, we need to remove them so that we can call the script again and everything will still work.

Bill Brower

Bill is the lead developer at Krit. He writes about technical stuff like how to handle big loads with Apache. If you want to talk about nerdy stuff like rap music and fantasy football drop him a line .