Experiencing problems? Try these troubleshooting steps.

Embed a videoask on your Wix site

Add a widget or embed videoasks in any page on your Wix site. Visitors will be able to view and respond to your videoasks directly on your site without having to leave the page.

By default, embedding on a Wix site creates an iframe around your videoask that prevents Wix from accessing the camera and microphone permissions. This means that respondents viewing your embedded videoask are redirected to a new tab or browser to respond.

However, by adding a little extra code, you can make sure your videoask opens within your Wix page, so you don’t have to worry about diverting traffic away from your site! Read on for a step-by-step guide on how to embed on Wix, or take a peek in our VideoAsk Community for a video walk-through.

In the following steps, you’ll learn how to:

  • Embed your videoask.
  • Add custom code to grant permissions.

⚠️ Important: To add the custom code to your site, you'll need a paid Wix account.

You can embed an iframe with a free Wix account but you won't be able to add the custom code. Respondents will see a single reply button and when clicked, they'll be redirected to a new tab or browser to respond.

Jump to:

Embed an iframe

Embed a widget

Embed an iframe

1

From your VideoAsk account, select the videoask you’d like to embed as an iframe and click the Share & Embed icon.

wix01.png

2

Click the Embed tab for the iframe embed code.

wix02.png

3

Click Copy code. 

wix03.png

4

Head over to your Wix account and click the + icon in the website editor.

wix03.png

5

Select Embed.

wix04.png

6

Select Embed a site.

wix05.png

7

Drag and drop the iframe where you’d like your embed on your site.

wix06.gif

8

Click Enter Website Address.

wix07.png

9

Select Code.

wix09.png

Note: You can also embed an iframe with the videoask URL by selecting Website Address.

When you embed with the videoask URL instead of the embed code, you'll see an iframe with square corners instead of rounded corners. 

10

Paste the iframe embed code you've copied from step 3 in the Add your code here (HTTPS only): field.

wix10.png

11

Click Update and then Publish to make your changes live on your site.

wix10.png

12

Your videoask is now embedded on your site. Currently, it only has the single reply button (as shown in the image below). When respondents click Reply, they’ll be redirected to a new tab or browser to respond to your videoask.

However, you can add some custom code to make sure your videoask displays the answer prompts on your embedded videoask. This will allow respondents to interact with your videoask directly on the page. 

wix11a.png

Go back to your main Dashboard in your Wix account and click Settings.

wix11b.png

13

Scroll down to the Advanced section and click Custom code.

wix12.png

14

Click + Add Custom Code.

wix13.png

15

Copy the code below and paste it in the Paste the code snippet here field. This code will allow Wix to view the camera and microphone permissions needed for your respondents to interact with your videoask directly on your site.

<script>
function addPermissions (iframe) {
const ALLOW_PERMISSIONS = 'camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;'
if (iframe.allow === ALLOW_PERMISSIONS) {
return
}
iframe.setAttribute('allow', ALLOW_PERMISSIONS)
iframe.allow = ALLOW_PERMISSIONS
iframe.src = iframe.src
}
document.querySelectorAll('iframe').forEach(addPermissions)
const observer = new MutationObserver(function (mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.addedNodes && mutation.addedNodes.length) {
for (let node of mutation.addedNodes) {
if (node.querySelectorAll) {
node.querySelectorAll('iframe').forEach(addPermissions)
}
}
}
}
})
observer.observe(document.body, { attributes: false, childList: true, subtree: true })
</script>

wix14.png

16

Enter a Name for the code. Then select All pages and Body - end for which pages and where to add the custom code.

wix15.png

17

Then click Apply and you’re all set! Respondents can now view and interact with your videoask directly on your site.

wix16.png

Embed a widget

Note: A paid Wix account is needed to embed a widget.

1

From your VideoAsk account, select the videoask you’d like to embed as a widget and click the Share & Embed icon.

wix01.png

2

Click Widget.

wix18.png

3

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

wix19.png

4

Click Copy code.

wix20.png

5

Head over to your Wix Dashboard and click Settings.

wix22.png

6

Scroll down to the Advanced section and click Custom code.

wix23.png

7

Click + Add Custom Code.

wix24.png

8

Paste the widget code you've copied from step 4 in the Paste the code snippet here field. 

wix25.png

9

Next, copy the code below and paste it after the widget code in the Paste the code snippet here field. This code will allow Wix to view the camera and microphone permissions needed for your respondents to interact with your videoask directly on your site. 

<script>
let widget = null;
function handlePageView() {
if (window.videoask_pages.indexOf(window.location.pathname) !== -1) {
if (widget) return;
window.videoask.loadEmbed(window.videoask_config).then(function (el) {
widget = el;
});
} else if (widget && document.body && document.body.contains(widget)) {
document.body.removeChild(widget);
widget = null;
}
}
function locationChecker() {
var previousPathname = window.location.pathname;
setInterval(function () {
if (previousPathname !== window.location.pathname) {
previousPathname = window.location.pathname;
handlePageView();
}
}, 500);
}
handlePageView();
locationChecker();
</script>

wix26.gif

10

Enter a Name for the code. Then select which pages you'd like to embed your widget on and select Body-end for where to place the code in.

wix27.png

11

Then click Apply and you're all set! Respondents can now view and interact with your widget directly on your site.

wix28.png

Curious about what the embeds will look like? Check out our examples embedded on a Wix site and interact with the videoasks. 

 

Can't find what you're looking for?