Get started

Video embed

The easiest way to get started is to simple add the following code snippet to your page. Make sure to add your own embed id in the embed attribute. Where you paste this snippet is where the video player will be shown.

<script src="//mave.io/<YOUR EMBED ID>"></script>

import { Mave } from "@maveio/mave-react";

<Mave embed="<YOUR EMBED ID>"></Mave>

Stream embed

There is no difference in how the embed can be placed as a regular video embed. It's the same thing. However, the stream embed does include a chat feature, which can be customized through the embed. We offer a way to pass your own identifier, so you know who is your user. This is called the reference-id. And you can set a display-name. This has to be set on the embed itself as attributes.

<script src="//mave.io/<YOUR EMBED ID>" reference-id="<YOUR USERS ID>" display-name="John Doe"></script>

<Mave embed="<YOUR EMBED ID>" reference-id="<YOUR USERS ID>" display-name="John Doe"></Mave>

Security considerations

Users can modify their name or reference_id by simply modifying the DOM. Although not much can be achieved by doing this, we do recommend implementing the jwt attribute. You will require an API key to implement this.

📘

Get the API credentials from Mave's dashboard

You can do this by going to https://mave.io/manage/settings

This can be done by integrating JSON webtokens into your server and creating a JWT that is attached to the embed when rendering the page. For example (in NodeJS):

const express = require('express')
const app = express()

// Import a JWT library (most languages will provide such a package)
const jwt = require('jsonwebtoken')


app.get('/', (req, res) => {
  // This is where you create the JWT
  const token = jwt.sign({ embed: 'YOUR EMBED ID', reference_id: '<YOUR USERS ID>', display_name: 'John Doe' }, '<API KEY>')
  
  res.render('index', { token: token })
})

app.listen(3000)

Which in this case pass token as field to render inside of your index page, something like:

<script src="//mave.io/<YOUR EMBED ID>" jwt="<YOUR GENERATED JWT>"></script>

<Mave jwt="<YOUR GENERATED JWT>"></Mave>