Integrating MembershipWorks Features with Your Website

Install MembershipWorks

1. Go to Plugins in WordPress
2. Click “Add New”
3. Type MembershipWorks into the Search bar
4. In the search results, look for “MembershipWorks – Membership, Events & Directory” and click Install Now
5. Click Activate
6. Once the plugin is installed you will see MembershipWorks in your WordPress menu. Click on MembershipWorks from your WordPress menu and log in using your MembershipWorks admin credentials.

Now you’re ready to start adding MembershipWorks features to your site using shortcodes for the various features. Each feature should have its own WordPress page. See a WordPress membership site with MembershipWorks.

Where to find the shortcodes

It is important to note that each WordPress page can only have one shortcode.

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 Gutenberg editor you will need to place it in a 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.

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.

See a SquareSpace membership site with MembershipWorks.

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.

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.

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.

Embedding Instructions

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.

See a Weebly membership site with MembershipWorks.

Initial Setup

IMPORTANT: Wix integration requires a Premium plan (ie. a paid plan) and the website needs to be published and connected to a domain. If you change the domain, you will need to follow the steps below to add the MembershipWorks Custom Code again.

Before adding any pages with MembershipWorks features (directory, events, etc) you will need to setup your site to process the MembershipWorks snippets:

1. In Wix, go to Settings > My Dashboard, click on Settings, then click on Advanced > Custom Code. For Editor X, go to your Dashboard and click on Settings. Then proceed to Advanced > Custom Code.
2. Click on “Add Custom Code”.
3. Enter the following code snippet in the code snippet box:
   <script type="application/javascript" src="https://cdn.membershipworks.com/wix.js"></script>
4. Under “Name” enter “MembershipWorks”.
5. Under “Add Code to Pages”, select All Pages and Load code on each new page.
6. Under “Place Code in” select Body – start.

Feature Snippets

Once you’ve completed the initial setup, you can add snippets. Create a separate page on your website for each feature you need, and then place the corresponding snippet on that page as follows:

If using the original Wix editor, start here:

1. Click on “Add Strip” and add a blank Classic strip.
2. Click on the “Stretched” button on the strip and select “Page”.
3. Proceed to #5

If using Wix Editor X:

1. Click Add on the top of the Editor.
2. Click Layout Tools.
3. Click Container and choose Empty Boxes or Grids.
4. Drag your container onto your page. Proceed to #5

After following the above steps with either editor:

5. Click on the “Add” button, select Input > Text > Text Box and drop it onto the strip/container created in the first set of steps. Note for original Wix editor users: if you click “Add” and don’t see an “Input” option, click the “Dev Mode” button in the top Wix toolbar and make sure “Dev Mode” is turned on.
6. Resize the text box to the appropriate width – this will be the width of the directory, calendar, or form when it appears on the website. The height of the text box is not important and can be left as default.
7. Click on the “Settings” button for the text box.
8. Under “Show Initial Text” select Placeholder Text. Note that you may need to scroll down to see this setting. Please see the screenshot below for reference.
9. Select the feature you wish to embed on the page from the dropdown in MembershipWorks > Help > Basics & Setup > Wix > Feature Snippets, then copy the snippet from the yellow box and paste the snippet into the “Placeholder text” setting on your Wix page.

For example, if you want a page for members to sign in and manage their account, you’ll:

1. Create a page on your website
2. Add a strip (or Container if using Editor X) and text box
3. Back in MembershipWorks, select the “Member sign-in and manage account” option in Help > Basics & Setup > Wix > Feature Snippets to view and copy the snippet
4. Place that snippet into the Placeholder text setting for the text box.

Notes:

• You can only use 1 snippet per page.
• HTML snippets for Forms, Carts & Donations; Boards; and single event registration can be obtained from the respective Form, Board or Event dashboard.

Our Wix integration is similar to our other CMS integrations with two minor exceptions:

1. The tag to display the logged in member’s name is not available in Wix.
2. While member only content is available in Wix, the features listed in Help > Basic & Setup > Squarespace, Weebly, HTML5 > Advanced Member Only HTML are not available.

See a Wix membership site with MembershipWorks.

MembershipWorks integrates seamlessly on websites built on the Without Code platform. Without Code (WOCode) 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. See a Without Code membership site with MembershipWorks.

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
  
• Drag the widget into a new row on the right
  
• 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.
  

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.
  

MembershipWorks offers easy copy and paste integration on websites built with Duda.

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 Duda) 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. 

See a Duda membership site with MembershipWorks.

To add MembershipWorks features to your site:

• In Duda, 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 code snippets on the same page.
• Go to MembershipWorks > Help > Basics & Setup > SquareSpace, Weeby, HTML5 > HTML5 Snippets and generate an HTML snippet by using the “Select your feature…” menu. Copy the HTML snippet.
• Back in Duda, add in an HTML widget by dragging the widget into the section of the page where you want it placed.
  
• Paste the copied HTML snippet into the HTML Content box and click Update.
  
• In a separate web browser where you are not logged into Duda, view your page.
• Repeat the process of adding pages and snippets to add additional MembershipWorks features.

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 an HTML snippet. Copy the snippet.
• Back in Duda, 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.
• In a separate web browser where you are not logged into Duda, view your page.

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 your event’s 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.

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.

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.

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.

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.