@mailvideo/embed v1.0.0

@mailvideo/embed

This package embeds mailvideo iframe to handle video in your application.

• Install
• Features
• Prerequisites
• Example
• Usage
• Methods
  • loadMailVideo
  • pickVideo
  • pickVideoTemplate
  • openPlatform
  • openVideo
  • Interfaces

Install

pnpm i @mailvideo/embed

Features

• It can create new or existing video and share it with your users.
• View video statistics.

Prerequisites

You need to contact mailvideo to get a public key to be able to use this plugin.

Example

• codesandbox
• github
• live (vercel)

Usage

import { loadMailVideo } from '@mailvideo/embed';

const mailvideo = await loadMailVideo({
	publishableKey: 'your-public-key',
	tenantId: 2,
	accountId: 5,
});

const [video, error] = await mailvideo.pickVideo();

if (video) {
	// a video was created/selected
	console.log(video);
	return;
}

if (error === 'user-cancelled') {
	// user cancelled the dialog
	return;
}
// something went wrong
console.error(error);

Methods

loadMailVideo

Loads the mailvideo script and returns a promise that resolves to a MailVideo object.

loadMailVideo options

pickVideo

Opens a popup dialog or inject iframe into a custom container to create a new video or select an existing video.

PickVideoOptions

PickVideoResponse

pickVideoTemplate

This is the same as pickVideo, execpt it is used for email templates. When setting person, company or activity options, you put the wildcards that you replace in the email template. For example if you have a wildcard called {{personId}} You will do the following:

const [video] = await mailvideo.pickVideoTemplate({
	person: {
		id: '{{personId}}',
	},
});
video.link; // => https://share.mailvideo.com/watch/sakdjdsf873453?personId={{personId}}

PickVideoTemplateOptions

PickVideoTemplateResponse

openPlatform

Open the library of videos for a specific company/person/activity or just for the entire platform. You can see all sent videos to that company/person. Also you can manage exiting videos.

OpenPlatformOptions

openVideo

Open a specific video to edit or see analytics.

OpenVideoOptions

Interfaces

interface PersonData {
	id: string | number;
	name: string;
	email?: string;
}

interface CompanyData {
	id: string | number;
	name: string;
}

interface ActivityData {
	id: string | number;
	name: string;
}

interface PersonTemplateData {
	id: string;
	name?: string;
	email?: string;
}

interface CompanyTemplateData {
	id: string;
	name?: string;
}

interface ActivityTemplateData {
	id: string;
	name?: string;
}