HubSpot Assets Documentation

Layout
Interactive

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
Add Text Above Accordion
 rich_text

Add text that will display above the accordion module.

Choose Accordion Type
 choice

Two accordion styles available: single color and simple.

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.

Container Options
 number

Set an accordion container width (in pixels). Will fit in other container sizes when used in flexible columns or themes.

Border Bottom Position
 choice

Set a bottom border for each accordion section, either below all contents of the accordion section or below the title of the accordion section.

text-above-accordion
accordion-type
section-title
section-content
listing-options
expand-collapse
color-options
font-options
container-options
position
Layout
Layout
Layout

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.

Event Title
 text

Add a title for your event. Try to keep this title brief.

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.

Event Color
 color

Set an event color. This will be the background color for the event when populated on the calendar.

Calendar Colors
 color

Set a primary and secondary color for the module, which applies to the calendar table header, borders, etc.

add-event
event-title
type-of-event
repeater-event-frequency
event-start-end
event-color
calendar-color
Layout
Interactive

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
Feed Type
 choice

Select the type of YouTube feed you would like to pull videos from.

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.

Video Layout
 choice

Choose to display videos in a slider format or a grid format.

Additional Video Settings
 boolean

Determine which video display options to show (or hide), including:

Video Title

Video Author

Video Description

Truncate Video Description

Truncate Video Description at
 number

Choose the number of words to show in the video description before the description becomes truncated by ellipses.

Slide Display Styles (Optional)
 color

For module instances using the "Slider" display style, set the desired color of the indicator dots and navigational arrows associated with the slider.

Screen Shot 2023-07-22 at 3.31.08 PM
Screen Shot 2023-07-22 at 3.30.05 PM
Screen Shot 2023-07-22 at 3.29.11 PM
Screen Shot 2023-07-22 at 3.29.21 PM
Screen Shot 2023-07-22 at 3.29.29 PM
Screen Shot 2023-07-22 at 3.29.36 PM
Screen Shot 2023-07-22 at 3.05.08 PM
Layout
Layout
Layout

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.

Bar Thickness
 number

Set a page scroll progress bar thickness. The thickness is in pixel (px) units.

Note: This module is absolute positioned on the webpage, meaning it will be placed on top of existing content on your page. The thicker the bar, the more of the page/content it may cover.

Hide on Mobile
 boolean

Toggle "on" to hide the page scroll progress module on mobile devices (screens less than 800px wide).

page-scroll-progress__choose-position
page-scroll-progress__color-options-1 page-scroll-progress__color-options-2
page-scroll-progress__bar-thickness
page-scroll-progress__hide-mobile
Layout
Layout
Layout

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 Before Auto Type
 text

Set the text that should appear before the auto typed text string.

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).

Text Above Tier
 text

Apply text above the entire module/tier, if desired.

Text Below Tier
 text

Apply text below the entire module/tier, if desired.

All Text White?
 boolean

Check this box to set all text in the module to white.

Auto Repeat?
 boolean

Check this box to infinitely loop through 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

Cursor Color
 color

Set 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
 number

Set the width or thickness of the "fake" cursor.

Note: This value is in pixels (px).

auto-type-module__tier-id
auto-type-module__banner-heading
auto-type-module__text-before-auto-type
auto-type-module__text-to-auto-type auto-type-module__text-to-auto-type-2
auto-type-module__custom-class-auto-type-text
auto-type-module__text-above-auto-type-string
auto-type-module__text-below-auto-type-string
auto-type-module__all-white-text
auto-type-module__auto-repeat
auto-type-module__typing-speed
auto-type-module__reset-after
auto-type-module__cursor-color
auto-type-module__cursor-width
Layout
Interactive

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 

SEE IT IN ACTION

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.

WATCH THE TUTORIAL

Stylesheet URL
 text

The URL of the stylesheet for your Google Calendar.

See tutorial video in module documentation on how to edit the stylesheet for your Google Calendar.

WATCH THE TUTORIAL

Loading Spinner Color
 color

Set the color of the loading spinner that appears before the calendar is rendered on the page.

Screen Shot 2021-09-03 at 11.25.19 AM
Screen Shot 2021-09-03 at 11.25.44 AM
Screen Shot 2021-09-03 at 11.26.35 AM
Screen Shot 2021-09-03 at 11.27.16 AM
Layout
Layout
Layout

Social Share 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 Before Auto Type
 text

Set the text that should appear before the auto typed text string.

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).

Text Above Tier
 text

Apply text above the entire module/tier, if desired.

Text Below Tier
 text

Apply text below the entire module/tier, if desired.

All Text White?
 boolean

Check this box to set all text in the module to white.

Auto Repeat?
 boolean

Check this box to infinitely loop through 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

Cursor Color
 color

Set 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
 number

Set the width or thickness of the "fake" cursor.

Note: This value is in pixels (px).

position
position
position
position
position
position
position
position
position
position
position
position
position
Layout
Layout
Layout

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.

position
position
position
position
position