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 >> Embed Dashboard. Select 'Yes' to 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 web page where you want Embed Dashboard to appear.

<div id ="zrl_embed_div"></div>

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 inline or external CSS stylesheet.

  • 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"></div>

Note: When you use inline CSS, you need to make sure to change the height and width of this div to 360px/600px 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 webpage:

#zrl_embed_div{

height:625px;

width:552px;

}

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

#zrl_embed_div{

height:600px;

width:360px;

}

If 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;

}

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

#zrl_embed_div{

height:600px;

width:350px;

}

}

Did this answer your question?