How to integrate Community Box (member directory)
If you would like to have a member directory that dynamically updates whenever you gain/lose members via MemberSpace, Community Box is a great tool for that.
You choose what information from your members' profiles is shown in the directory (e.g. image, name, email, any custom sign up fields like social media handle or location, etc).
Your Community Box directory can be embedded onto your site (e.g. within a Member Page) so your members never have to leave your website.
MemberSpace has a simple integration with Community Box. Just follow the steps below to set up your member directory!
- Sign up for your Community Box account here.
- Log into your MemberSpace account > click on 'Customize' > 'Integrations' > 'Community Box' > then click 'Connect Community Box':Then you'll be taken to your Community Box dashboard.
- If you already have a Box set up, you can skip to Step 5.
If you don't, you'll see a menu on the left side of the screen once you've been connected to Community Box.
Click on the third option on the left ('Boxes'), then click '+ Add Box':
- Fill in your Box Name, choose a Box Template, and then click 'Add'. You should then see a popup that says 'Box added successfully', click 'Ok':
- From there, you'll be taken to the box details. You'll immediately see the 'Look & Feel' section, where you can edit colors, location, tags, etc. But let's skip that for now (you can come back later). Click on 'Integrations' in the navigation menu > then click 'MemberSpace':
Once you click 'MemberSpace', you'll see an 'Activate' button appear. Click this button:
The next screen will prompt you to choose which MemberSpace-connected website of yours you'd like to give access to. Once you've selected one, click 'Allow Access':
You will be taken to a screen to choose which Member Plans you'd like to add to your box, and fields to map between MemberSpace and Community Box.
You'll see a list of Community Box fields on the left, and the dropdown menu on the right is a list of all MemberSpace fields you have: first name, last name, email, and any additional Sign Up Fields you may have added.
You will want to go through and match up this information. Any fields you don't want, just leave the dropdown as 'Choose...'.
Below is an example of how we did it:
Once you have chosen which MemberSpace plans you'd like to import from and have mapped your fields, make sure 'active' is toggled on and click 'Sync now':
When the accounts have finished synchronizing, you will see a list of all of your members. To edit these members, you can click the box to the left of each name, and choose 'Edit Entry' at the top of that screen.
You'll now be able to configure another important Community Box feature - allowing members to edit their own profile entries in your directory.
You should see this option within Community Box > Integrations > MemberSpace:
Community Box pulls data from MemberSpace, not the other way around. So any edits your members make within the Community Box interface will NOT be reflected back in their MemberSpace accounts. You may want to consider not allowing edits within Community Box and, instead, directing members to make any profile changes via their MemberSpace Account on your website.
When a member makes an update to their account or a new member joins, this information will be automatically synced to Community Box in up to 4 hours. You do have the ability to manually force that sync immediately from the Community Box admin dashboard.
Click back on 'Look & Feel', and then click the "Site embed' link in the text:
Once you click the 'Site embed' link in the image above, follow one of their help articles.
Your member directory should now display on your page!