Sample

Example Developer Page Setup

Let's imagine an online fashion store that wants to enhance its relationship with its customers through a loyalty program. By integrating the LoyaltyLion tool through the Developer Pages, the store can can completely customize the user experience.

Through tight integration with the existing system, it is possible to offer customers loyalty points not only for purchase, but also for actions such as sharing on social media or registering for a newsletter.

The example below shows how Developer Pages allow you to create a dedicated section within the app where customers can monitor their loyalty score, view exclusive rewards, and participate in special events. This integration not only encourages customer loyalty, but also offers fluid and engaging navigation, thus demonstrating the potential of Developer Pages in creating and offering a thoroughly personalized experience.

These steps below outline how it is possible to allow your users to view their loyalty score report within the app via a Developer Page. The tool used in this example is Loyaltylion, therefore the initial steps will be carred out on their platform. The integration will be carried out using an SDK and Javascript, and we will use Loyaltylion's documentation as a point of reference.

Step 1

Step 2

Follow the steps to create a site. Make sure to select 'Custom' as your site's type.

Step 3

Complete the set up process, inserting the necessary information until you reach your Dashboard.

Step 4

Obtain the Token and Secret Parameters necessary to initialize the SDK within your Developer Page. The paremeters can be viewed by going to Manage > Settings > Token and Secret section.

Step 5

Now that we have all of the necessary data, we can set up our Developer Page by following the Loyaltylion developer guide.

Insert the SDK a bit before the ending of the tag </head>
Inside of the tag <body> insert the HTML code:

1 <div class="title-container"> 
2     <h1>Customer's Points </h1>
3  </div>
4  <div class="content content-fixed @yield('content-classes')">    
5 
6      <div class="container pd-x-0 pd-lg-x-10 pd-xl-x-0" style="margin-top:-4rem;">
7         <!-- Customer's total (approved + pending) points -->
8         <div class="badge badge-grey">
9         <label>Total</label>
10        <p>Customer's total (approved + pending) points</p>
11        <span data-lion-points></span>
12      </div>
13
14        <!-- Customer's approved (redeemable) points -->
15        <div class="badge badge-green">
16            <label>Approved</label>
17            <p>Customer's approved (redeemable) points</p>
18            <span data-lion-points="approved"></span>
19        </div>
20
21        <!-- Customer's pending points -->
22        <div class="badge badge-yellow">
23            <label>Pending</label>
24            <p>Customer's pending points</p>
25            <span data-lion-points="pending"></span>
26        </div>
27
28         <!-- Customer's spent points -->
29          <div class="badge badge-red">
30            <label>Spent</label>
31            <p>Customer's pending points</p>
32            <span data-lion-points="spent"></span>
33          </div>
34          
35          <!-- Customer's lifetime (approved + pending + spent + expired) points -->
36        <div class="badge badge-purple">
37            <label>Lifetime</label>
38            <p>Customer's lifetime (approved + pending + spent + expired) points</p>
39            <span data-lion-points="lifetime"></span>
40        </div>
41        
42        <!-- Customer's total (approved + pending) points
43             plus points they will earn in the current cart
44             for merchants using instant points -->
45        <div class="badge badge-blue">
46            <label>Cart</label>
47            <p>Customer's total (approved + pending) points
48                plus points they will earn in the current cart
49                for merchants using instant points</p>
50            <span data-lion-points="cart"></span>
51            </div>
52         </div>
53     </div>

Step 6:

In the script section, we can insert the following before the closing of the tag </body>


1 <script>
2   $(document).ready(function () {
3        // init function for loyaltylion
4        loyaltylion.init({
5            token: 'your_beautiful_token',
6        })
7
8        // declere variable for query string
9        const queryString = window.location.search;
10
11        // Creating a URLSearchParams object from the query string
12        const urlParams = new URLSearchParams(queryString);
13
14        const date = new Date().toISOString(); // get the date in ISO 8601 format
15        const secret = 'your_beautiful_secret'; // secret for the hash
16        const id = urlParams.get("id"); // get the id from the query string
17        const email = urlParams.get("email"); // get the email from the query string
18
19        let strUser = urlParams.get("name") && urlParams.get("surname") ? urlParams.get("name") + ' ' + urlParams.get("surname") : 'Guest'; // get the name and surname from the query string
20        $('.title-container h1').html('Welcome ' + strUser + '!'); // set the title
21
22        const dataToHash = id + date + email + secret; // data to hash
23        const auth_token = CryptoJS.SHA1(dataToHash).toString(); // hash the data
24
25        // authenticate the customer
26        loyaltylion.authenticateCustomer({
27            customer: {
28                id: id, // unique customer ID
29                email: email, // customer email address
30            },
31            auth: {
32                date: date, // ISO 8601 timestamp, must be same as that used to create the token
33                token: auth_token, // token, generated server-side
34            },
35        })
36    })
37 </script>

