When a button is set to fixed position, it sticks at the bottom of the visitor's screen and remains there as the visitor scrolls up and down a page. Use fixed position buttons to drive conversions, such as inviting prospects to book an appointment, call you, buy products, or anything else that you can think of.
Enabling fixed position
You can set buttons to fixed position on the following modules:
Using the Scheduling button
Please note that using the Editor's built-in Scheduling feature - and the Scheduling button - requires an add-on subscription. Reach out to your digital services provider for more information.
On the module, find the Fixed position toggle in Design > Button > General. Once toggled on, you can pin the button at either the bottom right, bottom left or bottom center of the screen.
When a button has been set to fixed position, it will stick on the screen in the Editor, in preview mode, and on the published website.
Fixed position button on a single page
If you want a fixed position button to appear on a single page on your website, make sure to insert the module in the body part of the page (meaning not in the header or footer).
It doesn't matter where on the page body it is inserted - it will show up and stick regardless. The only exception to this is if you have added an animation on the button, in which case the animation will trigger when the button is rendered in the website's HTML. For example, if you have added a button to the fifth row of your website, set it to fixed position and added an animation, then it won't show until the visitor reaches the fifth row in their browser window.
Accessibility tip
While a fixed button shows up no matter where it is inserted on a page, it's a good idea to take into account the button's location in the website's HTML document, especially if you are serving visitors who rely on assistive technologies. A screen reader, for example, reads a webpage's HTML document from top to button and will announce the existence of your fixed position button at the place on the page where it was inserted.
Therefore, if you want screen readers to announce your fixed position button early on, make sure to insert it towards the top of the page. Similarly, if you want it to be announce later, insert the button towards the end.
Fixed position button on all pages
If you want a fixed position button to appear on all of your pages, make sure to insert the module in the website header or footer.
Accessibility tip
If you want assistive technologies such as screen readers to announce the fixed position button early on, make sure to insert it in the header. Similarly, if you want it to be announce later, insert the button in the footer.
Examples of use
For inspiration, here are a few ways to apply fixed position buttons on websites.
Animated "book now" button
Subtly nudge visitors towards booking an appointment by setting an animation on a fixed position Scheduling button.
How to set it up:
- Add a Scheduling button module in your header or top row and toggle Fixed position.
- Set Button position to either Bottom right or Bottom left.
- (Optional) Consider adding a bit of opacity on the button background color to make it appear less intrusive.
- Add an animation on the button and adjust speed and delay to your liking.
Mobile-only full-width banner
Turn a button into a full-width, sticky banner that makes it easy for mobile visitors to engage while browsing the website.
How to set it up:
- Add a button module and toggle Fixed position.
- Set Button width to 100%.
- Remove any margin on the button (all four sides should be set to 0).
- Center-align the text on the button.
- Hover the button module label and set it to only show on mobile.
Icon-only blob shape sticky
Create a blob shape containing only an icon to encourage visitors to perform an action. It could, for example, be adding a shopping basket icon and linking the blob to your online shop page.
How to set it up:
- Add a button module and toggle Fixed position.
- Set Button position to either Bottom right or Bottom left.
- Remove any text on the button.
- Link the button to any destination, for example an internal page on your website.
- Select an icon that matches your use case.
- In Design > Icon, set the size of your icon.
- In Design > Button > Border, set border radius to 100 on all sides.
- In Design > Button > Background, adjust the button size left and right padding until you're happy with the shape of the blob.