Integrate Our Features into Your Wix Website
You can easily integrate our features into your Wix website by adding our HTML snippets to your website pages.
Where to find the HTML snippets
Snippets can be generated under Wix Feature Snippets.
Initial Setup
Before adding any pages with MembershipWorks features (directory,
events, etc) you will need to follow the Initial Setup Instructions to setup your site to process the
MembershipWorks snippets.
- Go to Settings > My Dashboard, click on Settings, then click on Advanced > Custom Code.
- Click on Add Custom Code.
- Copy and paste the following code snippet to the code snippet box:
<script>document.body.style.visibility='hidden';</script><script type="application/javascript" src="https://cdn.membershipworks.com/wix.js"></script> - Under Name enter MembershipWorks.
- Under Add Code to Pages, select All Pages and Load code on each new page.
- Under Place Code in select Body - start.
- Select the Code Type tab and select Essential.
Important Note: 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 Initial Setup Instructions again to add the
MembershipWorks Custom Code to the new domain.Step by Step Instructions
Once you’ve completed the initial setup, you
can add snippets.
Add Feature Snippets Using the Original Wix Editor
Step 1: Add Strip
Click on Add Strip and add a blank Classic strip.
Step 2: Edit Strip
Click on the Stretched button on the strip and select Page.
Step 3: Add Text Box
Click on the Add button at the top left of the editor. Select Input > Text > Text Box and drop it onto the strip/container created in the first set of steps.
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.
Step 4: Resize Text Box
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.
Step 5: Edit Settings
Click on the Settings button for the text box.
Step 6: Placeholder Text
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.
Step 7: Copy Snippet and Add to Placeholder Text
Copy the snippet from the Wix Feature Snippets generator and paste it into the Placeholder text field on your Wix page.
Step 8: Save/Publish Page
Save the page and then click Publish.
You will not see the feature displayed in the Wix Preview. You will need to go to the page on your website in order to view the feature.
Add Feature Snippets Using the Wix Editor X
Step 1: Add
Click on the Add button at the top left of the editor.
Step 2: Layout Tools
Click Layout Tools.
Step 3: Empty Box/Grid
Click Container and choose Empty Boxes or Grids.
Step 4: Add Container to Page
Drag your container onto your page.
Step 5: Add Text Box
Click on the Add button at the top left of the editor. Select Input > Text > Text Box and drop it onto the container created in the first set of steps.
Step 6: Resize Text Box
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.
Step 7: Text Box Settings
Click on the Settings button for the text box.
Step 8: Placeholder Text
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.
Step 9: Copy Snippet and add to Placeholder Text
Copy the snippet from the Wix Feature Snippets generator and paste it into the Placeholder text field on your Wix page.
Step 10: Save/Publish Page
Save the page and then click Publish.
You will not see the feature displayed in the Wix Preview. You will need to go to the page on your website in order to view the feature.
Add Feature Snippets Using the Wix Harmony Editor
Step 1: Add Section
Click the Add button at the top left of the editor. Select Sections > Blank Section
Step 2: Add Paragraph
Click the Add button at the top left of the editor. Select Elements > Text > Paragraphs. Drag and drop the first Branded paragraph into the previously-added Section. Note that MembershipWorks will inherit the font of the Wix paragraph option you choose.
Step 3: Adjust Paragraph Width and Position
Adjust the paragraph's width and position if necessary. This will be the width and position of the directory, calendar, form, etc. when it appears on the website. The height of the paragraph is not important and can be left as default.
Step 4: Copy Snippet and Add to Paragraph
Copy the snippet from the Wix Feature Snippets generator and paste it into the paragraph. Note that the paragraph should only include the snippet. If you need to add other text, it should be added to separate paragraphs.
Step 5: Save/Publish Page
Click the Publish button at the top right of the editor and then click the Publish button at the bottom of the popup.
You can only use 1 snippet per page.