How to embed your Wall of Love in Vue or Nuxt

We are going to use the iframe-resizer library. You can install it via the npm command:

npm i iframe-resizer –save

Then I made a plugin with the following code:

import Vue from 'vue'
import iframeResize from 'iframe-resizer/js/iframeResizer';

Vue.directive('resize', {
  bind: function(el, { value = {} }) {
    el.addEventListener('load', () => iframeResize(value, el))
  },
  unbind: function (el) {
    el.iFrameResizer.removeListeners();
  }
})

And added it as a plugin to my config file:

{ src: '~/plugins/iframe-resize', mode: 'client' }

Finally, I added it to a page like this:

<iframe
  v-resize="{ log: true }"
  width="100%"
  src="YOUR_EMBED_URL"
  frameborder="0"
></iframe>

You will find the SRC link in the embed code. Please click the Wall of Love in the Embed widgets, select the desired layout, then copy the code.

In the embed code part, check the <iframe> tag, and find the data-src parameter
<script type="text/javascript" src="https://testimonial.to/js/iframeResizer.min.js"></script>

<iframe id="testimonialto-wall-of-love-for-testimonial-light" src="https://embed-v2.testimonial.to/w/wall-of-love-for-testimonial?theme=light&card=base" frameborder="0" scrolling="no" width="100%"></iframe> <script type="text/javascript">iFrameResize({log: false, checkOrigin: false}, "#testimonialto-wall-of-love-for-testimonial-light");</script>

Copy the string in the data-src parameter. In the sample case, you just need to copy

https://embed-v2.testimonial.to/w/wall-of-love-for-testimonial?theme=light&card=base

Replace YOUR_EMBED_URL_HERE with the src URL you copied from Testimonial.

Need help? Use the live chat at testimonial.to or email [email protected].

Next steps: