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 YOUR_EMBED_URL in the embed code
In the embed code part, check the <iframe> tag, and find the data-src parameter
<iframe src="" id="testimonialto-flurly-demo-light" data-src="https://embed.testimonial.to/w/flurly-demo?theme=light&card=base" frameborder="0" scrolling="no" width="100%"></iframe>
Copy the string in the data-src parameter, in the sample case, you just need to copy
https://embed.testimonial.to/w/flurly-demo?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 💬