Insert the Book Button Into the Menu Bar

Following on from the blog post ‘Why are you hiding your booking button?’, we’ve outlined the following tutorial, which walks through the steps  showing how to insert the Book Button into the menu bar of your WordPress or Squarespace Website.

Placing the button in the menu bar means that:

• the ‘Book Now’ or ‘View Schedules’ call-to-action (CTA) is visible on every page
• It is very visible
• People browsing your website won’t need to sift through pages if all they want to do is book

WordPress

1. Sign into your WP admin account
2. In the menu bar in the left, navigate to the ‘Appearance’ tab then select ‘Menus’
3. Click ‘Custom Links’ in the menu on the left hand side of the page
4. Enter the URL (http://m.fynder.io/?businessId=n) and the link text (e.g. ‘View Schedule’).  [Note: in the link, the ‘n’ must be replaced with your business Id, which can be found in admin.fynder.io > account settings > business Id]
5. Click ‘Save Menu’ on the right hand side of the page

Tip: make sure you have copied the Fynder widget script tag into the footer of your website; this means that the Fynder widget can be launch from any page on your website. (see script tag here: once again, replace n with your business Id)

<script src=’//m.fynder.io/fynder-loader.js’></script>
<script>window.addEventListener(‘load’, function() {fynder_loader.loader.parent(n)});</script>
<a class=’fynder-show-schedule’ href=’#’>View Our Schedule</a>

Squarespace

Before installing any book button, the script tag for the Fynder widget needs to be inserted into the html of the website header.

Below is the piece of code that needs to get placed into the header of the html. This can be done in your squarespace admin by selecting:

settings > advanced > code injection

paste the following code into the header and then select save.

Header code:

<script src=’//m.fynder.io/fynder-loader.js’></script>
<script>window.addEventListener(‘load’, function() {fynder_loader.loader.parent(n)});</script>

Paste the following link into any button you’d like within your squarespace site to launch the Fynder modal:

https://m.fynder.io/?businessId=n

To insert it into the menu bar

1. Hover over the navigation menu; two options will appear – ‘edit’ and ‘settings’
2. Clicking ‘edit’ will allow you to edit the links in the menu
3. Click the ‘+’ button next to ‘not linked’ and select the link option
4. Enter a link title (for example, ‘View Schedules’ or ‘Book Classes’)
5. Click the link ‘Click to add URL…’ and paste: https://m.fynder.io/?businessId=n
6. Click ‘Save’
7. Drag and drop the link (you have just created) into the main navigation section