Skip to main content
All CollectionsEvents, Schedules & Public PagesPublic Pages
Adding filter buttons to your public page
Adding filter buttons to your public page

Create clickable buttons to guide your customers to a filtered list of events

Anni avatar
Written by Anni
Updated over a week ago

Filter buttons are a great way to help your customers narrow their search for an event.

πŸ’‘ Please note: Before you can create the button, you will need to have created your filtered links.

This article covers:


How to create a link

We have created a Google Sheet to help you construct filtered links and filter buttons. Open the Google sheet, select Make a copy and follow the instructions.


​

If you prefer to construct the filter button manually, please follow the below steps. πŸ‘‡


Creating your filter buttons

How the use of buttons can appear on your public page:

πŸ’‘ Please note: Each button needs a place to link through, i.e. an event or website. Otherwise, the button will be for display-only purposes.


The code

An example of the code you need to enter to create a button is:

<div class="view_button">

<a class="small button success" href="https://bookwhen.com/grow?tags=grow"style="margin-bottom:10px;">Grow Classes</a>

</div>


​Broken down:

The button shape:

class="view_button">

The button colour:

(more colours found below)

<a class="small button success"

Your filtered link:

The text on your button:

>Grow Classes</a>

  • So you could, for example, change this to >Online Classes</a>

Adds space after your button:

style="margin-bottom: 10px;"

  • So that any additional buttons you add don't run together on mobile devices.

πŸ’‘ Please make the following edit(s) if you are using the '&' symbol in tags:

  • The '&' symbol should be entered as '%26':

For example, instead of:

"tags=Information&Support"

Use:

"tags=Information%26Support"

✨ Learn more about tag editing here.



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:

✨ Learn more about using Emojis here.


Adding the buttons to your page

Once you've created your button code, open your Public Page:

Select Customise page in the top right-hand corner. Then, scroll down to paste the code into the General information field:

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

  • You can also use buttons to link to other links (not just your filtered link within Bookwhen). This could be your website, etc.

Remember to save your settings using the Save header text button after you have finished, and refresh the public page to view the result!


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

Thank you! πŸ•Ί

Return to the top ⬆️


​


Tags: publicpage

Did this answer your question?