Step 7:

After publishing the page on your domain, you can now create the Developer Page on your Shoppy Pages, as indicated in the beginning of this guide. By inserting the id, name, surname, and email as dynamic values, you will be able to use them within the Javascript code in point 5.

Step 8:

Make sure to save the modifications you've made!

Step 9:

Insert the Developer page inside the navigation bar by going to App Builder > Navigation on your Shoppy Dashboard:

Step 10:

Add or modify a section from the bottom bar:

Step 11:

You can name your page as you wish. In this case, we will name it Loyaltylion Points.

And there you have it, you've set up your Developer Page! Now you can see your results from your app by going to your app and navigating to the Developer Page.

The Developer Pages offered by Shoppy stand out for their incredible flexibility and adaptability, allowing develoeprs to use a wide range of technologies and programming languages for their creation. Whether you prefer PHP, Vue.js, HTML or any other language, the open structure of Developer Pages allows you to express your creativity without limits. The key to this versatility lies in the way parameters are passed, which occurs intuitively and dynamically via URLS.

Developer pages give developers the ability to leverage their skills and preferences to create highly personalized pages, offering a unique and engaging experience to their shoppers.

PreviousActions NextHow to launch your app

Last updated 10 months ago

1 <div class="title-container"> 2 <h1>Customer's Points </h1> 3 </div> 4 <div class="content content-fixed @yield('content-classes')"> 5 6 <div class="container pd-x-0 pd-lg-x-10 pd-xl-x-0" style="margin-top:-4rem;"> 7  8 <div class="badge badge-grey"> 9 <label>Total</label> 10 <p>Customer's total (approved + pending) points</p> 11 <span data-lion-points></span> 12 </div> 13 14  15 <div class="badge badge-green"> 16 <label>Approved</label> 17 <p>Customer's approved (redeemable) points</p> 18 <span data-lion-points="approved"></span> 19 </div> 20 21  22 <div class="badge badge-yellow"> 23 <label>Pending</label> 24 <p>Customer's pending points</p> 25 <span data-lion-points="pending"></span> 26 </div> 27 28  29 <div class="badge badge-red"> 30 <label>Spent</label> 31 <p>Customer's pending points</p> 32 <span data-lion-points="spent"></span> 33 </div> 34 35  36 <div class="badge badge-purple"> 37 <label>Lifetime</label> 38 <p>Customer's lifetime (approved + pending + spent + expired) points</p> 39 <span data-lion-points="lifetime"></span> 40 </div> 41 42  45 <div class="badge badge-blue"> 46 <label>Cart</label> 47 <p>Customer's total (approved + pending) points 48 plus points they will earn in the current cart 49 for merchants using instant points</p> 50 <span data-lion-points="cart"></span> 51 </div> 52 </div> 53 </div>

1 <script> 2 $(document).ready(function () { 3 // init function for loyaltylion 4 loyaltylion.init({ 5 token: 'your_beautiful_token', 6 }) 7 8 // declere variable for query string 9 const queryString = window.location.search; 10 11 // Creating a URLSearchParams object from the query string 12 const urlParams = new URLSearchParams(queryString); 13 14 const date = new Date().toISOString(); // get the date in ISO 8601 format 15 const secret = 'your_beautiful_secret'; // secret for the hash 16 const id = urlParams.get("id"); // get the id from the query string 17 const email = urlParams.get("email"); // get the email from the query string 18 19 let strUser = urlParams.get("name") && urlParams.get("surname") ? urlParams.get("name") + ' ' + urlParams.get("surname") : 'Guest'; // get the name and surname from the query string 20 $('.title-container h1').html('Welcome ' + strUser + '!'); // set the title 21 22 const dataToHash = id + date + email + secret; // data to hash 23 const auth_token = CryptoJS.SHA1(dataToHash).toString(); // hash the data 24 25 // authenticate the customer 26 loyaltylion.authenticateCustomer({ 27 customer: { 28 id: id, // unique customer ID 29 email: email, // customer email address 30 }, 31 auth: { 32 date: date, // ISO 8601 timestamp, must be same as that used to create the token 33 token: auth_token, // token, generated server-side 34 }, 35 }) 36 }) 37 </script>