How to Link Your Website to membermojo

We recommend two links are added to your existing site so that members can join, renew and update their details. Both links will take members from your site directly to the relevant form at membermojo.co.uk.

Join Us / Renew Link

Your member application and renewal form can be found at https://membermojo.co.uk/shortname/joinus. Link to this address using your site's editor or by copying one of the html snippets below. Replace shortname with the short name of your organisation.

    // Text link
    <a href="https://membermojo.co.uk/shortname/joinus">
        Join Us / Renew
    </a>
    joinus grey button
    <a href="https://membermojo.co.uk/shortname/joinus">
        <img src="https://membermojo.co.uk/assets/img/joinus-grey.png">
    </a>
    joinus orange button
    <a href="https://membermojo.co.uk/shortname/joinus">
        <img src="https://membermojo.co.uk/assets/img/joinus-orange.png">
    </a>

If an existing member has not visited membermojo before they will be prompted to sign in. The member can Sign In using email or password and does not require any pre-registration.

Your Membership Link

Members can update their details using the form at https://membermojo.co.uk/shortname/yourmembership. Link to this address using your site's editor or by copying one of the html snippets below. Replace shortname with the short name of your organisation.

    // Text link
    <a href="https://membermojo.co.uk/shortname/yourmembership">
        Your Membership
    </a>
    your membership grey button
    <a href="https://membermojo.co.uk/shortname/yourmembership">
        <img src="https://membermojo.co.uk/assets/img/yourmembership-grey.png">
    </a>
    your membership orange button
    <a href="https://membermojo.co.uk/shortname/yourmembership">
        <img src="https://membermojo.co.uk/assets/img/yourmembership-orange.png">
    </a>

If an existing member has not visited membermojo before or they attempt to change any details they will be prompted to sign in. The member can Sign In using email or password and does not require any pre-registration.

Associated text

We recommend placing text on your site that reinforces an online membership service is being used and that links to membermojo.co.uk are safe. Such as:

"Our club uses membermojo.co.uk for online membership. Payment is made using PayPal or cheque."

"Changes to address, contact, or family details are made through our online membership system."

Adding Links to Your Facebook Page

The same 'Join Us / Renew' and 'Your Membership' links can be added to Facebook posts and will work from desktop, tablet or mobile.

For joining and renewing:

    https://membermojo.co.uk/shortname/joinus

To update member details:

    https://membermojo.co.uk/shortname/yourmembership

In both cases replace shortname with the short name of your organisation.


How to Embed membermojo into Your Website

All member pages, including forms, can be embedded in your site. (see our Example Club embedded form)

membermojo pages are 'responsive', meaning they will adapt to the screen size they are displayed on - which includes display within a window (iframe) on your site. Widths down to 320 pixels are supported.

Adding the '?embed' suffix to an address will adapt the page for use in another site by removing unnecessary headers, footers and margins.

Join Us / Renew form

Use this code to present a membership form within your page. Existing members are prompted to sign in first to pre-populate the form with their details.

    <iframe src="https://membermojo.co.uk/shortname/joinus?embed"
            style="width: 100%; height: 1000px; border: none;">
    </iframe>

membermojo Home Page

Or display your membermojo home page. From here members can join, renew or update their details by signing in.

    <iframe src="https://membermojo.co.uk/shortname?embed"
            style="width: 100%; height: 1000px; border: none;">
    </iframe>

In both cases replace shortname with the short name of your organisation and change width and height to suit your page.

Helper script

We recommend you include our small helper, embed.js, in the same page to fully create the illusion that membermojo is part of your site.

The script automatically resizes the height of any embedded membermojo page to ensure there are no scrollbars or unnecessary whitespace caused by a fixed height. It also ensures embedded page changes are visible on smaller screens.

embed.js is very small and can be loaded from anywhere on the same page.

    <script src="https://membermojo.co.uk/embed.js" async></script>

Margins

To help control the layout of your page there are no default left or right margins on embedded forms. To add a margin around the form using the membermojo background colour add padding to your iframe style.

    <iframe src="https://membermojo.co.uk/shortname?embed"
            style="width: 100%; height: 1000px; border: none; padding: 10px;">
    </iframe>

To add a margin around the form using your background colour add margin to your iframe style.

    <iframe src="https://membermojo.co.uk/shortname?embed"
            style="width: 100%; height: 1000px; border: none; margin: 10px;">
    </iframe>

WordPress

A plugin is required to embed forms within WordPress websites. We have successfully used the free iframe plugin to do this.

Once installed and activated pages can be embedded with a simple wordpress shortcode.

    [iframe src="https://membermojo.co.uk/shortname?embed"]
G1NHS6fM4wX3c1nFN3ogkOBKWcWAIZJ78BXsLb1t