Overview
| AVAILABLE FOR: | |
| HubSpot Marketing: | Pro, Enterprise |
| HubSpot Sales: | N/A |
| HubSpot Service | N/A |
You can create your own HubSpot templates to ensure your auto-created webinar pages are fully on brand. Once you have followed the steps below you will see your new template pack as an option to use within your WorkCast account.
Specific module types within these HubSpot templates will need to contain correct 'tags' (snippets of HTML) to ensure event items such as the title, registration form, media player and attendee joining details are automatically added to your pages.
Quick Links
Template Creation | Adding Required Modules | Create an Automated Event
Stage 1 - Template Creation
Creating New templates
Within HubSpot, create three landing page templates within their own folder, with the titles named EXACTLY as below.
Please note the template names need to be named exactly as listed to ensure the template pack displays within your WorkCast account:
- WorkCast Webinar Registration Landing Page
- WorkCast Webinar Registration Thanks Page
- WorkCast Webinar Event Landing Page
Cloning from Existing Templates
If you already have landing page templates you wish to use for your webinar template pack you can clone existing templates to create the new webinar template pack.
- In your HubSpot Marketing account, navigate to Content > Design Manager and locate the landing page template(s) you wish to clone.
- Click to open the required template, then select Actions > Clone
- Create a new Folder for the template to be cloned to
- Ensure the three cloned templates within the new folder are named exactly as follows:
- WorkCast Webinar Registration Landing Page
- WorkCast Webinar Registration Thanks Page
- WorkCast Webinar Event Landing Page
Stage 2 - Add all Required Modules to Templates
You must ensure your three templates contain all the modules listed below to ensure the auto generated webinar elements will be populated inside these modules. This means when you come to create a HubSpot event from the WorkCast Platform the form, joining links and media are all auto populated inside these modules in three automatically created landing pages.
2.1) Registration Landing Page
- In your HubSpot Marketing account, navigate to Content > Design Manager and locate the template named 'WorkCast Webinar Registration Landing Page'.
-
- You will now need to ensure the three modules for Event Title, Event Date and Form containing the following custom wrapping HTML are included within this template.
a) Add Event Title Module (Module type MUST be 'Header')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-title">{{ html }}</div>
b) Add Event Date Module (Module type MUST be 'Header')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-date">{{ html }}</div>
c) Add Registration Form Module (Module type MUST be 'Form')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-form">{{ html }}</div>
2.2) Registration Thanks Page
- In your HubSpot Marketing account, navigate to Content > Design Manager and locate the template named 'WorkCast Webinar Registration Thanks Page'.
-
- You will now need to ensure the three modules for Event Title, Event Date, Join Event, Test Connection and Add To Calendar containing the following custom wrapping HTML are included within this template.
a) Add Event Title Module (Module type MUST be 'Header')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-title">{{ html }}</div>
b) Add Event Date Module (Module type MUST be 'Header')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-date">{{ html }}</div>
c) Add Join Event Link Module (Module type MUST be 'Rich Text')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-join-event">{{ html }}</div>
d) Add Calendar Link Module (Module type MUST be 'Rich Text')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-add-to-calendar">{{ html }}</div>
e) Add Test Your Connection Link Module (Module type MUST be 'Rich Text')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-test-connection">{{ html }}</div>
2.3) Event Landing Page
- In your HubSpot Marketing account, navigate to Content > Design Manager and locate the template named 'WorkCast Webinar Event Landing Page'.
- You will now need to ensure the three modules for Event Title, Event Date and Media Embed containing the following custom wrapping HTML are included within this template.
a) Add Event Title Module (Module type MUST be 'Header')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-title">{{ html }}</div>
b) Add Event Date Module (Module type MUST be 'Header')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-date">{{ html }}</div>
c) Add Media Embed Module (Module type MUST be 'Custom HTML')
- Click Cog > Edit CSS declarations then inside the text area for 'Custom Wrapping HTML' add the following:
<div id="workcast-event-embed">{{ html }}</div>
Stage 3 - Create an Automated Event
Once your three HubSpot templates are created in their own folder and named as required you should then see your template pack as an option to create an event from!
Navigate to Create Events > HubSpot Embedded Live Event, enter your event details and you're away!
Three landing pages will be automatically created in HubSpot in the layout of your templates, along with a basic webinar workflow that ensures the registrations are pushed to WorkCast to trigger the confirmation emails.
You don't need to worry about pasting event embed code, adding joining link URL's or creating landing pages; it will all be taken care of for you!