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 in 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 in your Wix site, 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
From your VideoAsk account, select the videoask you’d like to embed as an iframe and click the Share & Embed icon.
Click Embed in a website.
Make sure the dropdown is set to Iframe and click Copy embed code.
Head over to your Wix account and click the + icon in the website editor.
Select Embed.
Select Embed a site.
Drag and drop the iframe where you’d like your embed in your site.
Click Enter Website Address.
Select Code.
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.
Paste the iframe embed code you've copied from step 3 in the Add your code here (HTTPS only): field.
Click Update and then Publish to make your changes live on your site.
Your videoask is now embedded in 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.
Go back to your main Dashboard in your Wix account and click Settings.
Scroll down to the Advanced section and click Custom code.
Click + Add Custom Code.
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>
Enter a Name for the code. Then select All pages and Body - end for which pages and where to add the custom code.
Then click Apply and you’re all set! Respondents can now view and interact with your videoask directly on your site.
Embed a widget
Note: A paid Wix account is needed to embed a widget.
From your VideoAsk account, select the videoask you’d like to embed as a widget and click the Share & Embed icon.
Click Embed in a website.
Choose Widget from the dropdown.
Add any Overlaying text and choose the widget style, color, and position. If you want to allow users to dismiss your widget, toggle on the Make widget dismissable option. Then, click Copy embed code.
Head over to your Wix Dashboard and click Settings.
Scroll down to the Advanced section and click Custom code.
Click + Add Custom Code.
Paste the widget code you've copied from step 4 in the Paste the code snippet here field.
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>
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.
Then click Apply and you're all set! Respondents can now view and interact with your widget directly on your site.