We are going to use the iframe-resizer library. You can install it via 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 on the Wall of Love from Embed widgets, select the desired layout, and finally 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
Then paste the URL in the iframe src prop.
That's it! 🥳
If you still have a question, please reach out on the live chatbox on the testimonial.to 💬