HubSpot module documentation
Extended Button
A button that does more than link out. It can smooth-scroll to a section on the same page, or open a popup containing either a message or a HubSpot form. Every dimension, colour and corner is a setting.
Install it
- Buy and install from the Extended Button listing.
- In the page editor, drag Extended Button into your layout.
Set up the button
Under Button in the Content tab.
| Field | What it does |
|---|---|
| Type | Link button for a plain link, or CTA to use a HubSpot CTA. |
| Label | The text on the button. |
| Link | Where it goes. To scroll to a section on the same page, enter an anchor such as #pricing; the module scrolls smoothly rather than jumping. |
| Additional Scroll value | Nudges the scroll stop by this many pixels. Use it when a sticky header covers the top of the target section; a value around the header's height is usually right. |
| CTA | The CTA to render, when Type is CTA. |
| Custom Class Name | An extra CSS class, if you are styling it yourself. |
Match the button to the rest of your site
Under Styles, Button Styling, Size. Added September 2026 after buyers asked for it; before that the label size and padding were fixed at 16px and 12px.
| Field | Default | Notes |
|---|---|---|
| Label size | 16px | The font size of the button text. |
| Padding, top and bottom | 12px | Vertical padding inside the button. |
| Padding, left and right | 12px | Horizontal padding. Raise this for a wider button without changing the text. |
| Minimum width | 0 | Set the same value on several buttons so they come out the same width regardless of label length. 0 lets the label decide. |
| Stretch to full width | off | Makes the button fill its column. Useful in narrow layouts and on phones. |
The defaults reproduce exactly how the button looked before these controls existed, so updating the module does not move anything on your live pages.
To copy your theme's buttons, read the label size and padding off an existing button with your browser's inspector, then enter the same numbers here.
The popup
Turn Enable Popup on in the Content tab, then fill in Popup Content.
- Type: Copy for a message, Form to embed a HubSpot form.
- Content (when Type is Copy): Title, Description, an Icon (success, error, warning, info or question), and the Button Text that dismisses it.
- Form Content, Title and Form, Form (when Type is Form): the heading above the form, and the form itself.
Style the popup under Styles, Popup Settings: background and content colours, a minimum Width for desktop, the Confirm Button colours and corner radius in both default and hover states, and Show Close Icon.
The popup library and the HubSpot forms script only load when Enable Popup is on, and the forms script only when the popup type is Form. A page using the button without a popup loads neither.
Style it
- Styles, Alignment: where the button sits in its column.
- Styles, Spacing / Padding: space around the button, separate from the padding inside it.
- Styles, Button Styling, Default State and Hover State: label and background colours for both.
- Styles, Button Styling, Set Border Radius: turn on, then choose Border Radius Configuration. By Predefined values gives Default, 10, 20 or Rounded; Manual configuration takes an exact number.
Common questions
The button is a different size from the rest of my buttons.
Use Styles, Button Styling, Size. Set Label size and the two padding values to match your theme, and use Minimum width if several buttons need to come out equal. Before September 2026 these were fixed, so update the module from the marketplace if you do not see the Size group.
The scroll lands too far down and the heading is under my header.
Raise Additional Scroll value in the Button group to roughly your sticky header's height.
The form does not appear in the popup.
Check that Popup Content, Type is set to Form and that a form is selected under Form, Form. The forms script only loads when both are true.
Support
Email support@freelopers.com. We answer in English, Monday to Friday, 10:00 to 17:30 CET.
Please include the page URL, your browser and device, and the steps that reproduce the problem. Please do not send passwords or API keys.