How do I make my referral program pop up as a modal?

Updated: If you're looking to add a "floating button" to your store that displays your referral program, check out this tutorial for an easy, non-technical way to do that.

The instructions provided below are intended for use only if you feel comfortable with HTML and javascript. If you don't feel comfortable making these types of changes, email us at support@shopcircle.co and we can make the changes for you.

First, make sure you have created a Custom Page campaign. You'll be provided a bit of code that looks like this:

<script src="https://app.conjured.co/shopify/referral/widget.js?shop=domain.myshopify.com&cmp=XXX"></script><div id="conjured_referral"></div>

You'll need to add this to your theme, with one exception – add two extra parameters to the query string, modal=1 and modalClosed=1:

<script src="https://app.conjured.co/shopify/referral/widget.js?shop=domain.myshopify.com&cmp=XXX&modal=1&modalClosed=1"></script><div id="conjured_referral"></div>

Then you can add a button anywhere you want in your store using the following code:

<button id="show_modal">Show Modal</button>
<script type="text/javascript">// <![CDATA[
  function conjuredReferralExternal(conjuredReferral) {
    jQuery('#show_modal').click(function() {
      conjuredReferral.showModal('conjured_referral');
    });
  }
// ]]></script>