SR Gated Content 01
This module renders a scroll-triggered popup modal with an optional image, a heading, a rich text description, and an embedded HubSpot form for lead capture.
Pick it over the offer bar modules when the interaction should be an overlay dialog that appears automatically at a configured scroll position rather than a static inline banner. It automatically skips display for visitors who already have an email on file in the CRM, and it needs a connected form to function.
Use cases
- Scroll-triggered lead capture popup
- Gated ebook download modal
- Email capture overlay for anonymous visitors
- Exit-intent style content gate
- Newsletter signup popup after scroll
Where it fits
- Included with: PRO
- Page sections: CTA, Form, Content
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| Background Video | File | Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Enabled | Boolean | |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Modal Open At % | Number | Set the percentage of the page where you would like the gated modal to pop up at. |
| Modal Image | Image | Recommended size: 228x288px. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Form
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | |
| Form | Form | |
| Send form notifications to specified email addresses instead of the form defaults | Boolean | |
| Email Addresses | ||
| Salesforce campaign | Salesforcecampaign |
Form › Styles
| Field | Type | Notes |
|---|---|---|
| Background Color | Color | |
| Text Color | Choice | Set to Auto to use the default text color. Set to Custom to set a custom text color. 15 options, including Auto, Primary, Secondary. |
| Text Color | Color | |
| Hide Field Labels | Boolean |
Form › Styles › Fields
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: Default, Custom. |
| Height | Number | |
| Background Color | Color | |
| Border Color | Color | |
| Size | Number | |
| Radius | Number | |
| Focus | Color | |
| Field Color | Color | |
| Placeholder | Color |
Form › Styles › Button
| Field | Type | Notes |
|---|---|---|
| Style | Choice | 25 options, including Primary, Secondary, Tertiary. |
| Size | Choice | Options: Small, Default, Large. |
| Align | Choice | Options: Auto, Left, Center, Right. |
| Full Width | Boolean |
Form › Styles › Padding
| Field | Type | Notes |
|---|---|---|
| Top | Number | |
| Bottom | Number | |
| Left | Number | |
| Right | Number |
Form › Styles › Border
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: Gradient One, Gradient Two, None, Solid, Dotted, Dashed, Double. |
| Color | Color | |
| Width | Number | |
| Radius | Number | |
| Top | Boolean | |
| Bottom | Boolean | |
| Left | Boolean | |
| Right | Boolean |
Form › Styles › Shadow
| Field | Type | Notes |
|---|---|---|
| Shadow | Boolean | |
| Horizontal | Number | A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. |
| Vertical | Number | The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box. |
| Blur | Number | The blur radius. The higher the number, the more blurred the shadow will be. |
| Spread | Number | The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. |
| Inset | Boolean | Changes the shadow to an inner shadow. |
| Color | Color | The color of the shadow. |
Style tab
Change log
| Version | Change |
|---|---|
| 3.0.0 | Stardust update |
| 2.1.2 | Added ability to set custom button styles |
| 2.1.1 | Added ability to use new HS form |
| 2.1.0 | Added responsive background options |
Pricing Comparison
Renders a heading and description, an optional monthly and yearly toggle with its own label and switch text, up to four pricing plan cards each with name, price, alt price, suffix, label badge, description, and up to two buttons, and below that a row-based feature comparison table of up to three categories with three features each and per-plan columns.
SR Offer Bar 01
This offer bar renders a two-column layout with an optional image on the left and a heading, rich text description, and an embedded HubSpot form on the right.