Easily publish Automated Landing Pages that pull a template directly from HubSpot and provide moments and videos from Parmonic for your audience. All you need to begin is HubSpot Admin access, or someone nearby with Admin access.
Here's how to set it up and get started.
1. Make sure you're in the right spot! The MOMENTS Area, The PUBLISH Mode and the WEB Experience is where we'll find our Automated Landing Page options.
2. Reconnect Hubspot and Parmonic – this will take just a minute and is needed to refresh the sync settings
3. In Hubspot – Prerequisites
ALPs must be enabled on your Parmonic account. To enable ALPs on your Parmonic account, contact support. (help@parmonic.com)
In order to publish a landing page to HubSpot, your HubSpot theme must have at least one template that:
- Either exists in a folder named `parmonic` (case insensitive)
- Or has the word parmonic in its name
|
TODO: beautify this |
Original screenshot: |
4. Configure the cloned template with a few lines of custom code (you’ll just need to copy/paste one time)
Template variables
The template can use the following variables in the page:
| ID | Name | Description |
content.widgets.parmonic.widgetEmbedCode |
Embed Code | Web Experience widget (landing page) embed code |
content.widgets.parmonic.webinarTitle |
Title | Webinar Title in Parmonic |
content.widgets.parmonic.webinarDescription |
Description | Webinar description in Parmonic |
A simple template would like:
<!--
templateType: page
isAvailableForNewContent: true
label: Parmonic Landing Page
-->
{% extends "./layouts/base.html" %}
{% block body %}
<main id="main-content" class="body-container-wrapper">
<h1>{{content.widgets.parmonic.webinarTitle}}</h1>
<p>{{content.widgets.parmonic.webinarDescription}}</p>
{% dnd_area 'dnd_area' label='Parmonic Web Experience' %}
{% dnd_section %}
{% dnd_module path='@hubspot/rich_text' label='Embed Code' %}
{% module_attribute "html"%}
{{content.widgets.parmonic.widgetEmbedCode}}
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
</main>
{% endblock body %}
5. Create a test page to activate this new functionality.