Add Sticky buttons and a "Back to top" button to your Website Builder site

Want to improve the navigation of your website? Try adding Sticky buttons.

Sticky buttons are buttons that remain fixed in a visible position on the screen as users scroll through your site. Unlike standard buttons that move out of view as you scroll down a page, sticky buttons "stick" to a specific location, ensuring critical actions, such as "Email us," "Book," or "Contact Us," remain accessible at all times.

In Website Builder, you can easily activate Sticky buttons. Just go to your template settings, activate the buttons, and publish your site. The buttons and their linked actions will then become visible on the right-hand side of the screen on your published site.

You can also add a handy "Back to top" button that instantly takes visitors back to the top of the page - no matter how far they've scrolled down.

In this article, you'll find step-by-step instructions for how to add these buttons to your site.

• Step 1 - Add your contact details in your website settings
• Step 2 - Go to the template settings in your Website Builder
• Step 3 - Enable Sticky buttons
• Step 4 - Adjust the appearance of your Sticky buttons (optional)
• Step 5 - Enable the Back to top button
• Step 6 - Save and publish

Step 1 - Add your contact details in your website settings

Before adding the buttons to your site, please make sure that you've added all your main contact details to your website settings. The buttons will retrieve the necessary information from there, so if you want to use your main contact details and a piece of information is missing, the corresponding button will not function properly.

1. Go to the menu with the two horizontal lines in the upper right corner of the editor.
2. Click Settings in the drop-down menu.
3. Enter your phone number, email address and location (address) if you want to use all the buttons. If you would like to link to a booking page but haven't added one yet, you'll need to activate it using the Bookings tile in the menu on the left.
4. Click Done.

Step 2 - Go to the template settings in your Website Builder

1. Go to Template settings in the bottom right corner of the editor.
2. Click Sticky buttons in the floating menu that appears.

Step 3 - Enable Sticky buttons

1. Slide the Show Sticky buttons toggle to enable the buttons.
2. All buttons with attached information will be displayed by default. If you want to exclude a button from your site, click the three-dot icon and select Hide. The button will also not be shown if you haven't added information for it in your website settings.
3. To change the button text, click the three-dot icon and select Edit. You'll then see a text field where you can edit the button text.
4. If you want to use different information for a button, such as a custom phone number rather than the one in your website settings, you can also add this. Click the three-dot icon next to a button and select Edit. Then choose the Custom option in the next window and enter your desired information.
5. The buttons will be displayed vertically on the right side of your website. If you want to change the order in which they appear, you can drag and drop the buttons in the floating menu.

Once added, the buttons will not appear in the editor. However, you can see them in action in the Preview.

Step 4 - Adjust the appearance of your Sticky buttons (optional)

You can also change the position and style of your Sticky buttons.

1. Click on the Appearance tab in the floating menu.
2. Select the position of the buttons (top right, centre right, bottom right).
3. Select the style for your buttons. The options here will vary depending on whether or not you're using a colour theme on your site.
4. Slide the Include button text toggle on if you would like the button text to show as part of the icon when visitors hover over a button.

Step 5 - Enable the Back to top button

You can enable the Back to top button in the same place as the Sticky buttons.

1. Go to the Template settings in the bottom right corner of the editor.
2. Select Back to top in the floating menu.
3. Slide the Add Back to top button toggle on.
4. Choose the style that you want to use for the button.
5. Go to the Preview to see the button in action. If you scroll down a little, it will appear in the bottom right corner as a round button with an upward arrow inside.

It's not possible to add button text or change the position of the Back to top button.

Step 6 - Save and publish

Save and publish your site to make the buttons appear on your live website.

Related articles:

• Add and manage your site's contact details
• Getting started with Bookings in Website Builder