Anchor Links between Two TrustBoxes
Note: TrustBoxes are Trustpilot's widgets for review display onsite.
This demo is intended for customers that want to display two versions of our TrustBoxes - where clicking on one version automatically scrolls to the location of the second.
- The most common scenario may be taking one of our small horizontal widgets usually placed at the header or footer of a website.
When the widget above is clicked on, it automatically scrolls you to a more comprehensive version, like our popular carousel.
Below, I demonstrate how we can use anchor links with HTML + CSS to easily set this up. || DEMO: CLICK HERE
CSS:
CSS:
a {
opacity: 0;
}
.trustpilot-noclick {
pointer-events: none;
cursor: default;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
</head>
<body>
<a href="#anchor-name">
<p style="text-align: center; opacity: 0; font-size: 20px; margin-bottom: 0px;">CLICK HERE
<div class="trustpilot-noclick">
<!-- TrustBox widget - Micro Star -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="5419b732fbfb950b10de65e5" data-businessunit-id="556727b40000ff00057fbace" data-style-height="24px" data-style-width="100%" data-theme="light">
<a href="https://www.trustpilot.com/review/rocketmiles.com" target="_blank" rel="noopener">Trustpilot</a></div>
<!-- End TrustBox widget -->
</div></p></a>
<p style="width: 200px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A cras semper auctor neque vitae tempus quam. Netus et malesuada fames ac turpis. Elementum nibh tellus molestie nunc non blandit massa enim nec. Feugiat sed
lectus vestibulum mattis ullamcorper velit. Nunc sed id semper risus in hendrerit gravida rutrum. Leo vel orci porta non pulvinar neque. Et pharetra pharetra massa massa. Facilisis gravida neque convallis a cras semper auctor. Cursus mattis molestie a iaculis at erat pellentesque
adipiscing. Cras adipiscing enim eu turpis egestas. Sed turpis tincidunt id aliquet risus.
Tellus molestie nunc non blandit massa enim nec dui nunc. Non arcu risus quis varius quam quisque id diam. Massa sed elementum tempus egestas. At volutpat diam ut venenatis tellus in. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Velit euismod in pellentesque
massa placerat duis ultricies lacus sed. Nibh tortor id aliquet lectus proin nibh nisl condimentum. Aliquam ultrices sagittis orci a. Tristique senectus et netus et. Purus semper eget duis at tellus at urna.
Sit amet nisl purus in mollis. Et pharetra pharetra massa massa ultricies mi quis. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Sagittis eu volutpat odio facilisis mauris sit amet. Est lorem ipsum dolor sit. Vestibulum lorem sed risus ultricies tristique nulla
aliquet enim. Id eu nisl nunc mi ipsum. Mauris vitae ultricies leo integer malesuada nunc. Tortor at risus viverra adipiscing at. Montes nascetur ridiculus mus mauris vitae ultricies leo. Feugiat scelerisque varius morbi enim nunc faucibus. Rutrum tellus pellentesque eu tincidunt
tortor aliquam nulla facilisi. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Sed libero enim sed faucibus. Eu ultrices vitae auctor eu. Dignissim diam quis enim lobortis. Turpis nunc eget lorem dolor sed viverra ipsum. Varius sit amet mattis vulputate enim
nulla. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.
Egestas erat imperdiet sed euismod nisi porta lorem. Nisl suscipit adipiscing bibendum est ultricies. Eget sit amet tellus cras adipiscing enim. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. Tristique senectus et netus et malesuada fames ac. Sit amet aliquam id
diam maecenas ultricies mi. Tempor commodo ullamcorper a lacus vestibulum sed. Ultrices mi tempus imperdiet nulla malesuada. Id diam maecenas ultricies mi eget mauris pharetra et. Elit ut aliquam purus sit. Aliquam ut porttitor leo a. Platea dictumst vestibulum rhoncus est
pellentesque. Sit amet consectetur adipiscing elit ut. Praesent elementum facilisis leo vel fringilla. Ultrices sagittis orci a scelerisque. Mauris a diam maecenas sed enim ut. In nisl nisi scelerisque eu.
Sit amet dictum sit amet justo. A lacus vestibulum sed arcu non. Adipiscing bibendum est ultricies integer quis. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Eget gravida cum sociis natoque penatibus et magnis dis parturient. Netus et malesuada fames ac. Adipiscing
tristique risus nec feugiat in fermentum posuere. Ornare suspendisse sed nisi lacus sed viverra tellus. Lorem donec massa sapien faucibus et. Aliquam nulla facilisi cras fermentum. Porttitor leo a diam sollicitudin. Tristique magna sit amet purus.</p>
<a id="anchor-name">
<!-- TrustBox widget - Carousel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="556727b40000ff00057fbace" data-style-height="130px" data-style-width="100%" data-theme="light" data-review-languages="en">
<a href="https://www.trustpilot.com/review/rocketmiles.com" target="_blank" rel="noopener">Trustpilot</a>
</div>
<!-- End TrustBox widget --> </a>
</body>
</html>
DONE!
0 comments
Sort by