Buttons on your public page are handy when you want to direct your bookers to other web pages relevant to your business, such as your Facebook or Instagram page but don't want to paste the URL link, which can look messy.

For those who have multiple public pages, you can link these together through the buttons on your public page, so your bookers have easy access.

This article covers:

If you would like to create filter buttons for your Bookwhen page, see this help article.


Adding a button to your public page

Here's an example of how buttons would look when added to the page description of your public page:


Each button needs a place to link through to, so be sure you have the URL ready to go.

In the examples above, we have linked the blue button to https://www.instagram.com/bookwhen/ and the green button to https://www.facebook.com/bookwhenhq/

The code you would enter to create the blue button is:

<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 is the button shape

  • <a class="small button success" this is the button colour; you can replace this from the list of button colours below

  • href="https://bookwhen.com/" this is the link you'd like the button to lead to

  • >Bookwhen website</a> this is the text on your button.

    • So you could, for example, change this to >Visit our website</a>


Once you've pieced together your button code, go to your Public Page --> Page Setup, scroll down and paste the code into your General information field:

Make sure you remember to save your settings after you have finished, and refresh the public page to see the result 😊

Note: When pasting the button code into the page field, please ensure you're not pasting any formatting across from another tool (e.g. Microsoft Word). To ensure no unwanted formatting is included, we recommend pasting it as 'Paste and Match style'.


Different button colours

Below is a choice of button colours you can use on Bookwhen:


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"


Additional formatting options

Using Emojis on your buttons

You can add emojis to your buttons, like in this example:

More info on using Emojis is here.

Spacing your buttons:

You can use the code </p> to create a line break if you want to stack your buttons vertically.

For example:

<div class="view_button">

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

</div>

</p>

<div class="view_button">

<a class="small button success" href="https://www.facebook.com/bookwhenhq/"> Facebook</a>

</div>

Making your buttons mobile friendly

You may find that if you have multiple buttons, they don't wrap/stack nicely on a smaller screen, like in the example below:

To avoid this issue, add the following line to your button code:

style="margin-bottom: 10px;"


For example:

<div class="view_button">
<a class="small button success" href="https://bookwhen.com/jenniferzsigo?entry=1ndw37z2jk48"style="margin-bottom: 10px;">Monday</a>
</div>

The result should see your buttons spaced out nicely on any screen:

Did this answer your question?