How to add a TrustBox with Vue

Adding a TrustBox in a Single Page Application requires a little extra work due to how our widgets are loaded. Our official support articles cover how to add TrustBoxes with vanilla JavaScript, React, and Angular here.

To add the TrustBox in Vue, it's a very similar approach. Here's one way that you should do the trick for you:

1. Add the TrustBox Script code into your index.html file:

<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->

2. Create a component for rendering the TrustBox widget. In this example, we'll call it TrustBox.Vue.

<template>
<!-- TrustBox widget -->
  <div
    ref="trustbox"
    class="trustpilot-widget"
    data-locale="en-US"
  data-template-id="xxxxxxxxxxxxxxxxxxxxxxxx"
  data-businessunit-id="xxxxxxxxxxxxxxxxxxxxxxxx"
    data-style-height="28px"
    data-style-width="100%"
    data-theme="light"
  >
    <a
    href="https://www.trustpilot.com/review/example.com"
      target="_blank"
      rel="noopener"
      >Trustpilot</a
    >
  </div>
  <!-- End TrustBox widget -->
</template>

<script>
export default {
  mounted() {
    const trustbox = this.$refs.trustbox;
    if (window.Trustpilot) {
      window.Trustpilot.loadFromElement(trustbox);
    }
  },
};
</script>

3. Now you'll be able to import this component wherever you would like to load the widget in your app.

 

Was this post helpful?

0 comments

Sort by
Please sign in to leave a comment.