Filter buttons can be a really great way to help your customers narrow down their search for a class or event. Before you can create the button, you will need to have created your filtered links. You can read how to do that here

Creating your filter buttons

Here's an example of how the use of buttons created with HTML can look on your public page:


Each button needs a place to link through to. In this example, filtered links have been created by entry. The link for the 'Monday' button is https://bookwhen.com/jenniferzsigo?entry=1ndw37z2jk48 which is the link for the entry that holds all the Monday time slots.

The code you need to enter to create this button would be:

<div class="view_button">
       <a class="small button success" href="https://bookwhen.com/jenniferzsigo?entry=1ndw37z2jk48">Monday</a>
     </div>


Lets 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 below

href="https://bookwhen.com/jenniferzsigo?entry=1ndw37z2jk48" this is your filtered link

>Monday</a> this is the text on your button. So you could for example change this to  >Yoga Classes</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:

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

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


You can also use buttons to link to other links, not just within Bookwhen.



Selecting your filter button colour


<a class="small button" 

<a class="small button success"

<a class="small button info"

<a class="small button secondary"

<a class="small button warning"

<a class="small button alert"

Using Emojis on your filter buttons

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

More info on using Emojis here.

Making your buttons mobile friendly

You may find that if you have a large list of filter buttons, they don't wrap well on a smaller screen like a mobile, like in the example below:

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

style="margin-bottom: 10px;"


Like this:

<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?