Adding MembershipWorks Features to Your Website

Adding MembershipWorks features to your website is as easy as copying and pasting some code we provide. The page where you paste the code may look a little different depending on what CMS your website is built on. Click on the right one for you to get directions.

Other Content Management Systems

If your website is not built using WordPress, SquareSpace, Weebly or Without Code you should follow the directions in HTML5. Please note that we can’t guarantee to work with every CMS. We suggest you test out the integration by:

  1. Sign up for a 50 Free plan.
  2. Follow the instructions for integrating MembershipWorks features such as the join form, directory and calendar into an HTML5 website before spending too much time customizing your MembershipWorks account.
WordPress Instructions

To add MembershipWorks features to your WordPress website you will simply copy the shortcode provided by us and paste it onto your WordPress page. It is important to note that each WordPress page can only have one shortcode.

Where to find the shortcodes

Shortcodes can be found by logging into your MembershipWorks account and going to Help > Basics & Setup > WordPress > WordPress Shortcodes. Once there you can click on “Select your feature” to get a list of shortcodes.

What to do with the shortcodes

You simply need to copy the shortcode and paste it onto the WordPress page. If you are using the Guetnberg editor you will need to place it in a shortcode block:

shortcode block

For other editors you’ll need to see if you can just paste the shortcode on the in a text box or if it requires you to paste it in a special box or module.

Watch the video to see how WordPress integration works.

Squarespace Instructions

You can integrate our system with your website using HTML snippets. Create a page on your website for each feature you need, and then place the corresponding HTML snippet on that page. For example, if you want a page for members to sign in and manage their account, create a page on your website, select the “Member sign-in and manage account” option below to obtain the HTML snippet, then place that snippet on the page.

Note 1: You can only use 1 embed code per page.

Note 2: Previews for the pages with HTML snippets may not work properly. Use a different browser (where you are not logged into Squarespace/Weebly/etc) to view the actual site.

Note 3: HTML snippets for forms/carts/donations and single event registration can be obtained from the respective form or event dashboard.

Note 4: For SquareSpace, please disable Ajax loading for your template.

Where to find the HTML snippets

Snippets can be found by logging into your MembershipWorks account and going to Help > Basics & Setup > SquareSpace, Weebly, HTML5 > HTML5 Snippets. Once there you can click on “Select your feature” to get a list of snippets.

Weebly Instructions

When using MembershipWorks with Weebly, it is important to use the type of Weebly website builder that works best with MembershipWorks.

If your site has the page builder with the controls that look like the one shown below with the dark background, you should proceed with integration as described in the video below.

weebly sidebar original

If you are instead signing up for a new Weebly website, you will see the following screens during your signup process. Please make sure to select “I want a personal website” and “I just need a website”. Choosing a personal website doesn’t prevent you from having a business website; you can add a store later. If you click on “Try Square Online” or “I need a website with an online store”, MembershipWorks will not be able to work properly on the website.

what kind of website would you like to create?

weebly i just need a website

If you already have an existing website using Weebly’s Square Online or Online Store Builder – some MembershipWorks features such as join forms, member login pages, directories, deals and event calendars, will work in a basic fashion. However you cannot create member only content pages, and members would not be able to remain signed on as they navigate the website. In addition, any settings you have to redirect members on signup, renewal, for events, etc will not work properly. Therefore we do not recommend using MembershipWorks with a Weebly + Square Online website.

 

Where to find the HTML snippets

Snippets can be found by logging into your MembershipWorks account and going to Help > Basics & Setup > SquareSpace, Weebly, HTML5 > HTML5 Snippets. Once there you can click on “Select your feature” to get a list of snippets.

Without Code Instructions

MembershipWorks integrates seamlessly on websites built on the Without Code platform. Without Code offers a MembershipWorks widget with 12 feature modes that bring MembershipWorks functionality into your Without Code website. Feature modes include a member directory, member maps, event calendars, member sign-up forms and more.

