Skip to main content
Public page buttons

How to add buttons to your public page

Anni avatar
Written by Anni
Updated over a week ago

Buttons on your public page are useful for linking to other relevant web pages without displaying messy URLs.

This article covers:

Adding a button to your public page

Here's an example of how buttons appear 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 and the green button to

The code to create the blue button is:

<div class="view_button">

<a class="small button success" href=" "> Instagram</a>


​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="" 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>

πŸ’‘ The code must be in this order.

Once you've pieced together your button code, go to your Public Page and select Customise page from the top right-hand corner:

From here, scroll down and paste the code into your General information field:

Select Save header text when you have finished editing, and refresh the public page to see the result. ✨

πŸ’‘ To 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

Use emojis on your buttons πŸ’š

You can add emojis to your buttons, for example:

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=" "> Instagram</a>



<div class="view_button">

<a class="small button success" href=""> Facebook</a>


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=""style="margin-bottom: 10px;">Monday</a>

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

πŸ’¬ Any questions or feedback? There are two ways to get in touch:

Thank you! πŸ•Ί

Return to the top ⬆️

Did this answer your question?