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 Advanced Embed option. Under this option 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. Additionally, you will need to add your domain in the Dashboard in the Add a Domain field. If you are working locally, you can enter localhost.

Screen Shot 2020-11-09 at 8.49.10 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.

button-color

Set the button color. Valid only if is-popup=true.

button-text

Set the button text. Valid only if is-popup=true.

text-font

Set the button text font. Valid only if is-popup=true.

text-color

Set the button text color. Valid only if is-popup=true.

icon

Set to 'true' to enable a webcam icon in the button. 'False' will hide the icon.