Skip to main content

Starts at 0:05, after the intro.

Lesson 1 of 8 · 3:33 · Intermediate · Webflow

Welcome new members with a tour

Walk new members around your site the first time they log in.

Where this journey starts

You’ve learned to store and show member data. Now the focus shifts to keeping members, and that starts with a good first visit.

By the end of this lesson you can

  • Add a step-by-step tour that runs the first time a member logs in
  • Mark the tour container and number each step with attributes
  • Write the tip text for each step
  • Restyle the tooltip and its buttons in an embed

Heads up: This uses Intro.js, an open source library you paste into your head tag. It’s AGPL licensed, so a commercial site needs a paid Intro.js licence. The tour remembers it was shown in the member’s browser, so it runs again on a new device.

Lesson notes

How it works

How the first-login tour decides when to run

MemberScript #151 uses Intro.js, an open source tour library, to draw the highlight and tooltips. Intro.js is free under the AGPL licence and sells a commercial licence, so check which one your site needs. The script itself decides when the tour runs and which elements it visits.

When the page loads, the script waits for Memberstack, then checks that someone is logged in. If nobody is, it stops, so visitors never see the tour. Next it looks in the browser's local storage for a key called ms-code-tour-shown. If the key is there, the tour has already run and the script stops. If not, it collects every element with ms-code-step, sorts them by their number, starts the tour with each element's ms-code-intro text, and saves the key so the tour won't run again.

That key lives in the browser, not on the member. A member who logs in on a new device or browser will see the tour once more there.

Set up the tour in Webflow

  1. Add the Intro.js library (its stylesheet and script tags) to your head code. There's nothing to edit in it.
  2. Paste MemberScript #151 into the page where the tour should run, usually your dashboard.
  3. Optionally mark the wrapper that holds your steps with ms-code-tour="true", as the video does.
  4. Give each element you want to highlight ms-code-step with its order, like ms-code-step="1", ms-code-step="2".
  5. Give each of those elements ms-code-intro with the tip text, like ms-code-intro="This is your control panel.".
  6. Publish and log in as a test member in a fresh private window to see it.

Style the tooltips

The video adds a code embed on the page with CSS for the tooltip. It has sections for the tooltip container and for the Next and Previous buttons, so you change background, text and button colours there. If you're happy with the default look, leave it as is. Keep each tip short: one sentence on what the element does and why the member should care.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Next, you’ll give new members a checklist that tracks their setup progress.

Chapters

Common questions

How do I add an onboarding tour for new members in Webflow?

Add Intro.js and MemberScript #151, then put ms-code-step and ms-code-intro attributes on the elements you want to highlight. The tour runs for logged-in members the first time they load the page.

How do I see the tour again while testing?

The script remembers the tour in the browser's local storage under ms-code-tour-shown. Use a new private window or delete that key to see it again.

Will visitors who aren't logged in see the tour?

No. The script only starts the tour when a member is logged in.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hi, I’m Meimei from Memberstack, welcome to MemberScript 151. In this video, I’ll show you how to set up a really neat user onboarding tour using a free, open source library called Intro.js. This script is perfect if you want to guide new users through your product page or dashboard when they first log in . So, when a member logs in for the first time, they will see a step-by-step tour that highlights certain elements on the page and provides helpful

  2. 0:30

    tips. They can click the " next" button or go back, like this. And there ’s even a progress indicator to show what stage they’re at . The best part is that this only appears once and after that it won’t pop up again. Now let me jump into Webflow and show you exactly how to set this up. So, in Webflow, the first thing you need to do is add MemberScript 151, and it should look something like this. You should also

  3. 0:59

    remember to add the intro.js script. You can just copy and paste this into your head tag and there’s nothing to edit or worry about. So just copy it as is. So, if you watch this on YouTube, the link to this code should be in the description below so you can easily grab it from there . And if you’re watching this on the Member Deck website, you should have already seen this code. On the page, you now need to add the following attributes. So, to the container that will hold all your steps, you

  4. 1:29

    will now add...so this is my div that will hold all the steps. Now you need to add the ms-code tour attribute and set it to true. Set the value to true. And then for each step you want to show the user, you need to add the ms-code attribute and then the number of that step. So, in this case, the control panel is the first step I want to show the user. And that will be number one. And then you need to add the MS code

  5. 2:00

    intro attribute and then the value, this is where you can define what exactly you want the user to see as a helpful hint or tip. This is where you would typically edit the text for this section. The same goes for the next step. So, I have an MS code step, and this is step two. MS code intro, and here I defined text that is completely different from the first step. Okay . And on the page you need to add the embed code here.

  6. 2:32

    And this embed code is what will basically add style to your tooltip container. So, if you want to change the color of a button or container, this is where you would usually edit it. So, for example, here’s my hint container, I’ll just show you it, it’s white right now. So if you want to change it to a different color, you’ll change it right here. And then you will see that there is a section here for the "

  7. 3:02

    Next" button. And this one controls the " previous" button. So, if you want to style your tooltip, the embed code is the place to do it. Otherwise, you can leave everything as is, save, close, and publish the site. And that’s it. Now you can give users a tour of your product. Don’t forget to check the description where there is a link to the code. And if you have any questions, feel free to reach out to me in the Slack 2.0 channel . Goodbye.

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.