If you need more control with integrating Zipcan into your own experiences, you can install our NPM package.

Visit the NPM page for installation instructions.

Once you've installed the package, you'll need access to your Zipcan Dashboard. If you don't already have an account, sign up here.

In the Dashboard, click the </> Embedding Options in Settings. Under Advanced Embed you will find a code snippet that imports the package to a web component called <zipcan-video>. It is important that you use the correct token stated in the code otherwise the video will not load.

Screen Shot 2021-05-10 at 12.35.58 PM

These are the following options the module will accept to customize the video:

token

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

is-popup

Set this as '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. See Dynamic Rooms for more info.

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. See Dynamic Rooms for more info.

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.