Add Rewards Page On Custom Website
A dedicated rewards page helps in promoting your loyalty program. Inorder to add a dedicated Rewards Page to your custom website follow the below steps:
For the rewards page to be shown on your website, make sure Nector is enabled (in the Account Settings page) and the loyalty program is also active.
Login to your nector dashboard.
Go the Rewards Page under On-Site Displays in Loyalty Program.
Switch to the Code Snippet tab.
Scroll to the Custom Website section.
Copy the code by clicking on the copy button. See below image for reference.
Exact instructions for this step varies based on the technologies used for building your custom website. But the working principle remains the same. You will have to create a new page on your custom website and insert the code snippet.
The code snippet is static for the most part except the customer_id which must be passed in when the customer logs into the website.
If you have built your custom website with php or a similar server rendered webpage, then you need to insert the customer_id in the code snippet at render time.
An example when php is used:
If you have built a client side rendered webpage using technologies like React, Vue, etc. then the above code snippet must be added dynamically on the frontend with Javascript.
Assuming that you are making an API call to your backend to get the customer details which includes the customer id, you can add the above code snippet using Javascript after the API call is done.
Customizing the Rewards Page
For the rewards page to be shown on your website, make sure Nector is enabled (in the Account Settings page) and the loyalty program is also active.
1. Getting the code snippet on nector dashboard
Login to your nector dashboard.
Go the Rewards Page under On-Site Displays in Loyalty Program.
Switch to the Code Snippet tab.
Scroll to the Custom Website section.
Copy the code by clicking on the copy button. See below image for reference.
2. Creating the page
Exact instructions for this step varies based on the technologies used for building your custom website. But the working principle remains the same. You will have to create a new page on your custom website and insert the code snippet.
The code snippet is static for the most part except the customer_id which must be passed in when the customer logs into the website.
When using server side rendering
If you have built your custom website with php or a similar server rendered webpage, then you need to insert the customer_id in the code snippet at render time.
An example when php is used:
<script>var nector_params = { customer_id: "<?php echo $is_customer_logged_in ? customer_id : "" ?>" }</script>
<script async src="https://cdn.nector.io/nector-static/no-cache/reward-widget/mainloader.min.js" data-op="reward" data-api_key="abcd" data-platform="custom_website" ></script>When using client side rendering
If you have built a client side rendered webpage using technologies like React, Vue, etc. then the above code snippet must be added dynamically on the frontend with Javascript.
Assuming that you are making an API call to your backend to get the customer details which includes the customer id, you can add the above code snippet using Javascript after the API call is done.
Related Articles
Customizing the Rewards Page
Updated on: 28/03/2024