@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,
	type: 'crm', // 'crm', 'jwtAuthenticated', or 'view'
});

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

Name	Description	Type	Default
publishableKey	Your public key	string	Required
locale	The locale to use for the mailvideo iframe.	string	en
verbose	If true, all information will be console logged.	boolean	false
tenantId	The tenant id to use for the mailvideo iframe. This is only required if type is crm	string/number	undefined
accountId	The account id to use for the mailvideo iframe. This is only required if type is crm	string/number	undefined
preload	If this is true, then the iframe will be preloaded and appended to the body, and hidden.	boolean/HTMLDivElement	false
canCreateMailVideoTeam	If the user can read all users in it's tenant/team. This is used if a mailvideo team has not yet been created for the tenant/team.	boolean	true
type	The embed type, can be crm, jwtAuthenticated or view	string	Required
jwt	The jwt token to use for the mailvideo iframe. This is only required if type is jwtAuthenticated	string	undefined

pickVideo

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

PickVideoOptions

Name	Description	Type	Default
person	The person to use for the mailvideo iframe.	PersonData	undefined
company	The company to use for the mailvideo iframe.	CompanyData	undefined
activity	The activity to use for the mailvideo iframe.	ActivityData	undefined
divElement	The div element to use for the mailvideo iframe. If not specified it will open a popup dialog in the middle of the page.	HTMLDivElement	undefined
logMailVideoSent	If your system has API endpoint to log events, then mailvideo will log when a user sends a video.	boolean	true
logMailVideoSeen	If your system has API endpoint to log events, then mailvideo will logwhen a video has been seen by the recipient.	boolean	true

PickVideoResponse

Name	Description	Type
id	The video id	string
title	The video title	string
link	The video link	string
embedCode	The video embed code	string
emailHTMLCode	The video email html code	string

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

Name	Description	Type	Default
accountIdTemplate	This will replace the accountId of the user that created the template. So we can correctly show who sent video.	string	undefined
person	The person to use for the mailvideo iframe.	PersonTemplateData	undefined
company	The company to use for the mailvideo iframe.	CompanyTemplateData	undefined
activity	The activity to use for the mailvideo iframe.	ActivityTempalteData	undefined
divElement	The div element to use for the mailvideo iframe. If not specified it will open a popup dialog in the middle of the page.	HTMLDivElement	undefined
logMailVideoSent	If your system has API endpoint to log events, then mailvideo will log when a user sends a video.	boolean	true
logMailVideoSeen	If your system has API endpoint to log events, then mailvideo will logwhen a video has been seen by the recipient.	boolean	true

PickVideoTemplateResponse

Name	Description	Type
id	The video id	string
title	The video title	string
link	The video link	string
embedCode	The video embed code	string
emailHTMLCode	The video email html code	string

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

Name	Description	Type	Default
person	The person to use for the mailvideo iframe.	PersonData	undefined
company	The company to use for the mailvideo iframe.	CompanyData	undefined
activity	The activity to use for the mailvideo iframe.	ActivityData	undefined
divElement	The div element to use for the mailvideo iframe. If not specified it will open a popup dialog in the middle of the page.	HTMLDivElement	undefined
logMailVideoSent	If your system has API endpoint to log events, then mailvideo will log when a user sends a video.	boolean	true
logMailVideoSeen	If your system has API endpoint to log events, then mailvideo will logwhen a video has been seen by the recipient.	boolean	true

openVideo

Open a specific video to edit or see analytics.

OpenVideoOptions

Name	Description	Type	Default
videoId	The id of the video to view	string	required
divElement	The div element to use for the mailvideo iframe. If not specified it will open a popup dialog in the middle of the page.	HTMLDivElement	undefined
logMailVideoSent	If your system has API endpoint to log events, then mailvideo will log when a user sends a video.	boolean	true
logMailVideoSeen	If your system has API endpoint to log events, then mailvideo will logwhen a video has been seen by the recipient.	boolean	true

showPlayer

Show the player for a specific video.

ShowPlayerOptions

Name	Description	Type	Default
videoId	The id of the video to play	string	required
divElement	The div element to use for the mailvideo iframe. If not specified it will open a popup dialog in the middle of the page.	HTMLDivElement	undefined
isPreview	If this is true, then the player will not log anything	boolean	false
viewer	Metadata about the viewer that watches the video.	ViewerData	undefined

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;
}

ViewerData

Metadata about the viewer that watches the video.

You can force strong typing by adding a d.ts file to your project.

Example:

declare namespace MailVideo {
	interface ViewerData {
		name: string;
		email: string;
	}
}