The Floating button banner displays a button that is always visible as the audience scrolls down the page. This component is available on landing pages. For use on Easy Read or standard pages, please refer to Adding a Quick Exit Button.
Use a Floating button banner for urgent matters only
The Floating button banner button is only for urgent matters such as quick exits or emergency advice. For example, domestic abuse quick exit click to another website or people in emergency situations like floods or fires that need to dial 000.
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
- Only available for use on landing pages in an edge to edge section
- Limit of 1 button banner per page. Multiple button banners will confuse the audience
- The button text should be clear and concise. Limit of 50 characters. Try to limit the button text to 2 to 4 words
Don't
- 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.
- Click on Call to Action.
-
Enter the details for your button banner.
-
URL (mandatory): add a Link to another page, content (internal page) or Managed link (external page). Avoid linking to items in the media library.
-
Link text: the button text. Maximum 50 characters. Try to limit the button text to 2 to 4 words.
-
Icon (optional)
-
Contextual information (optional): add clear and concise contextual information to the button banner. Use 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 on this article, submit a request via the webform.