Overlay

Virool provides a new embed method that allows you to show a widget as a modal window. This is very useful for bringing a visitor's focus to a widget. In this case, a visitor must either watch the video or skip it.

Usage

All you have to do is include our modal widget library on your page:

<script src="//widget-assets.virool.com/assets/widget.overlay.js" type="text/javascript"></script>

You can display it with one line of Javascript code:

ViroolWidgetModal.open(widgetURL[, modalOptions])

Parameters

Param Type Details
widgetUrl String Virool widget URL
modalOptions(optional) Object Modal window options object.

Modal window options

Param Type Details
headerText String Text above the widget. (default: ‘Please support this site by watching this video’)
closeText String Close link text. (default: ‘Skip Ad’)
timerText String Countdown text. [COUNT] is a placeholder which will be replaced with seconds. (default: ‘Return to site in [COUNT] sec’)
closeAfter Number This parameter refers to the number of seconds before the widget window will close. Passing 0 as a value will disable the countdown. (default: 60)
width Number Widget width in pixels. (default: 640)
height Number Widget height in pixels. (default: 400)
onOpen Function Modal overlay open callback function.
onClose Function Modal overlay close callback function.

Examples

Basic usage

<script src="//widget-assets.virool.com/assets/widget.overlay.js" type="text/javascript"></script>
<script type="text/javascript">
  ViroolWidgetModal.open('//api.virool.com/widgets/44fe67fc88e40f70070214a0f256f551/18526');
</script>

With customized texts

<script src="//widget-assets.virool.com/assets/widget.overlay.js" type="text/javascript"></script>
<script type="text/javascript">
  ViroolWidgetModal.open('//api.virool.com/widgets/44fe67fc88e40f70070214a0f256f551/18526', {
    headerText: "Watch this video to proceed",
    timerText: "Close after [COUNT] seconds",
    closeText: "Close"
  });
</script>

Without countdown timer

<script src="//widget-assets.virool.com/assets/widget.overlay.js" type="text/javascript"></script>
<script type="text/javascript">
  ViroolWidgetModal.open('//api.virool.com/widgets/44fe67fc88e40f70070214a0f256f551/18526', {
    closeAfter: 0
  });
</script>

Custom widget size

<script src="//widget-assets.virool.com/assets/widget.overlay.js" type="text/javascript"></script>
<script type="text/javascript">
  ViroolWidgetModal.open('//api.virool.com/widgets/44fe67fc88e40f70070214a0f256f551/18526', {
    width: 540,
    height: 360
  });
</script>

With callback functions

<script src="//widget-assets.virool.com/assets/widget.overlay.js" type="text/javascript"></script>
<script type="text/javascript">
  ViroolWidgetModal.open('//api.virool.com/widgets/44fe67fc88e40f70070214a0f256f551/18526', {
    onOpen: function () { alert("Overlay opened"); },
    onClose: function () { alert("Overlay closed"); }
  });
</script>