Embed the User Dashboard on your website

The default implementation renders the loyalty dashboard as a pop-up on your website. If you want to embed the dashboard on any of your pages instead, follow the instructions in this document.

Even when you embed the dashboard on one page, you can still use the pop-up dashboard on other pages of your site. However, on one page, you can have either the embedded dashboard or the pop-up, not both.

Step 1: Go to your Zinrelo admin account >> Design Tab >> User Dashboard >> Select a theme and click on edit.

Click on Embed Dashboard and provide a part of the page URL where you want to embed the dashboard. Wherever Zinrelo comes across that string in the URL, the system will know that the dashboard is expected to be embedded on the page and not served as a pop-up.

Step 2:

Paste this div on your webpage on your website where you want the Embed Dashboard to appear.

Note: You can customize the id name 'zrl_embed_div' in the Zinrelo Admin console as shown in step 1.

Step 3:

Assign the height and width to this div using an inline or external CSS stylesheet. The recommended size is -Desktop: 552(w) x 625(h), Mobile: 280(w) x 625(h). If you wish to use different dimensions for the dashboard, please check the alignment of the dashboard elements. You may need to customize the dashboard CSS to align the user details, earning opportunities, and rewards.

• Inline CSS style: Use the HTML "style" attribute. The following is an example of how the inline style can be used.

<div id="zrl_embed_div" style="width:552px;height:625px;margin-left:auto;margin-right:auto"></div>

Note: When you use inline CSS, you need to make sure to change the height and width of this div to 280px/625px for mobile devices using some javascript code. If you want to avoid the javascript changes then use External CSS.)

External CSS stylesheet:

Add below-mentioned changes to the desktop specific .css file of the webpage on your website:

#zrl_embed_div{

 height:625px;

 width:552px;

 margin-left: auto;
  
 margin-right: auto; 
}

Add below-mentioned changes to your mobile-specific .css file of the webpage on your website:

#zrl_embed_div{

 height:625px;

 width:280px;

 margin-left: auto;
  
 margin-right: auto;  
}

If the CSS file of your webpage is common for desktop and mobile then put the following CSS code in the file.

#zrl_embed_div{

 height:625px;

 width:552px;

 margin-left: auto;
  
 margin-right: auto; 
}


@media screen and (max-width: 450px){

 #zrl_embed_div{

 height:625px;

 width:280px;

 margin-left: auto;
  
 margin-right: auto; 
 }

 }

📘

Please Note:

The height and width mentioned in CSS are suggestive. It is highly recommended to adjust the height and width in accordance with the resolution of the device. Additionally, ensure thorough testing before publishing.