For MembershipWorks features to work properly, you’ll first need to disable Ajax page changing in Without Code.

  • Go to Settings > Head HTML
  • Under “AJAX Page Changing (Quick Navigation)”, toggle “Enable AJAX Page Changing” to turn it off.

To add MembershipWorks features to your site:

  • Create a new page for your feature. Note that you should build a new page for each additional MembershipWorks feature you want to add. You cannot place multiple MembershipWorks widgets on the same page.
  • Click on “+ Widgets” in Without Code and search for MembershipWorks
    without code widgets
  • Drag the widget into a new row on the right
    without code drag widget
  • Enter your MembershipWorks Organization ID and select the feature mode you want such as member directory, event calendar, etc. You can find your Organization ID in MembershipWorks under Organization Settings.
    without code organization ID

Member Only Content

You can build pages that hide content from non-members.

  • Go to MembershipWorks > Help > Basics & Setup > SquareSpace, Weeby, HTML5 > Creating Member Only Pages (HTML5) and generate a HTML snippet
  • Back in Without Code, add in an HTML widget. Drag it into a new row that is above the content you want protected.
  • Paste the copied HTML snippet into the box and click Update.
    without code member only content
HTML5 Instructions

You can integrate our system with your website using HTML snippets. Create a page on your website for each feature you need, and then place the corresponding HTML snippet on that page. For example, if you want a page for members to sign in and manage their account, create a page on your website, select the “Member sign-in and manage account” option below to obtain the HTML snippet, then place that snippet on the page.

Note 1: You can only use 1 embed code per page.

Note 2: Previews for the pages with HTML snippets may not work properly. Use a different browser (where you are not logged into Squarespace/Weebly/etc) to view the actual site.

Note 3: HTML snippets for forms/carts/donations and single event registration can be obtained from the respective form or event dashboard.

Note 4: If your theme or another feature of your site uses Ajax loading, you will need to turn it off so that MembershipWorks can function on your site properly.

Where to find the HTML snippets

Snippets can be found by logging into your MembershipWorks account and going to Help > Basics & Setup > SquareSpace, Weebly, HTML5 > HTML5 Snippets. Once there you can click on “Select your feature” to get a list of snippets.

Settings for “Select your Feature” Explained

Directory Options/Settings

You have several views of the directory available. You can have a directory with a map, without a map or just a map. You can determine which view you’d like by selecting it in the “Select your feature” box.

Display from folder gives you the option to select which folder you’d like the directory to pull accounts from. In most cases this would be your “Members” folder.

Sort members by lets you choose how you’d like to have your members sorted in the directory.

Optional Display only members with any of following labels lets you limit the directory to just members with a specific label or membership level. In most cases you can just skip this section. If you do need to limit your directory to members with a particular label, just click on that label and you will see the background of it turn blue.

Event Settings

You have several views available for displaying your events. You can have an event calendar, an event list, or an event calendar with inverted colors. You can determine with view you’d like by selecting it in the “Select your feature” box. You can see examples of all the views on our demo website.

Optional – Display only the following event categories (none selected = display all) will allow you to create a calendar that is limited to specific event categories. If you want all event categories listed you don’t need to do anything here. To limit to specific event categories just click on their names. You’ll see the background turn blue to show that the category has been selected.

Membership Sign-Up Form Settings

Most organizations will not need to customize this. You can just copy the shortcode and paste it on your page. However, if you’d like to have your membership levels listed in a particular order or would like to have the join form for different membership levels on different pages you can set that up here.

Ordering the Membership Levels on the Sign-Up Form

To order the membership levels on the join form click on the membership levels in the order you’d like them to be displayed under “Optional – display only following specific levels in order selected (none selected = display all from most expensive to least expensive):

Creating a join page that lists only specific membership levels

To create a join page that only lists specific membership levels you can click on the level you’d like listed under “Optional – display only following specific levels in order selected (none selected = display all from most expensive to least expensive):”. You’ll see the background of the level turn blue to show that is has been selected.

This is commonly used if groups have both several levels of business and personal membership. They could send business members to the join page that lists all of the business levels and personal members to the page the lists all of the personal membership levels.