Advanced embed options – VideoAsk

If you want to share your videoask on a webpage, you can embed it as a widget or within the page as an iframe by using some HTML code. This allows respondents to complete your videoask without leaving your site. You can grab the code directly from your VideoAsk account and paste it into the HTML editor of your page.

If you have some technical skills and want to customize your videoask embed further, this article is for you. Keep reading for some neat ideas, code snippets, and inspiration.

If you're new to embedding, or the only Java you've ever heard of is an island in Indonesia, we recommend checking out these simpler embed guides to get started:

Note: The following code snippets are intended for advanced users with good technical knowledge. We're unable to provide detailed support on how to use them. If you're struggling to get them set up, we recommend asking a developer buddy for a hand.

Using the embed code dynamically with JavaScript

By default, when you use the videoask embed code it loads the widget automatically based on the options specified on window.VIDEOASK_EMBED_CONFIG (the first line in your widget embed code).

However, sometimes you might want to load the widget dynamically using JavaScript. Here are some examples of what you could do:

Load the videoask after a certain user action (like the clicking of a button on your webpage).
Load a specific videoask depending on the browser language.
Show the videoask modal instead of the widget.
Display multiple widgets.

To load the widget dynamically with JavaScript, add the code below to your videoask embed code:

<script type="text/javascript" src="https://www.videoask.com/embed/embed.js"></script>

This will expose two global methods:

Method	Description
`window.videoask.loadEmbed(config, callbacks?)`	This is the default method. It's used to load the widget.
`window.videoask.loadModal(config, callbacks?)`	This is an alternate method that allows you to load the videoask modal window directly without having to show the widget first.

Below you can see an example of a widget that opens into a full-screen modal - Check out the code we used here

Next up is an example of a modal window load - Check out the code we used here

Using callbacks and listening to messages

Callbacks

You can use callbacks within the browser, based on user behavior. They allow the following options:

Property	Type	Required	Description
onLoadModal	function	false	Called when the modal window is opened
onCloseModal	function	false	Called when the modal window is closed
onCloseWidget	function	false	Called when closable widgets (eg VideoThumbnailWindow) are closed
onMessage	function	false	Called each time the videoask sends a message

Below you can see an example of using a callback to allow the clicking of a button or link to open a modal videoask - Check out the code we used here

Listening to messages

Embedded videoasks notify their parent windows of special events during the response flow. As a developer, you can subscribe to these messages to extract information or change the state of your app.

Videoask uses window.postMessage() to post events to the parent window. Our message data payload are JavaScript objects which always include a property named type whose value starts with videoask_. Extra properties might also be included depending on the event type.

Below is a table of different VideoAsk message types:

Type	Description
videoask_contact_created	Videoask loaded and contact was created
videoask_question_presented	A question was presented
videoask_question_submitted	A question's answer was submitted
videoask_contact_updated	The contact details were updated
videoask_submitted	Videoask completed (either the end screen was shown or there was redirection)

If you're using the embed code, you can use the onMessage callback to listen for these messages.

Otherwise, if you're using an iframe, you can use a piece of code like this:

const isVideoaskMessage = message => 
  message.origin === "https://www.videoask.com" &&
  message.data &&
  message.data.type &&
  message.data.type.startsWith("videoask_")

window.addEventListener("message", message => {
  if (!isVideoaskMessage(message)) {
    return
  }

  console.log("got videoask message", message.data)
});

See it in action in this demo.

Editing the z-index of your videoask

The z-index property sets the stack order of different HTML elements that would otherwise overlap on your webpage. The higher the z-index number, the closer to the front of your page the element will appear.

If you want to make sure your widget is positioned "on top" of other elements on your page, you can set the z-index value by adding this line of JavaScript code to the end of your widget embed code:

"widgetZIndex": '100',

An element with a greater number (in this case where we've added 100), is always in front of an element with a lower number.

Code Snippet Library

Below you can find links to some more code examples. You can copy and adapt these code snippets to tailor your videoask embed for your exact use case.

⚠️ Important: When you copy the code, make sure to swap out the example videoask URL with your own videoask URL.