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 https://www.instagram.com/bookwhen/ and the green button to https://www.facebook.com/bookwhenhq/
The code 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 belowhref="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>
💡 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
 |
Green button
 |
Light blue button
 |
Grey button
 |
Orange button
 |
Red button
 |
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="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 on any screen:
💬 Any questions or feedback? There are two ways to get in touch:
For a quicker response, please contact us via live chat on our homepage or your account.
Or send us an email
Thank you! 🕺