How to pin a TrustBox widget to your header

Using a TrustBox widget on your site can be an impactful trust signal for any prospective customers viewing your website. However, it's easy for people to scroll past the widget and lose sight of this social proof. Fortunately, with a little CSS you can ensure that this widget sticks to the top of your page as people scroll up and down.

To get this implemented, you can start by adding an extra <div> around your TrustBox code and give that a class of something like trustpilot-widget-container.

<div class="trustpilot-widget-container">
👉Your TrustBox widget code here👈
</div>

Next, here is some basic CSS to help pin this to the top of your page:

.trustpilot-widget-container {
  position: sticky;
  top: 0;
  background-color: white;
  padding: 1rem 0;
}

 

If you would like to inline the CSS directly in the <div>, here is another sample that you can use:

<div class="trustpilot-widget-container" style="position: sticky; top: 0; background-color: white; padding: 1rem 0;">
👉Your TrustBox widget code here👈
</div>

Was this post helpful?

0 comments

Sort by
Please sign in to leave a comment.