MemberSpace Widget

This widget integrates membership services from MemberSpace, allowing you to lock access to any page of your website then choose what people pay to get in. All member activities – like signups, account management and payment processing – take place on your site, without the customer ever leaving.

Create memberships for anything you want like courses, video tutorials, member directories, and more. Note: a paid MemberSpace plan is required for use of the widget.

Preview: https://demo.wocode.com/memberspace

Membership Site Training Series

Setup

WIDGET PLACEMENT

Widget placement depends on how you wish to use the widget. You may use the widget to restrict certain pages on the site, provide a login button in your header, or create a dedicated account page. In some cases, you will need to use multiple instances of the widget, in other cases, you will only need one instance of the widget. Refer to the Widget Mode examples below for more information on proper widget placement.

WIDGET OPTIONS (CONTENT SECTION)

  • Open the widget option panel.
  • There are 3 widget modes: MemberSpace Core, Login / Account Popup Button, and Login / Account Embed. See details for each below.
  • Widget Mode – MemberSpace Core: This mode is important, as it adds the MemberSpace HTML code into into your site. Regardless of how you plan to use MemberSpace within your site, you will need to use one instance of the widget in MemberSpace Core mode. In most cases, this instance of the widget should be placed in the header or the footer of the site (we prefer to use the footer, as there is more space to work with).

Other widget modes such as  Login Button or Login / Account Embed (both discussed below) require a separate instance of the widget. To be clear, using other widget modes will require two instances of the widget – one in MemberSpace Core mode and another in the required mode (i.e. Login Button).

Use case: Use the widget to restrict access to individual pages on your site. For example, the Courses and Webinars pages on our demo site are restricted to members only. To do this, place the widget in the header or footer. You will not see the widget on the published page.

  • Widget Mode – Login / Account Popup Button: This widget mode creates a button which allows users to log in via a pop up. Place the widget where you would like the button to appear. The widget itself is the button, so use the styling options in the Design tab to style the button as you like.Use Case: Place a member login button in the header of your site. For example: the Member Login button on the demo site uses the widget in this mode in the header.

Note: a separate instance of the widget also needs to be placed in the header or footer, set to MemberSpace Core mode.

  • Widget Mode – Login / Account Embed: This widget mode embeds login fields on your site. This mode may be used as an alternative to a login button.When using this mode, the widget will need to be sized appropriately. This mode uses an iframe, and the widget may need to be sized largely to display all login fields or page content. Once a user logs in, the iframe will display account information, or redirect, based on settings in your MemberSpace backend.

Use Case: Use as a dedicated login or account page on your site. To do this, create a page and place the widget there. This page will display account information once logged in.

See an example of a login page on our demo site here: https://www.memberdemo.club/login

We encourage you to take advantage of the redirect options when using the  Login / Account Embed mode. Redirects create a smoother, more logical flow for users. Redirect options can be found in your MemberSpace backend by visiting Member Plans > Edit Plan or Customize > General Options.

Note: a separate instance of the widget also needs to be placed in the header or footer, set to MemberSpace Core mode.

  • MemberSpace Subdomain: This is how you link the widget to your MemberSpace account. For example, all of the widgets on our demo site use the MemberSpace Subdomain memberdemo, as our live site is memberdemo.club.

    You create this subdomain name yourself when setting up your domain at memberspace.com. See the  Setup at MemberSpace > Set Up Your Domain section below.
  • Depending on the Widget Mode you select, you will see varying widget options.
  • Login / Account Popup Button Label: This option is only seen if the Login / Account Popup Button Widget Mode is selected. This is the text that will appear on the Login button. Once a member logs in, the button text will change to “Account”. You may change the logged-in text in the MemberSpace backend at Customize > Custom Wording > Website.
  • Blackout Pages: This option is only seen if the MemberSpace Core Widget Mode is selected. This feature masks member pages with a solid color overlay for non-members. By default, if a non-member clicks on a member page, they will briefly see the content on a page before being asked to log in. This brief preview gives non-members a quick preview of what they may be missing out on as a non-member and may be viewed as a benefit. However, if you do not want non-members to see a brief page preview, use the Blackout Pages feature.

You may customize the color overlay in the Design section of the widget. It is important to use the Protected Pages list (explained below) to specify which pages should be blacked out. When the Blackout Pages feature is turned on but no protected pages are specified, all pages on the site will be briefly blacked out.

  • Hide Protected Pages For Non Members: This feature hides protected member pages in the site navigation when they are not logged in. Note that this feature is intended to hide pages in the main header navigation or Mega Menu only. Other page links such as the footer or elsewhere will not be hidden.
  • Protected Pages: This feature has 2 purposes: to specify which pages will be hidden for non-members and which pages will be blacked out. The toggle for those features (Blackout Pages andHide Protected Pages For Non Members) must be turned on for those features to work on the specified pages. Use the “Add Page” link to add pages as needed.

WIDGET OPTIONS (DESIGN SECTION)

The Design section in this widget has a small number of options, as almost all of the styling is done in the MemberSpace backend. See the Customizations section below for additional information.

  • Blackout Background: Set the color of the blackout overlay.
  • Login / Account Popup Button Styling: This section allows you to style the button when the widget is used in the Login / Account Popup Button Widget Mode. You will find styling options consistent with standard buttons in the Without Code builder.

MemberSpace Account Setup

An active MemberSpace account is required to use the MemberSpace widget. This section will briefly cover the account setup process at MemberSpace. Since we are not affiliated with MemberSpace, keep in mind that these steps are subject to change, as is the pricing and the look of the site.

  • Go to memberspace.com.
  • Click the Try MemberSpace Now or Your Account button to sign up.
  • You will see a single pricing option with a 14 day free trial. We encourage you to use the 14 day trial to get a feel for the MemberSpace services.
  • MemberSpace is a paid service with no free option. However we believe the standard $25/month plan is a reasonable cost for the service it provides, and that cost can of course be passed on to your customer.
  • While most users will find everything they need in the “Getting Started” plan, additional plan options are available. Click the “other plan options” link to see more plans.
  • Larger businesses may be interested in higher plan rate features, such as reduced transaction fees.
  • Click the “Start your 14-day trial” button and proceed through the signup process.

Setup at Memberspace.com

In this section, we’ll cover the basic steps for setting up a member site. These steps all take place at memberspace.com

SET UP YOUR DOMAIN

  • Enter your website address.
  • In the “Which platform is your website on field”, select Custom HTML.
  • Choose your site name: this name appears in notifications and is what your members see.
  • Choose your account URL: This is the subdomain you create at memberspace.com. You may name it anything you like. This is also what will be entered in the MemberSpace Subdomain field in our widget, which links the widget with your MemberSpace account.

SETTING MEMBER PAGES

Member pages are the pages you want to be protected, and available only to members.

  • Click the Protect Member Pages button.
  • Enter your page URL: enter the name of your page. It should be entered in the following format: “/members”
  • Enter page customizations as needed with the remaining options.

SETTING MEMBER PLANS

There are many options and customizations available for your member plans. You may create free and paid plans. Paid plans utilize Stripe for payment processing and offer one time and recurring payment options. We will cover just the basic steps for setting up a free plan in this section.

  • Click the Member Plans link in the top navigation.
  • Enter the plan name and plan type (free or paid).
  • Note that this page also gives you options for where you’d like to send users after sign up and after login.
  • Create additional member plans as needed by clicking the Create Member Plan button.

ADDING AND MANAGING MEMBERS

New members can be added when a new users signs up as a member, and when you add members manually.

  • Click Members in the top navigation.
  • To add a new member manually, click the Invite New Member button.
  • Complete the member invite form. The user will become a member when they accept the invitation in their email.
  • In the Members page, you may search, filter, edit, delete and much more.

Additional MemberSpace Backend Features

What we refer to as the MemberSpace “backend” is basically your entire account area when logged into MemberSpace. There are a vast number of options, allowing you to carry out various functions, add customization, style forms, etc. In this section, we’ll cover a few important options. Explore the MemberSpace backend to discover more features, and refer to their help docs if you need help.

REDIRECTS

Redirects are an important part of the member experience. Redirects will guide customers to important content and create a general user flow that is unique to your site. Use the redirect options in the MemberSpace backend to control user flow.

Here are the redirect options and where to find them.

  • After Sign Up – send members here: Member Plans > Edit Plan
  • After Log In – send members here: Member Plans > Edit Plan
  • Send members without access here: Customize > General Options
  • Send members who log out here: Customize > General Options

BUTTON LINKS

You may use links for buttons in your site, or to use as sign up links in emails, forms or messages. Here are a few examples.

  • Course signup link: Member Plans > “Get sign-up link”
  • All Plans signup link: Member Plans > “Get All Plans link”
    •

SECURE CONTENT LINKS FOR ADDED SECURITY

Your member pages may likely contain content like PDFs, images, videos, audio files and more. This content may be placed in member pages as you would place content on any other page. However, you may use content links for an extra layer of security.

For example, if someone was able to nefariously access a member page, content links add an extra level of security. When someone clicks on a content link, a second check is performed, to ensure that the user is indeed a member.

Content links can also be used in emails when sending content to members.

  • Go to Member Plans > Manage Content Links.
  • Click the Add Content Links button.
  • In the content links area, as content as needed.
    •

LOOK AND FEEL

To style your forms, pop ups, and basically any MemberSpace element, you do this in the MemberSpace backend, and not the Without Code widget. The one exception is when you’re using the widget in the Login / Account Button widget mode. The Member Login button styling can be found in the widget.

  • To access styling options, go to Customizations > Look & Feel.
    •

EVERYTHING ELSE

As you may have guessed, we’ve barely scratched the surface of the many options available in the MemberSpace backend. The majority of these options can be found by clicking Customizations in top navigation. We encourage you to explore these options!