Welcome to Yotpo's Loyalty and Referrals Developer Hub

Welcome to the Loyalty and Referrals developer hub. You'll find comprehensive guides and documentation to help you start working with Loyalty and Referrals as quickly as possible!

API Reference    Guides

Creating the "Earning Loyalty Points" Section

Step 1: Create campaigns in the Swell admin

  1. Log in to Swell
  2. Click Earning Points
  3. Create your Earning Points campaigns
    a. This should be done after building your program strategy with your Swell Success Manager
  4. Complete the relevant parameters for each campaign:
    a. How many points should we give the customer?
    b. Title: The campaign name
    c. Reward text: What will be displayed to the customer as the reward
    d. Description: A short description of the campaign for users to read
    e. How many times each customer can complete this campaign? (relevant campaigns only)
    f. If can be completed more than once What's the frequency in which the campaign can be
    completed?

    g. Other fields, specific to each campaign, will populate in the campaign section

Step 2: Design the rewards pages

  1. Design the logged-in and logged-out version of your rewards page
  2. In the How to earn points section, design a tile for every campaign

Step 3: Develop the front-end of your Loyalty pages

Before starting front-end development, install the Swell Loyalty app. Installation Guides

Refer to our Loyalty API reference to develop the Earning Points section of your loyalty program,

We recommend using the JS SDK to retrieve backend data and render it within your storefront.

1. Create campaign tiles on the front end:
Use this method to retrieve an array of campaigns. This array will hold a Campaign Object for every campaign you've set up in the Loyalty app back end.

Now that you have an array of campaigns, you can render every object as a “tile”.
On each tile, place the data from the campaign object as text.

The most commonly displayed data points used here are:

  • Title
  • Reward Text
  • Icon / Image

2. Creating responsive campaign tiles:

Use this markup on each tile you’ve just rendered to make the tile responsive.

The data-campaign-id for every campaign is returned from the GetActiveCampaigns method.
We recommend using display-mode = modal to open out-of-the-box** campaign pop-ups.
When shoppers click on a tile, the tile will open a pop-up from Swell with the description of the campaign, as well as a call-to-action button if this is an interactive campaign.

Below, you'll find a sample code for creating the Loyalty API campaign section on the front end:

<section class="swell-campaign-list-container">
    <h4 class="swell-campaign-list-title">Ways to earn points</h4>
        <ul class="swell-campaign-list">
        </ul>
</section>
<style>
    .swell-campaign-list {
        list-style: none;
        display: flex;
        width: 50%;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 0;
        position: relative;
    }

    .campaign {
        width: 33%;
        padding: 1rem;
        box-sizing: border-box;
        color: black;
        font-weight: 300;
        border: 1px solid #eee;
        position: relative;
        min-height: 18rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .campaign i {
        height: 3rem;
        width: 3rem;
        font-size: 48px;
        text-align: center;
        color: black;
        margin-bottom: 2rem;
    }

    .campaign div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        min-height: 8rem;
    }

    .campaign div h5 {
        width: 100%;
        text-align: center;
        font-weight: 300;
        font-size: 12px;
    }

    .swell-campaign-list-title {
        width: 100%;
        text-align: center;
        margin-bottom: 3rem;
    }

    button.swell-campaign-link {
        padding: 0.5rem 1rem;
        background-color: black;
        color: white;
        font-weight: 600;
        width: 10rem;
        border: 1px solid black;
    }

    li.campaign p {
        width: 100%;
        margin-bottom: 0;
        font-weight: 800;
    }

    .swell-campaign-list-title {
        width: 100%;
        font-size: 28px;
        text-align: center;
    }

    @media screen and (max-width: 800px) {
        .campaign {
            width: 50%;
        }
        .campaign .pink {
            padding: 0.3rem 0.5rem;
        }

        .campaign div h5 {
            width: 100%;
            text-align: center;
            font-weight: 300;
            font-size: 12px;
        }

        .campaign i {
            height: 2rem;
            width: 2rem;
            font-size: 32px;
        }

        .swell-campaign-list {
            width: 100%;
        }
      
        .swell-campaign-list-title {
            font-size: 24px;
            margin-bottom: 0;
        }  
    }
</style>
<script>
    $(document).on("swell:initialized", () => {
        swellAPI.getActiveCampaigns().forEach(campaign => {
                $(".swell-campaign-list").append(
                    $("<li>").addClass("campaign").append(
                        $("<div>").append(
                            $("<i>").addClass(`fa ${campaign.icon}`),
                            $("<p>", {text: campaign.rewardText}),
                            $("<h5>", {text: campaign.title})
                        ).attr('id', `campaign-${campaign.id}`)
                    ).addClass("swell-campaign-link")
                    .attr(
                            {
                                "data-campaign-id": campaign.id,
                                "data-display-mode": "modal"
                            }
                        )
                );
        });
    });
</script>

Updated 2 years ago

Creating the "Earning Loyalty Points" Section


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.