Experiencing problems? Try these troubleshooting steps.

Embed a clickable GIF that opens your video testimonial

Have you collected some awesome video testimonials and now you want to embed those reviews in your website? With our widget carousel embed code, you can add the video testimonials youā€™ve collected through VideoAsk on your website and share them with the world!

When you use our widget carousel embed code, itā€™ll embed a circular animated GIF of your video testimonial that, when clicked, opens the video modal and automatically plays. How cool is that?

animated_gif01.gif

The widget carousel embed code snippet contains placeholder videos/animated GIFs that youā€™ll need to replace with your own. Read on to learn how to create the animated GIF and swap out the videos with your testimonials.

Looking for another embed style? Try this code for rectangle-shaped embeds.

Check out this Community post šŸ—£ for a video walkthrough of embedding a clickable GIF for testimonials.

Jump to:

Replace animated GIF in embed code

Replace testimonial video in embed code

Replace animated GIF in embed code

In our example below, weā€™ve collected video testimonials for our pet-sitting services and would like potential customers to see our amazing reviews on our website! Weā€™ll walk you through how to edit the widget carousel directly in the code snippet, then youā€™ll be able to copy and paste the code into your website. Sound good? Letā€™s get to it.

šŸ’” Tip: To make editing the code a little easier on the eyes, you can adjust the borders around the code to widen it.

animated_gif02.gif

1

Start by opening the widget carousel code snippet. This is where youā€™ll make your edits to the embed code.

animated_gif03.png

āš ļø Important: Any edits you make to the code snippet wonā€™t be saved so make sure you paste them onto your site before leaving the page.

2

Head over to your VideoAsk account. From your videoask inbox, select the response youā€™d like to embed.

animated_gif04.png

3

Click on the Share icon.

animated_gif05.png

4

Toggle Share individual answer on. This will make the video public for anyone to view on your website.

animated_gif06.png

5

Click the Share individual answer link. This will open the response in a new browser tab.

animated_gif07.png

6

In the new browser tab that opened, right-click on the video and select Open Video in New Tab.

animated_gif08.png

7

In the URL of the new tab youā€™ve just opened, copy the video ID (numbers and letters) between transcoded and video.mp4.

animated_gif09.png

8

Head back to the code snippet. Replace the video ID in the embed code with the video ID youā€™ve copied from step 7 as shown in the image below.

animated_gif10.png

9

VoilĆ ! Youā€™ll now see an animated GIF of your video testimonial displayed in the code snippet. Follow the instructions in the next section to learn how to replace the placeholder video with your own.

animated_gif11.png

Replace testimonial video in embed code

After youā€™ve replaced the animated GIF with your own, youā€™ll need to swap out the placeholder video behind the animated GIF for your video. Follow the instructions below to learn how.

1

In your VideoAsk account, click the Share icon on the video testimonial.

animated_gif12.png

2

Click Copy to copy the Share individual answer URL. Make sure to toggle the Share individual answer on.

animated_gif13.png

3

Head back over to the code snippet and paste the URL, as shown in the image below. This will replace the placeholder video with your own.

animated_gif14.png

Your video testimonial will now play when you click on the animated GIF. Repeat the steps from both sections above to replace the other placeholder videos/animated GIFs in the code snippet. Donā€™t forget, you can also edit the text below each animated GIF (shown below).

animated_gif15.png

Once youā€™ve replaced all the videos/animated GIFs in the code snippet and are happy with how it looks, copy and paste the HTML and CSS into your website.

animiated_gif16.png

Note: Weā€™re unable to provide support for custom HTML or custom CSS. If you're unsure how to customize your code for your site needs, you may want to ask a tech-savvy friend or colleague.

Looking to share your testimonials within a single iframe instead? Explore our embedding your inbox option.

Can't find what you're looking for?