1. Create your button and add it to your page

Set up your button and place the button code where you need it to appear on your page.
Make sure you replace YOUR_API_KEY with your actual API key.

Set up your button

Your API key
16:9 Horizontal
Large
Default
  1. <script>
  2. (function (d,w,e,c,a) {
  3.     var cf = w[c] = w[c] || {}; cf.apiKey = a;
  4.     var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];
  5.     sc.async=!0;
  6.     sc.src=cf.embed || 'https://wave.video/editor/embed.js';
  7.     s.parentNode.insertBefore(sc, s);
  8. })(document, window, 'script', 'waveconfig', '');
  9. </script>
  10. <span class="wave-video-button large default"
  11. data-video-format="youtube_horizontal">Make video</span>
Your button previewMake video

2. How it works

Clicking on the button will launch Wave.video editor inside the iframe on your page. Your users will have to either log into Wave.video or sign up if they don't have an account yet, all of that inside the iframe. After your users create a video, they publish it back to your website.

There are several ways to get the video from the editor. The simplest is to specify video tag ID where the video will be placed. Another option is to provide a callback function to receive the URL and thumbnails of the video.

3. Customize your button

You can customize the button using your own style or you can use our provided styles. You can have several buttons on the page, but they all should have class wave-video-button.

Each button can be further customized with data- attributes:

data-video-id

The ID of the video that provides a way to edit previously created video.

The ID is unique per user, i.e. if two different users will open the editor with the same ID thentwo different videos will be created or edited.

data-video-format

The video format.
The list of all supported formats is available at https://api.wave.video/project/formats

Example: youtube_horizontal

data-search-text

The search query either for the stock library or templates.

If the editor starts from templates page then this query is templates search parameters. Go to templates page, configure the search and then copy all the parameters from the url.

For example if the url is:

https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach

then data-search-text should be set to

category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach

If the editor starts from the stock library then this text is used to search the stocks.

data-publish-label

The text label on the publish button, overriding the default “Publish”.

data-publish-video-id

The ID of the video tag that receives the video.

If you have a video tag on your page, you can specify the ID of this tag and the editor will set the final video URL to the src attribute of this video tag.

data-navigation-target

select-formats — opens editor on select formats screen
uploads — opens editor on upload screen
edit — opens editor in edit screen
templates — start editor from templates page (default). data-search-text can be used to specify search parameters on the template page

data-publish-callback

A callback global function.

This function is called when the user saves the video. The function is called with the following parameters:

  1. callback_function(button, result, error)

Where:

button — button element
result — json with video URL and thumbnails
error — error message, if any

Here’s an example of resulting JSON:

  1. {
  2. "name": "name of the project",
  3. "videoUrl": "url to the mp4",
  4. "duration": duration-in-seconds,
  5. "width": width-of-the-video,
  6. "height": height-of-the-video,
  7. "size": size-of-the-video-in-bytes,
  8. "fps": frames-per-second,
  9. "format": "video-format-selected-by-user",
  10. "thumbnails": [
  11.     { "time": 0, "url": "url to thumbnail at time 0" },
  12.     { "time": 2.2, "url": "url to thumbnail at time 2.2" },
  13. ]
  14. }

Note that the video which is returned from the editor will expire in 3 days. If it is to be used longer, then it should be downloaded from this URL.

Example

In the following example we have a button with a callback function onWavePublish. When this function is called, the code will print to the console the URL of the video file and the URLs of the thumbnails.

  1. <span id="my-button"
  2.     class="wave-video-button"
  3.     data-video-id="mypost1"
  4.     data-publish-callback="onWavePublish">Make video</span>
  5. <script>
  6. function onWavePublish(button, result, error) {
  7. if (error) {
  8.     alert("Error: "+error);
  9. } else {
  10.     if (result.videoUrl) {
  11.         console.log("got video: ", result);
  12.         let src = result.videoUrl;
  13.         let name = result.name;
  14.         let duration = result.duration;
  15.         let size = result.size;
  16.         let width = result.width;
  17.         let height = result.height;
  18.         let fps = result.fps;
  19.         let format = result.format;
  20.         let k = 0;
  21.         for (;k<result.thumbnails.length; k++) {
  22.             let url = result.thumbnails[k].url;
  23.             let time = result.thumbnails[k].time;
  24.             console.log("thumbnail at "+time+" is "+url);
  25.         }
  26.     } else {
  27.               // wave was closed without publish, ignore
  28.           }
  29.       }
  30.   }
  31.   (function (d,w,e,c,a) {
  32.       let cf = w[c] = w[c] || {}; cf.apiKey = a;
  33.       var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];sc.async=!0;
  34.       sc.src=cf.embed || 'https://wave.video/editor/embed.js';s.parentNode.insertBefore(sc, s);
  35.   })(document, window, 'script', 'waveconfig', 'YOUR API KEY');
  36. </script>