HubSpot Assets Documentation
Accordion Module
The Aivilo Web Accordion module allows for advanced customization of one or multiple accordions on your website. Available features include:
- Drag and drop module (can be used in landing pages, website pages, themes)
- Unlimited accordion sections
- Customize text colors, accordion background colors, font sizes, and width of accordion
- Choose from several Font Awesome expand/collapse icons
- Place an image, roman numerals, numbered list, a Font Awesome icon, and more before each section title
- Customize placement of accordion section border
Panel Title
text
Add accordion panel section title. This is the caption visible regardless of if the accordion is expanded/contracted.
Panel Content
text
The body text of the accordion panel section, only visible when the accordion section is expanded.
Panel Options
choice
Customize the way accordion sections are listed. Available options include:
- None
- Image
- Number
- Font Awesome Icon
Expand/Collapse Options
choice
Customize the icons used to expand/contract each accordion section. Includes the following font awesome icon pairings:
- Plus/Close
- Caret Up/Caret Down
- Angle Up/Angle Down
- Chevron Up/Chevron Down
- Chevron Circle Up/Chevron Circle Down
Color Options
color
Set the text color for the accordion title and body content. Body content can be overidden by setting font color in the rich text editor.
Font Size Options
number
Set the font size for the accordion title and body content. Body content font size can be overidden by setting font size in the rich text editor.










Unlimited Calendar Module
The Aivilo Web Calendar Module allows you to build a calendar and event listing. Add information about your upcoming events and the module will automatically populate the calendar with your events as well as list events in a card format below the calendar. The following are features of the Aivilo Web Calendar Module:
- Mobile responsive calendar
- Add multiple, unique calendars to the same landing page, website page, or blog post
- Create an infinite number of events to populate on the calendar, listed by date
- Manually choose how many event cards to show at the bottom of the calendar
- Create single day, multi-day, or repeater events (weekly, biweekly, monthly, bimonthly, and yearly)
- Custom color for each event
- Set a primary and secondary color for module elements
- Automatic removal of calendar event cards after the event date has passed
Add Event (Repeater Field)
choice
Add events to the calendar.
Manually re-order event listings, especially if chronological ordering of events is desired. Events whose dates have passed will automatically be removed from the card listing, but will remain on the calendar.
Type of Event
choice
Choose a type of event from the below options.
Single Day Events are those that occur only once on a specific day.
Multi Day Events occur during a series of consecutive days.
Repeating Events occur on a weekly, biweekly, monthly, bimonthly, or yearly basis.
Event Frequency (for Repeating Events)
choice
Determine your event's frequency. Biweekly events occur every two weeks, bimonthly events occur every two months.
Event Start and End Date
date
For single day events, there will only be an Event Start Date.
For multi-day and repeating events, set an event start date and end date.







YouTube RSS Feed
The Aivilo Web YouTube RSS feed module allows you to render up to 15 videos from a YouTube Playlist or YouTube channel. Available features include:
- Display videos in a slider or grid format
- Show (or hide) video title, description, publish date, and video author
- Set custom colors for slider indicator dots and navigation arrows
Channel ID / Playlist ID
text
Set the ID of the YouTube Channel or Playlist you wish to pull videos from.
Number of Videos to Show
number
Set the number of YouTube videos you wish to show. Note: you may show up to 15 videos per module instance.
Additional Video Settings
boolean
Determine which video display options to show (or hide), including:
Video Title
Video Author
Video Description
Truncate Video Description







Page Scroll Progress Module
A customizable progress bar that tracks with page scroll on your website.
- Mobile responsive progress bar
- Set top, bottom, or left progress bar position on page
- Hide progress bar on mobile if desired
- Customize progress bar thickness
- Customize progress bar colors (up to 2)
Choose Position
choice
Choose a position where the page scroll progress module will be placed. Options include top, bottom, and left.
Note: The "right" position is not an option in order to prevent any negative impact to the user experience with the default page scroll bar.
Set Color Options
color
Set a single color or choose a 2-color gradient for your page scroll progress bar.
Toggle the "Use Color Gradient" option "on" to enable to 2 color pickers. Toggle the "Use Color Gradient" option to "off" to enable 1 color picker.





