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

Modified on Wed, 28 Jun, 2023 at 5:47 AM

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>

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article