The Floating button banner displays a button that is always visible as the audience scrolls down the page. As it's very prominent it should only be used for very important, relevant links or as a Quick Exit button.
This component is available on landing pages. A similar component is available on standard pages and Easy Read pages, see Adding a Quick Exit Button.
On this page
- When to use a Floating button banner
- How to add a Floating button banner on a page
- See this live on the CMS Components Guide
When to use a Floating button banner
Do
- Use in an edge to edge section on landing pages.
- Use only 1 button banner on a page. Multiple button banners will confuse your audience.
- The button text should be clear and concise with a limit of 50 characters. Try to limit the button text to 2 to 4 words.
- Style the Floating button banner as a Quick Exit button if your page includes domestic violence information which:
- puts the reader at risk of abuse or retaliation, or
- shows they plan to escape a harmful situation.
- Quick Exit buttons should link to a neutral website.
- Use the alert (red) style when using the button as a Quick Exit button.
Don't
- Use the Floating button banner for general call to actions like newsletter subscriptions.
How to add a Floating button banner on a page
- Add an Edge to edge section to your landing page. This is the only section you can use to ensure the button banner works.
- Click to Add Block, + Create content block.
- Enter the details for your button banner.
- URL (mandatory): add a Link to another web page. Avoid linking to media files.
- Link text: the button text. Maximum 50 characters. Try to limit the button text to 2 to 4 words.
- Target: choose if the link will open in the same or a new window.
- Clear last entry of browser history checkbox: if you're using the button as a Quick Exit button you should tick this box, otherwise leave it unticked.
- Icon: you can choose to add a symbol from the icon library to your button.
- Contextual information: if the link title needs more detail, you can add more information about the content you're linking to in this field. Add clear and concise contextual information in sentence case.
- Button style: the default style is Primary Button (Dark). You can also select secondary or alert styles. Learn more about buttons.
- Click to Add block.
- Save layout to display the button. It should appear 'stuck' to the bottom of the browser window as you scroll the page.
See this live on nsw.gov.au
Check out Floating button banner to see how this works on a live page.
You can also see live examples of how agencies have applied this component to their content below:
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.