Experiencing problems? Try these troubleshooting steps.

Embed a videoask on your Webflow site

Embed a videoask on your Webflow site, either as a widget or an iframe, so respondents can interact with your videoask and submit responses without leaving your site.

Whether you're capturing leads, matching site visitors to the most relevant products for them, displaying an interactive video FAQ, or simply putting a face to your brand - embedding a videoask on your site gives that extra personal touch and builds your clients' trust quicky.

Embed_a_videoask_on_your_Webflow_site_00.png

⚠️ Important: The Webflow Embed element is only available on paid Webflow plans. As a workaround for users on free Webflow plans, you can add a Video element instead, but there are limitations with this option.

Check out how to add a videoask as a Video element (workaround for users with a free Webflow plan) for more details.

Ok, so let's get going! 

First of all, make sure you've got your videoask set up just the way you want it. If you're new to VideoAsk, check out these handy guides to get started:

Now you have two options: embed your videoask as a widget (so it floats at the bottom of your page and activates when clicked on), or embed it as an iframe (so it sits directly within your page).

Feel free to skip to the section that suits you best.

If you'd like to see a video walkthrough of embedding a videoask on your Webflow site, check out this Community post.

Jump to:

Embed a videoask as a widget on a single page of your site

Embed a videoask as a widget on all pages of your site

Embed a videoask as an iframe

Add a videoask as a Video element (workaround for users with a free Webflow plan)

Embed a videoask as a widget on a single page of your site

In this example, we're going to embed a videoask to capture leads as a widget on our site's homepage.

1

From your VideoAsk account, go to the videoask you'd like to embed and click the Share & Embed icon.

Embed_a_videoask_on_your_Webflow_site_01.png

2

Click Widget.

Embed_a_videoask_on_your_Webflow_site_02.png

3

When you've added a call to action and chosen a style, position, and color, click Get the code.

Embed_a_videoask_on_your_Webflow_site_03.png

4

Click Copy code.

Embed_a_videoask_on_your_Webflow_site_06.png

5

On your Webflow site, hit the + Add Elements button.

Embed_a_videoask_on_your_Webflow_site_04.png

6

Scroll down to the Components section, and drag the Embed icon to the area of your site where you want to display your widget.

Embed_a_videoask_on_your_Webflow_site_05.gif

7

Paste the code you copied from VideoAsk into the code editor box that appears.

Embed_a_videoask_on_your_Webflow_site_07.png

8

Hit Save & Close.

Embed_a_videoask_on_your_Webflow_site_08.png

9

Now, all that's left to do is hit Publish, check everything displays as expected on your site, and wait for the responses to roll in. 🎉

Embed_a_videoask_on_your_Webflow_site_09.gif

Note: You won't be able to see the widget in preview mode. It will only appear on your published site. We recommend checking it's behaving as expected after publishing.

Embed a videoask as a widget on all pages of your site

In this example, we're going to embed a lead-capturing videoask widget across all pages on our site.

1

From your VideoAsk account, go to the videoask you'd like to embed and click the Share & Embed icon.

Embed_a_videoask_on_your_Webflow_site_01.png

2

Click Widget.

Embed_a_videoask_on_your_Webflow_site_02.png

3

When you've added a call to action and chosen a style, position, and color, click Get the code.

Embed_a_videoask_on_your_Webflow_site_03.png

4

Click Copy code.

Embed_a_videoask_on_your_Webflow_site_06.png

5

From your Webflow dashboard click the three dots on the thumbnail of the site where you'd like the widget to appear on all pages.

Embed_a_videoask_on_your_Webflow_site_10.png

6

Choose Settings in the menu that appears.

Embed_a_videoask_on_your_Webflow_site_11.png

7

Click Custom Code.

Embed_a_videoask_on_your_Webflow_site_12.png

8

Paste the code you copied from VideoAsk into the Head Code box.

Embed_a_videoask_on_your_Webflow_site_13.gif

9

Press Save Changes.

2022-03-31_11-15-34.png

10

Now, all that's left to do is hit Publish, check everything displays as expected on your site, and wait for the responses to roll in. 🎉

Embed_a_videoask_on_your_Webflow_site_14.gif

Note: You won't be able to see the widget in preview mode. It will only appear on your published site. We recommend checking it's behaving as expected after publishing.

Embed a videoask as an iframe

In this example, we're going to embed a lead-capturing videoask as an iframe on our site's homepage.

1

From your VideoAsk account, go to the videoask you'd like to embed and click the Share & Embed icon.

Embed_a_videoask_on_your_Webflow_site_01.png

2

Click Embed.

Embed_a_videoask_on_your_Webflow_site_15.png

3

Click Copy code.

Embed_a_videoask_on_your_Webflow_site_16.png

4

Now it's time to head over to your Webflow site builder. Decide where you want to add your videoask, then hit the + Add Elements button.

Embed_a_videoask_on_your_Webflow_site_04.png

5

Scroll down to the Components section, and drag the Embed icon to the area of your site where you want to display your videoask iframe.

Embed_a_videoask_on_your_Webflow_site_15.gif

6

Paste the code you just copied from VideoAsk into the code editor box that appears.

Embed_a_videoask_on_your_Webflow_site_17.png

7

Hit Save & Close.

Embed_a_videoask_on_your_Webflow_site_17.png

Looking good! You should be able to see your videoask iframe preview in the Designer area of your site.

8

Now, all that's left to do is hit Publish and wait for the responses to roll in. 🎉

Embed_a_videoask_on_your_Webflow_site_18.gif

Add a videoask as a Video element (workaround for users with a free Webflow plan)

If you're not signed up to a paid Webflow plan, you can still embed a videoask as an iframe on your site by adding a Video element instead of an Embed element.

It's important to note that if your videoask contains an Open ended answer type, respondents will be redirected to a new tab or browser to respond to your videoask.

This has to do with Webflow being unable to access the camera and microphone permissions with this setup. 

However, if your videoask only contains steps with closed-ended answer types, like multiple-choice or button, respondents will be able to interact with your videoask directly from your site, so this is a great option for Webflow users on a free plan.

Here's how to set this up:

1

From your VideoAsk account, go to the videoask you'd like to embed and click the Share & Embed icon.

Embed_a_videoask_on_your_Webflow_site_01.png

2

Click Copy under Share your URL.

Embed_a_videoask_on_your_Webflow_site_with_video_element_01.png

3

Now it's time to head over to your Webflow site. Decide where you want to add your videoask, then hit the + Add Elements button.

Embed_a_videoask_on_your_Webflow_site_04.png

4

Scroll down to the Media section, and drag and drop the Video element to the area of the site where you'd like your videoask to display.

Embed_a_videoask_on_your_Webflow_site_with_video_element_02.gif

5

Paste the videoask URL into the URL box and hit your enter key.

2022-03-31_14-44-06.png

Looking good! You should be able to see your videoask iframe preview in the Designer area of your site.

6

Now, all that's left to do is hit Publish and wait for the responses to roll in. 🎉

Embed_a_videoask_on_your_Webflow_site_06.gif

For more information on embedding on Webflow, check out the Weflow University.

Can't find what you're looking for?