Buttons on your public page are useful for linking to other relevant web pages without displaying messy URLs. They provide a clean and user-friendly way for customers to navigate to additional resources or pages related to your events.

This article covers:

Adding a button to your public page
Different button colours
Additional formatting options

Adding a button to your public page

Buttons display at the top of your public page, in the General information area. For example:

Public page with an arrow pointing at a blue 'Instagram' button

Linking buttons to relevant pages

Each button needs a destination URL to link through to, so make sure you have the correct URL ready.

Instagram: https://www.instagram.com/bookwhen/
Facebook: https://www.facebook.com/bookwhenhq/.

Understanding button code

Each button code can be broken down into sections. Here's an example of the code used to create a blue Instagram button:

<div class="view_button">

<a class="small button success" href="https://www.instagram.com/bookwhen/ "> Instagram</a>

</div>

Let's break that down:

class="view_button": This defines the button's shape.
<a class="small button success": This defines the button's colour; you can replace this with another colour.
href="https://www.instagram.com/bookwhen/": This is the link the button will direct to.
>Instagram</a>: This is the text displayed on your button. For example, you could change this to >Visit our website</a>.

💡 Important: The code must be in this specific order to work correctly.

Where to add the button code

Once you've created your button code:

Open your Scheduling page and select View public page to open your public page:
Select Customise page from the top right-hand corner:
Scroll down and paste the code(s) into the General information field:
Select Save header text when you have finished editing, and refresh the public page to view the result.

💡 Important: When pasting the button code into the page field, ensure you're not pasting any formatting from another tool (e.g., Microsoft Word). To avoid unwanted formatting, we recommend using the 'Paste and Match Style' option. This ensures the code remains clean and functions as intended.

Different button colours

You can choose from the following button colours:

Blue
Green
Light blue
Grey
Orange
Red

The codes for each colour:

Blue button	`<a class="small button"`
Green button	`<a class="small button success"`
Light blue button	`<a class="small button info"`
Grey button	`<a class="small button secondary"`
Orange button	`<a class="small button warning"`
Red button	`<a class="small button alert"`