Skip to main content
All CollectionsOn Site Displays
Add Rewards Widget On Custom Website
Add Rewards Widget On Custom Website

In this article we learn how to add the rewards widget on a custom website

Updated over a week ago

For the widget to be shown on your website, make sure Nector is enabled (in the Account Settings page) and the loyalty program is also active.

Follow the below steps to add the rewards widget to your custom website.

1. Getting the code snippet on nector dashboard

  • Login to your nector dashboard.

  • Go the Rewards Widget page under On-Site Displays.

  • 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. Adding the code snippet

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 add the copied code snippet in a common container file just before the closing body tag of the webpage.

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="widget" data-api_key="ak_9e91ee28c3865e6997683949dc7c53f83462863bb86e94078f1d1513a4157f62" 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.

Did this answer your question?