Auto Type Module
A customizable progress bar that tracks with page scroll on your website.
- Mobile responsive progress bar
- Set top, bottom, or left progress bar position on page
- Hide progress bar on mobile if desired
- Customize progress bar thickness
- Customize progress bar colors (up to 2)
Tier ID
text
Set a unique name for this module. The ID should be one word; if two words are necessary, separate the words with a dash '-'.
Banner Heading
choice
Select the heading size you wish to apply to the auto-type module. Choose from H1, H2, H3, H4, H5, H6, and p.
Text to Auto Type
text
Set the text string(s) that should be auto typed.
Note: This module field supports repeated options. You can set as many text strings for the module to type out, in the order in which you set the text strings.
Custom Class Auto Type Text
text
Add a custom class, to be applied specifically to the auto type text string(s).
Typing Speed
number
Set the speed at which the module auto types the text.
Note: this value is in milliseconds
Reset After
number
Set the amount of delay or pause in between the end of one auto type text string and the beginning of the next.
Note: this value is in milliseconds














Custom Google Calendar Module
Use your OWN Google Calendar on a HubSpot page and style it to match your website's brand! No haggling with Google APIs... just one stylesheet to control how your Google Calendar looks and feels.
- Customize calendar colors
- Customize calendar fonts
- Stylesheet for advanced customizations
- Loading icon while calendar renders on screen
- Tutorial video to help you set up the module
Tier ID
text
This value should be a unique for each instance of this module on a landing page, blog page, or website page.
Google Calendar Public URL
text
The public URL of your Google Calendar.
See tutorial video in module documentation on how to find your Google Calendar public URL.




Super Slick Slider
A customizable progress bar that tracks with page scroll on your website.
- Mobile responsive progress bar
- Set top, bottom, or left progress bar position on page
- Hide progress bar on mobile if desired
- Customize progress bar thickness
- Customize progress bar colors (up to 2)
Choose Position
choice
Choose a position where the page scroll progress module will be placed. Options include top, bottom, and left.
Note: The "right" position is not an option in order to prevent any negative impact to the user experience with the default page scroll bar.
Choose Position
choice
Choose a position where the page scroll progress module will be placed. Options include top, bottom, and left.
Note: The "right" position is not an option in order to prevent any negative impact to the user experience with the default page scroll bar.
Choose Position
choice
Choose a position where the page scroll progress module will be placed. Options include top, bottom, and left.
Note: The "right" position is not an option in order to prevent any negative impact to the user experience with the default page scroll bar.
Choose Position
choice
Choose a position where the page scroll progress module will be placed. Options include top, bottom, and left.
Note: The "right" position is not an option in order to prevent any negative impact to the user experience with the default page scroll bar.
Choose Position
choice
Choose a position where the page scroll progress module will be placed. Options include top, bottom, and left.
Note: The "right" position is not an option in order to prevent any negative impact to the user experience with the default page scroll bar.





Social Share Module
A customizable progress bar that tracks with page scroll on your website.
Tier ID
textSet a unique name for this module. The ID should be one word; if two words are necessary, separate the words with a dash '-'.
Banner Heading
choiceSelect the heading size you wish to apply to the auto-type module. Choose from H1, H2, H3, H4, H5, H6, and p.
Text Before Auto Type
textSet the text that should appear before the auto typed text string.
Text to Auto Type
textSet the text string(s) that should be auto typed.
Note: This module field supports repeated options. You can set as many text strings for the module to type out, in the order in which you set the text strings.
Custom Class Auto Type Text
textAdd a custom class, to be applied specifically to the auto type text string(s).
Text Above Tier
textApply text above the entire module/tier, if desired.
Text Below Tier
textApply text below the entire module/tier, if desired.
All Text White?
booleanCheck this box to set all text in the module to white.
Auto Repeat?
booleanCheck this box to infinitely loop through the auto type text string(s).
Typing Speed
numberSet the speed at which the module auto types the text.
Note: this value is in milliseconds
Reset After
numberSet the amount of delay or pause in between the end of one auto type text string and the beginning of the next.
Note: this value is in milliseconds
Cursor Color
colorSet the color of the "fake" cursor.
Note: The default is white, so the cursor may seem invisible if applied to a light/white background.
Cursor Width
numberSet the width or thickness of the "fake" cursor.
Note: This value is in pixels (px).