Video widget

This widget provides a secure way to play all videos and live streams that you provided for your customers either for free or against the payment. Video can only be played by logged in users.

Installation

WordPress

When your WordPress plugin is installed, just head to Settings > Zooza and from dropdown of pages, select a page where you want the form to appear.

Shortcodes

You can also use shortcodes to place the form anywhere within the page. More configuration options for shortcodes is described below in their respective sections.

[zooza type="video"]

Wix

In Wix editor, click on Zooza widget. In the Settings panel, enter the api key and as a widget choose Video.

Embed code

Embed this widget with a placeholder element and the Zooza loader. The loader can sit in the <body> right after the placeholder, or in the <head> so the widget starts loading earlier. See Choosing an embed method if you are not sure which one to use.

Placeholder	Description	Example Value
YOUR_API_KEY	Replace with the API key found in the application under Publish > Widget. Appears once, on the placeholder (twice in the legacy script).	abc123xyz
ZOOZA_API_URL	Replace with the Zooza API URL for your region: Europe: https://api.zooza.app, UK: https://uk.api.zooza.app, UAE: https://asia.api.zooza.app	https://api.zooza.app

Body only

Place the placeholder and the loader in the <body> of your page, where you want the widget to appear.

<div data-zooza-widget='video' data-zooza-id='YOUR_API_KEY'></div>
<script async src='ZOOZA_API_URL/widgets/v2/loader.js'></script>

Initialisation options can be set directly on the placeholder as data-zooza-* attributes.

Head + body

Place the loader in the <head> of your page:

<script async src='ZOOZA_API_URL/widgets/v2/loader.js'></script>

Then place the placeholder in the <body>, where you want the widget to appear:

<div data-zooza-widget='video' data-zooza-id='YOUR_API_KEY'></div>

Initialisation options can be set directly on the placeholder as data-zooza-* attributes.

Legacy script

Legacy embed

This is the original embed snippet. It remains fully supported and existing embeds keep working, but it is no longer maintained or developed. New capabilities, such as data-zooza-* attributes, are only available with the placeholder embed.

Place the following snippet directly into the <body> of your page, where you want the widget to appear.

<script data-version='v2' data-widget-id='zooza' id='YOUR_API_KEY' type='text/javascript'>
( function() {
function async_load(){
    document.body.setAttribute('data-zooza-api-url', 'ZOOZA_API_URL');
    var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
    s.src = document.body.getAttribute('data-zooza-api-url') +
     '/widgets/v2/?type=video&ref=' + encodeURIComponent( window.location.href );
    var embedder = document.getElementById( 'YOUR_API_KEY' );
    embedder.parentNode.insertBefore( s, embedder );
}
if ( document.readyState !== 'loading' ) {
    async_load();
} else if ( document.addEventListener ) {
    document.addEventListener( 'DOMContentLoaded', async_load );
} else {
    document.attachEvent( 'onreadystatechange', function() {
        if ( document.readyState === 'complete' ) { async_load(); }
    } );
}
} )();
</script>

🤖

Build this with your AI agentEmbed the video widget into my site

Open in ChatGPT ↗Open in Claude ↗

🤖

Build this with your AI agentStyle the video widget to match my site

Open in ChatGPT ↗Open in Claude ↗

Settings

These settings are managed within the Zooza's main application Publish > Widget > Video.

URL

This will let Zooza know where your widget resides so that it can redirect your customers to it when necessary.

Use CSS

This will load default Zooza styling. By default this is turned on. Typically you only want to override couple of styles but if you want, you can turn this off and create your own styling from scratch. However we recommend downloading the default styling and go from there, instead of building everything from scratch.

You can download the default css from this URL:

API_URL/widgets/v2/css/?widget=video

Initialisation options

These options select which content the widget embeds.

v

Type: Integer, String

Id of the video to embed.

Value	Description	Example Value
YOUR_VIDEO_ID	Id of the video.	123

URL Query

https://sample-site.com/video?v=YOUR_VIDEO_ID

Data attribute

<div data-zooza-widget='video'
     data-zooza-id='YOUR_API_KEY'
     data-zooza-v='123'></div>

type

Type: String

Selects the mode the widget runs in. Use live_stream together with live_stream_id to embed a live stream rather than a recorded video.

Value	Description	Example Value
MODE	Widget mode.	live_stream

URL Query

https://sample-site.com/video?type=live_stream

Data attribute

<div data-zooza-widget='video'
     data-zooza-id='YOUR_API_KEY'
     data-zooza-type='live_stream'></div>

live_stream_id

Type: Integer, String

Id of the live stream to embed. Used when type is set to live_stream.

Value	Description	Example Value
YOUR_STREAM_ID	Id of the live stream.	123

URL Query

https://sample-site.com/video?type=live_stream&live_stream_id=YOUR_STREAM_ID

Data attribute

<div data-zooza-widget='video'
     data-zooza-id='YOUR_API_KEY'
     data-zooza-type='live_stream'
     data-zooza-live-stream-id='123'></div>

key is not an embed option

key is a runtime authentication token, not embed-time configuration. Do not set it on the placeholder.