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. 

Zipcan Admin

2. Select your embed option. 

Embed Zipcan

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. 

Hubspot menu

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

Hubspot Website pages

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. 

Hubspot advanced



4. The end result should look like this:

Zipcan button

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. 

Hubspot CMS modules

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

Hubspot video module

3. Copy the Zipcan Direct embed from your admin instance

Zipcan admin

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

Add Code to Hubspot


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. 

Hubspot thank you

The end result should look something like this:

Hubspot with Zipcan