Agenda PRO module
last documentation update 29.10.2024 (v1.1)
Created by Max Vorozhtsov (UX & Front-end) & Olha Vorozhtsova (UX & Designed by)
Requirements
Agenda free module requires at least one of the next HubSpot plans:
- Free Tools & CRM
- CMS Hub: Starter, Professional, or Enterprise
- Marketing Hub: Starter, Professional, or Enterprise
- Sales Hub: Starter, Professional, or Enterprise
- Service Hub: Starter, Professional, or Enterprise
- Operations Hub: Starter, Professional, or Enterprise
Installation
- Install the module into your the HubSpot instance from the HubSpot marketplace.
- choose the website / landing page where you want to place the module
- enter the page editor
- find the Agenda PRO module in the "Add" tab and drag'n'drop module into the Landing / Website page content.
Technology
- HTML (with Hubl)
- CSS
- JS (no jQuery or other libraries is needed)
Main features
- Fast and simpy create the event agenda
- Multiple days
- Multiple platforms
- Different type of events
- Multiple speakers
- Event categories
- Full & Short view
- Speaker popup (with possibility to add the speaker appearances)
- Fully adaptive for all devices
Structure
Because of the module large functionality, it have bit more complex structure than Agenda Free or Agenda Lite.
- In case of Agenda PRO the main repeatable object is DAY.
- In the DAY you can create the different number of the PLATFORM instances (minimum number is 1, but in case you don't need the platform switching you can turn off the platform presense, but the object itself have to be created with at least 1 platform).
- Agenda ITEM have to be created in the platform instance.
- Also in case your item have the SPEAKER (you can add up to 3 speakers in the each of items) and CATEGORY
Please note, that the SPEAKER POPUP is also a repeatable object and it is placed on the top level (as the Day repeatable object)
Demos:
To check the view and examples of the Agenda PRO functionalities - please check the demos:
Possibilities
- Styles Tab
- changing the day view
- tabs
- tabs view 1
- tabs view 2
- tabs view 3
- day by day
-
- turn on/off the view switcher
- changing the font family for the module
- changing the font colors
- changing the decoration colors
- changing the presenter photo border radius
- possibility to add the max-width to the content
- possibility to change the event description width (desktop version only)
- possibility to change the padding top and padding bottom for the full agenda block
- popup styling:
- speaker name color
- speaker photo border-radius color
- popup z-index
- popup overlay z-index
- popup overlay color
- changing the base styling:
- change the popup background color
- change popup text color
- View & Platfrom Switcher styling
- inactive buttn text color
- inactive button background color
- Content tab
- top content change
- Event title turn on/off
- Event title edition
- Event description turn on/off
- Event description edition
- View Switcher Settings
- full List text
- short List text
- Hide the platform switcher
- day creation
- adding the day name
- enable/remove day subtitle
- platform creation
- platform name adding/removing
- items adding/removing:
- possibility to add event title
- possibility to add event time
- possibility to add event description
- possibility to add/remove event categories
- add/change category name
- change the text color
- change the border color
- possibility to add/remove event speaker
- add/remove the speaker photo
- edit the speaker name
- edit speaker job role
- custom styles for speaker
- change speaker name & job title color
- border radius for the photo
- photo border color
- adding the custom styles for exact item
- change the background color
- change title color
- change the text color
- change border top color
- change the speaker name and job color
- change the speaker's photo border color
- Create the popup for speaker
- add speaker name
- add speaker job role
- add speaker photo
- add speaker description
- enable the box with the links (each can be turn on/off separately and the social network icon can be changed):
- linkedin link
- facebook link
- twitter / x link
- website link
- add the block with speaker appearances (generated automatically)
FAQ
How to create more than one "day" / "platform"?
To create more than one day - go to the module content, find the "Day" group and click "+ Add":
Each day can have different number of the platforms (please check the DEMO). Each day has to have day have at least 1 platform (you can enable/disable platform switcher if you have just one platform). To add the additional platform - just click add in the "Day":
How to switch the view?
To switch the view go to the Styles tab and choose the view between the "Day by Day" view and "Tabs" view. In case you choose the "Tabs" view you can also choose one of 3 versions of tabs.
How to create the "Speaker Popup" and connect it with the Speaker's appearances?
To add the speaker popup you need to go to the "Content" tab and switch on such option, then click add:
In the speaker's popup you can set speaker's name and photo (photo can be turned off), job title and social links (linkedin, facebook, twitter/x and website; each link can be turn off and each icon can be changed), also speaker description can be added.
Please note, that popup added to the event by speaker name, so the speaker name in the popup have to be the same as in the event item.
As you see, Karen's name is underlined and on click the popup will be shown (also on Karen's photo click), but the popup wasn't created for Donald, and his name is not underlined. So, if popup for speaker was created in the correct way, the speaker name will be underlined.
To enable the list of speaker appearances - just enable that feature in exact speaker popup:
The list will be build automatically based on the speaker appearances (please check the DEMO):
Can I change the texts for Full/Short list switcher?
Sure. Texts and colors of the switcher are editable. Just find the "View Switcher Texts" group in the content tab. There you can change the texts for buttons and also inactive button text color & background color.
Can I remove Full/Short list switcher?
Sure. It can be easily done from the "Styles" tab and turn it on / off:
In case of any questions - please reach out our support
