How to add a custom share button to the referral page

Besides the easy-to-copy referral link your users can paste in to share anywhere, Prefinery also provides you the option to further personalize the referral page and include easy-share buttons for specific sharing networks like Facebook and Twitter. 

How to add share buttons to the referral page

From your project dashboard, navigate to Referral Page > Edit > Content tab and make sure to include the {{page.networks}} variable (it will automatically be displayed like a button) and Save your changes. 

You can then navigate to Referral Page > Settings to enable/disable which share button you'd like to be displayed on the referral page (where you've placed your {{page.networks}} variable at). 

Currently supported share networks are as shown in the screenshot above. 

Scrolling further down you'll find the option to set a pre-composed sharing message. Due to varying platform policies, not all networks support pre-composed messages for sharing. Save your changes when done. 

How to add your own custom share button

If you're looking to add your own share button, or perhaps add one that isn't supported in Prefinery yet, you can take advantage of our code injection support to add custom HTML, CSS and scripts to your campaign pages. 

As an example, currently unsupported networks like Telegram provides a share URL which you can use on any link/button so that when clicked directs the user to share the content as specified in the share URL parameters. 

Taking Telegram as an example, here's what a share URL could look like: 

https://t.me/share/url?url={url}&text={text}

...where {url} can be set to Prefinery's own referral link variable {{user.referral_link}}, and {text} is the pre-composed share message (e.g. Hello there!). That results into as follows: 

https://t.me/share/url?url={{user.referral_link}&text=Hello there!

Using the above share URL and by utilizing the default HTML structure and styles used by Prefinery with some script, here's how you would add the Telegram share button on your referral page:

1

From your project dasboard, navigate to Referral Page > Edit

2

Edit your referral page in HTML mode and at the end of it (after everything else) paste in the following HTML code: 

For Telegram: 

<li id="telegram"><a class="btn btn-lg btn-social btn-telegram" href="https://t.me/share/url?url={{user.referral_link}}&text=Hello there!" target="_blank"><i class="fa-telegram fab fa-lg fa-fw" aria-hidden="true"></i><span class="pfy-share-network-label">Share</span></a></li>

For SMS: 

<li id="sms"><a class="btn btn-lg btn-social btn-sms" href="sms:?body=Hello there! {{user.referral_link}}" target="_blank"><i class="fa-sms fas fa-lg fa-fw" aria-hidden="true"></i><span class="pfy-share-network-label">Send SMS</span></a></li>

Make sure to keep the closing double quotes and Save your changes.

This <li> element is the same HTML structure used by supported share buttons, except for changes to the list item id (e.g. telegram), link class (e.g. btn-telegram), link href value (e.g. the share URL), and <i> class (e.g. fa-telegram). For comparison, here's how the supported Facebook share button's code is like: 

<li id="facebook"><a class="btn btn-lg btn-social btn-facebook " href="https://www.facebook.com/sharer.php?u={{user.referral_link" target="_blank"><i class="fab fa-facebook fa-lg fa-fw" aria-hidden="true"></i><span class="pfy-share-network-label">Share</span></a></li>
3

Still in your project dashboard, navigate to Integrations > Code Injection and paste in the following script and CSS into the Head Code. Make sure all instances of the id (e.g. telegram) and link class (e.g. btn-telegram) are updated in the script and style tags. You may need to duplicate some lines in the code if you're adding multiple custom buttons and edit them accordingly. 

<script type="text/javascript">
  $(document).ready(function() {
    if (window.location.href.indexOf("/referral") > -1) {
    const shareRow = document.getElementsByClassName('pfy-share-networks')[0];


    // Duplicate more .prepend() methods below as needed
    shareRow.prepend(document.getElementById("telegram"));
    shareRow.prepend(document.getElementById("sms"));
    }
  });
</script>
<style>
    /* Add more button styles below as needed */
    .btn-telegram { background-color: #54A9EB; }
    .btn-sms { background-color: #00A4E5; }
</style>

Don't forget to Save your changes. 

The script checks if the currently viewed page is the referral page and if so checks the page for the custom share button element then prepends it to the existing supported share buttons so it displays with them. The CSS is what gives the button its custom background color. 

That's it! You should now see the new custom share button added alongside other share buttons on your referral page: 

Please note that this method will not work with emails due to email clients not supporting scripts. Instead, you will need to write, style and hardcode your own custom share button into your own custom HTML email

Still need help? How can we help? How can we help?