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

With Gather, you are able to embed your referral experience anywhere on your site using a floating button 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. In this article, using a little coding know-how, we show you how to add a call to action anywhere in your site.

Screen Shot 2021-02-18 at 13.08.53.png

  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, insert the script to the Liquid template for your pages (assuming that you have a refer-a-friend landing page).

2. 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.

When placing the Javascript in your template, be sure to wrap it in a javascript script tag, for example,

<script type="text/javascript">
    function launchGather() {console.log(‘Launching’);window.parent.postMessage(‘toggle-gather-app’);}

  $("#some_id").click(function () {launchGather()});
</script>

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.

For example, using vanilla JS, you can a use this within a script tag in your html template:

<script type="text/javascript">
var element = document.getElementById('some_element_id');
element.onclick = function(){
launchGather();
};


  function launchGather() {
    console.log('Launching');
    window.parent.postMessage('toggle-gather-app');
  }
</script>

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.

Screen Shot 2021-02-18 at 13.17.18.png



Cart (0)