zipcan-video

To implement Zipcan video chat into your website or application, sign up for an account at https://zipcan.com, then follow the steps to embed video with this package.

This webcomponent follows the open-wc recommendation.

Installation with npm

npm i zipcan-video

Usage with Vanilla JS

Install the package, then copy the file node_modules/zipcan-video/dist/zipcan-video.js to your project folder and import it into your HTML:

<script src="./PROJECT_FOLDER/zipcan-video.js"></script>

<zipcan-video token="VIDEO_TOKEN" [options]></zipcan-video>

Usage for React, Angular and other frameworks

import "zipcan-video/zipcan-video.js";

<zipcan-video token="VIDEO_TOKEN" [options]></zipcan-video>

Options

token

Use the token shown in the code under the Advanced Embed option in the Zipcan admin.

is-popup

Set this to 'true' to automatically show a button, affixed on screen, that pops up the video when clicked.

If set to 'false' the <zipcan-video> component can be placed anywhere in your HTML.

width

iFrame width if is-popup=false Popup width if is-popup=true

height

iFrame height if is-popup=false Popup height if is-popup=true

id

Pass any unique ID into this option to start a unique chat room. For example, you could use a property in your web app or generate a UUID. Anyone with access to the video component using same ID can join.

name

Pass any user name into this option to auto-populate the Name field for users in the lobby. For example, you could use a username or credential property in your web app.

host-token

Use the Host Token to grant a specific user host privileges for a room. The token is specific to a chat space. It can be found under Embed Options in the chat space Settings panel in the Zipcan Admin Console.