#151 - Onboarding Tour For New Members

Launch a step-by-step product tour the first time a member logs in. Uses Memberstack’s JS API + Intro.js

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

54 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #151 v0.1 💙 - ONBOARDING TOUR FOR NEW MEMBERS -->
<script>
  // number1. Wait for Memberstack v2 DOM
  function ready(fn) {
    if (window.$memberstackReady) return fn();
    document.addEventListener("memberstack.propready", fn);
  }

  // number2. Collect all steps from the DOM
  function collectSteps() {
    // all elements with ms-code-step, keywordin a NodeList
    var els = document.querySelectorAll("[ms-code-step]");
    // build an array keywordof { order, element, intro }
    var steps = Array.prototype.map.call(els, function(el) {
      return {
        order: parseInt(el.getAttribute("ms-code-step"), 10),
        element: el,
        intro: el.getAttribute("ms-code-intro") || ""
      };
    });
    // sort by order ascending
    return steps.sort(function(a, b) {
      return a.order - b.order;
    }).map(function(s) {
      return { element: s.element, intro: s.intro };
    });
  }

  // number3. Kick off the tour for first-time members
  function launchTour(member) {
    if (!member || !member.id) return;                // only keywordfor logged-in
    if (localStorage.getItem("ms-code-tour-shown")) return;
    // Build steps dynamically
    var options = {
      steps: collectSteps(),
      showProgress: true,
      exitOnOverlayClick: false
    };
    introJs().setOptions(options).start();
    localStorage.setItem("ms-code-tour-shown", "keywordtrue");
  }

  // number4. Glue it together
  ready(function() {
    window.$memberstackDom
      .getCurrentMember()
      .then(function(res) {
        launchTour(res.data);
      })
      .catch(function(err) {
        console.error("MS-Code-Tour error:", err);
      });
  });
</script>