So you’ve customized Zipcan, and want to add it on your Hubspot site. It’s simple using our embed code options, and will work seamlessly on your site! Follow these steps to get started. 

You will need:

A Hubspot CMS account.

A Zipcan button embed, iframe or NPM package.

Configure

1. Configure your Zipcan video chat in your admin. 

2. Select your embed option. 

Using the advanced NPM package does require Hubspot Professional or Enterprise plans. Click here for more details on the Zipcan NPM package. 

Embed - Button

1. Select the type of Hubspot page you want to embed your Zipcan video chat experience. Website pages and landing pages are most common but technically you can embed in a blog. This article will show how to embed in a website page. Select marketing>Website>Website pages. 

2. Select an existing page, or create a new page. Then navigate to edit the page. 

3. Click on Settings. Scroll down to Advanced Options and expand the menu. Paste the Zipcan code into the Footer HTML section. Save and publish. 

4. The end result should look like this:

Embed iframe

1. Edit the website page. On the left, scroll down and open the all modules section, then scroll all the way down to the video module. Drag and drop a Video block into the content area where you would like to embed Zipcan. 

2. Click on Edit Module. Then under embed type, select embed code rather than embed URL. 

3. Copy the Zipcan Direct embed from your admin instance

4. Paste the code into the Embed code section. Then click Apply changes.

5. Save and publish your changes. This should end on the summary page where you can open the link. If you have made additional changes, make sure to “hard” refresh to see the latest version. 

The end result should look something like this: