Recommender wrappers

Recommenders will occupy a space on your website which must be prepared upfront. This space is denoted by wrappers - a specifically designated HTML elements in your website structure, which are just placeholders, waiting to be replaced by the real content generated by the recommenders.

These wrappers/placeholders are necessary to maintain a good user experience and avoid shifting contents of the website down, as new content generated by the recommenders appear. It is technically possible to integrate the recommenders even without wrappers, but this leads to "layout shifts". As the recommenders fill the space, the contents of the page move down. These shifts will worsen your Cumulative Layout Shift metric, which is part of Core Web Vitals and impacts your SEO score.

When the placeholders are present on the web, there are no layout shifts, becase the recommenders simply fill in the space previously occupied by the placeholders.

See the video below for a more detailed explanation.

Placeholders

To avoid the negative effects of layout shifts, we will ask you to create the wrapper elements for every recommender that we will be integrating.

The wrappers will be very simple, they will usually require adding a snippet of HTML code and respective CSS rules which indicate that the recommenders are loading.

<div id="lbx-recommender-homepage"></div>

Every wrapper must have a unique id which we can target. It is very important that every wrapper fills in the intended space and has a height set up. See the CSS below for an example.

#lbx-recommender-homepage {
  height: 200px;
}

The element below demonstrates the placeholder with the loading state. The loading state would disappear once the Luigi's Box recommender initializes and takes over.

You can build more complex wrappers by providing a loading state, see the example below for inspiration.

<div class="recommender-loading" id="lbx-recommender-homepage">
 <div class="spinner"></div>
</div>

And the respective CSS.

#lbx-recommender-homepage {
  height: 200px;
}
.recommender-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #bbb;
  background: #eee;
}
.spinner {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.spinner:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #000 transparent #000 transparent;
  animation: spinner 2.2s linear infinite;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Placeholder: