How to Launch the Refer a Friend Side Bar Anywhere on the Page

Gather gives you a floating button you can use on the site, which launches the refer a friend sidebar.

That said, sometimes you may want to launch the referral experience from within certain parts of the page. Perhaps give your visitors a Call to Action (CTA) to open the referral program.

You can do so with a little coding know how.

Here goes:

  1. Add the following function to your template’s javascript:

    function launchGather() {
    console.log(‘Launching’);
    window.parent.postMessage(‘toggle-gather-app’);
    }

If you’re a Shopify store, this template the Liquid template for your pages (assuming that you have a refer-a-friend landing page).

  1. Call that function as a result of an onclick event, i.e. when a visitor clicks on the button:

For example if you are using jQuery, you could use this
$("#some_id").click(function () {launchGather()});

Where ‘#some_id’ is the button css id selector.

jQuery will not be the only option, there are other options to call the method in step 1, depending on the framework you are using.

Calling that javascript code will open the refer a friend sidebar on your site, where clicking the button again will toggle it to close again.

Hope this helps!