Documentation | Wave.video button

Wave.video button

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.

```
<script>
```
```
(function (d,w,e,c,a) {
```

    var cf = w[c] = w[c] || {}; cf.apiKey = a;

    var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];

```
    sc.async=!0;
```

    sc.src=cf.embed || 'https://wave.video/editor/embed.js';

```
    s.parentNode.insertBefore(sc, s);
```

})(document, window, 'script', 'waveconfig', '');

```
</script>
```

<span class="wave-video-button large default"

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.

See the Demos

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: 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: { "name": "name of the project", "videoUrl": "url to the mp4", "duration": duration-in-seconds, "width": width-of-the-video, "height": height-of-the-video, "size": size-of-the-video-in-bytes, "fps": frames-per-second, "format": "video-format-selected-by-user", "thumbnails": [ { "time": 0, "url": "url to thumbnail at time 0" }, { "time": 2.2, "url": "url to thumbnail at time 2.2" }, ] } 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.

```
<span id="my-button"
```
```
    class="wave-video-button"
```
```
    data-video-id="mypost1"
```

    data-publish-callback="onWavePublish">Make video</span>

```
<script>
```

function onWavePublish(button, result, error) {

```
if (error) {
```
```
    alert("Error: "+error);
```
```
} else {
```
```
    if (result.videoUrl) {
```

        console.log("got video: ", result);

```
        let src = result.videoUrl;
```
```
        let name = result.name;
```
```
        let duration = result.duration;
```
```
        let size = result.size;
```
```
        let width = result.width;
```
```
        let height = result.height;
```
```
        let fps = result.fps;
```
```
        let format = result.format;
```
```
        let k = 0;
```

        for (;k<result.thumbnails.length; k++) {

            let url = result.thumbnails[k].url;

            let time = result.thumbnails[k].time;

            console.log("thumbnail at "+time+" is "+url);

```
        }
```
```
    } else {
```

              // wave was closed without publish, ignore

```
          }
```
```
      }
```
```
  }
```
```
  (function (d,w,e,c,a) {
```

      let cf = w[c] = w[c] || {}; cf.apiKey = a;

      var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];sc.async=!0;

      sc.src=cf.embed || 'https://wave.video/editor/embed.js';s.parentNode.insertBefore(sc, s);

  })(document, window, 'script', 'waveconfig', 'YOUR API KEY');

```
</script>
```