ePrivacy and GPDR Cookie Consent by Cookie Consent Skip to main content

Web banners: use cases library (HTML for recommended product)


To work with web banners, first, they need to be set by the Meiro team:

1. Meiro Events must be implemented. 

2. Meiro Events API connection must be set in the Administration/ Settings tab.

3. Web banners tabs must be enabled by the administrator for your user role

4. For embedded web banners it is required to place a DOM element with a unique ID in the HTML code of the website where the banner will be displayed.


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
body {
margin: 0;
font-family: sans-serif;
color: #222222;

.banner {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
width: 100%;
cursor: pointer;
border-radius: 8px;
padding: 15px;
border: 1px solid #777777;
background-color: white;

.text-container {
align-self: stretch;

.text-container h1 {
margin: 0;
font-size: 20px;
font-weight: 600;

.text-container p {
margin-top: 5px;

#product-thumbnail {
width: 100px;
margin: 10px;
border-radius: 4px;

#product-name {
font-size: 12px;
font-weight: 500;

#product-price {
font-size: 14px;
font-weight: 600;

.cta-button {
height: 40px;
border-radius: 20px;
cursor: pointer;
border: none;
margin-top: 10px;
padding: 0 20px;
background-color: #fe7f66;
color: white;
font-size: 14px;
font-weight: 600;
transition: all 0.15s ease;

.cta-button:hover {
background-color: #eb6c52;
<div class="banner" onclick="goToProduct()">
<div class="text-container">
<h1>You might like</h1>
<p>Customers like you often buy this product</p>
<img id="product-thumbnail" src="" />
<div id="product-name"></div>
<div id="product-price"></div>
<button class="cta-button">View product</button>
var getProductFromResponse = function (response) {
const product = response.data.data.cart.items[0].product
return {
imgSrc: product.thumbnail.url,
name: product.name,
price: product.price,
productUrl: product.url,
var displayPrice = function (price) {
return price + " €"

var productUrl

if (window.parent && window.parent.MeiroEvents) {
var bannerID = window.parent.MeiroEvents.getWebBannerId()
var responses = window.parent.MeiroEvents.getWebBannerHttpResponses(bannerID)
var product = getProductFromResponse(responses[0])

document.getElementById("product-name").textContent = product.name
document.getElementById("product-thumbnail").setAttribute("src", product.imgSrc)
document.getElementById("product-price").textContent = displayPrice(product.price)

productUrl = product.productUrl

function goToProduct() {
if (window.parent && window.parent.MeiroEvents) {