Advanced embed options

By default, when you use the VideoAsk embed code it loads the widget automatically based on the options specified on window.VIDEOASK_EMBED_CONFIG.

However, there are some situations where you might want to load the widget dynamically using javascript, such as:

  • Load the videoask after a certain user action (ie click a button)
  • Load a specific videoask depending on the browser language
  • Show the videoask modal instead of the widget
  • Display multiple widgets

Using the embed code dynamically with javascript

To start, first you'll need to load our embed code using the following:

<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. 

Example: Modal Window Load - See the code

Modal_Window.gif

Example: Widget with Full Screen Modal Window - See the code

Widget_with_full_screen_Modal.gif

Alternatives

Config

property type required description
url string true The URL of the videoask you want to load
options object false  Format and styling choices

 

Options

Within the VideoAsk app there are a limited number of widget styling choices for size, shape, and position that may be previewed and selected.

The following options are not offered in the widget builder, but may be used for additional customization: 

property type required description
widgetType
string false Widget size and shape, choose one of the following types:
VideoThumbnailLarge, VideoThumbnailExtraLarge, VideoThumbnailJumbo, VideoThumbnailWindow, VideoThumbnailWindowSquare, VideoThumbnailWindowTall, VideoThumbnailSmall
text
string false The text overlay on the widget
backgroundColor
string false  The color of the widget border
position
string  false Widget position, choose one of the following: top-left, top-right, bottom-left, bottom-right  
modalType
string  false  possible values are Side and Fullscreen

 

Example: Load Two Widgets, One Circular, One Square - See the code

Two_Widgets.gif

Callbacks

Callbacks can be used to communicate within the browser based on user behavior. They allow the following options:

property type required description
onLoadModal
function false Called when when 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

 

Example: Click Button or Link to See Modal Videoask - See the code

Click_Link_to_See_Modal.gif

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.

Videoasks use 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_, but that might also include extra properties depending on the event type.

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 goodbye 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 just 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: https://glitch.com/~videoask-embed-message

Code Snippet Library

Recommended full page embed

Don't display widget for people who have already dismissed it

Modal window on load (instead of widget)

Widget with fullscreen modal

Load widget by browser language

Two widgets 

Jumbo widget

Delay widget popup

Click button to display videoask

Embed with rounded corners

Close widget when used with load embed

Display widget on every page except this one (and demo)

Hide widget on mobile

Can't find what you're looking for?