Nurture Den Embedding Guide

Nurture Den
Embedding Guide

This page will guide you through the simple process of integrating Bookaby into your own website, however you can also send your customers to your direct booking page at
https://bookaby.me/nurtureden

If you do not edit your website personally, you can send a link to this page to your web-developer.

Built your website using or ?
Check out our How-To for further details!

If you get stuck or would even like us to embed Bookaby for you (free of charge), just let us know at support@bookaby.co.uk

Integrated
Embedding

Standard

Basic
Embedding

Lite

Firstly you will need to include the following two lines of code on every page that you wish to embed into.
This would usually go in the <head> tag of your website.


            <script src="https://bookaby.co.uk/embed"></script>

            <script>const bookaby_mid = '6fa99bda-4ae6-491d-acaa-36b9f17ccaed';</script>

Note that the above code is specific to your account!

Now you can use any or all of the features below - it's up to you how integrated you'd like to go!

Quick Links...

A basic 'Book Now' button
Listing... Everything, Only Term Groups, Only Individual Sessions
Grouped Listings
Calendar Embedding
Filter by Venue
Custom 'Book Now' buttons
Adding a link to the basket
Adding Buttons for specific Sessions or Terms
Manually opening the modal

A basic 'Book Now' button

This will display a button (click it so see!) which when clicked will allow customers to book any upcoming sessions or terms.


            <div data-bookaby="button"></div>

If you would rather use your own buttons, it's simple...


            <button data-bookaby="button">Book Now</button>

If you would like to link to a specific term or session, check out the Advanced Usage section further down!

Listing all terms and individual sessions

Place the following code where you wish to output a list of everything that's currently bookable.
The basic styling of the listings have been designed to fit-in with the site in which they're embedded. It should look good out-of-the-box, but you can override styles as you wish.


            <!-- list all -->

            <div data-bookaby="list:all"></div> See what it looks like

            


                            <!-- 'Afternoon session' only -->

                <div data-bookaby="list:all~fb374906-4df2-4056-b1b1-33453189b2e6"></div> See what it looks like

                

                            <!-- 'Easter Holiday Club' only -->

                <div data-bookaby="list:all~a6a8c286-8bd0-4ad2-85c0-0e9a351d1607"></div> See what it looks like

                

                            <!-- 'Holiday Club' only -->

                <div data-bookaby="list:all~6a06bd70-005d-40f5-8b76-250573a149e7"></div> See what it looks like

                

                            <!-- 'Morning session' only -->

                <div data-bookaby="list:all~8305b962-862e-4a3c-b87f-863176456500"></div> See what it looks like

                

                            <!-- 'Standard Hours (full day).' only -->

                <div data-bookaby="list:all~be0b731e-b82c-4ac6-bb9f-71e8a6a96136"></div> See what it looks like

                

            
            

            Tip: You can specify multiple session type IDs separated by a commas.


            <div data-bookaby="list:all~ID_HERE,ANOTHER_HERE"></div>

Listing terms only

Place the following code where you wish to output a list of upcoming terms.
The basic styling of the listings have been designed to fit-in with the site in which they're embedded. It should look good out-of-the-box, but you can override styles as you wish.


            <!-- all terms -->

            <div data-bookaby="list:terms"></div> See what it looks like

            


                            <!-- 'Afternoon session' terms (goes off first session type) -->

                <div data-bookaby="list:terms~fb374906-4df2-4056-b1b1-33453189b2e6"></div> See what it looks like

                

                            <!-- 'Easter Holiday Club' terms (goes off first session type) -->

                <div data-bookaby="list:terms~a6a8c286-8bd0-4ad2-85c0-0e9a351d1607"></div> See what it looks like

                

                            <!-- 'Holiday Club' terms (goes off first session type) -->

                <div data-bookaby="list:terms~6a06bd70-005d-40f5-8b76-250573a149e7"></div> See what it looks like

                

                            <!-- 'Morning session' terms (goes off first session type) -->

                <div data-bookaby="list:terms~8305b962-862e-4a3c-b87f-863176456500"></div> See what it looks like

                

                            <!-- 'Standard Hours (full day).' terms (goes off first session type) -->

                <div data-bookaby="list:terms~be0b731e-b82c-4ac6-bb9f-71e8a6a96136"></div> See what it looks like

                

            
            

            Tip: You can specify multiple session type IDs separated by a commas.


            <div data-bookaby="list:terms~ID_HERE,ANOTHER_HERE"></div>

Listing individual sessions only

Place the following code where you wish to output a list of upcoming individual sessions.
The basic styling of the listings have been designed to fit-in with the site in which they're embedded. It should look good out-of-the-box, but you can override styles as you wish.


            <!-- all sessions -->

            <div data-bookaby="list:sessions"></div>  See what it looks like

            


                            <!-- 'Afternoon session' sessions -->

                <div data-bookaby="list:sessions~fb374906-4df2-4056-b1b1-33453189b2e6"></div> See what it looks like

                

                            <!-- 'Easter Holiday Club' sessions -->

                <div data-bookaby="list:sessions~a6a8c286-8bd0-4ad2-85c0-0e9a351d1607"></div> See what it looks like

                

                            <!-- 'Holiday Club' sessions -->

                <div data-bookaby="list:sessions~6a06bd70-005d-40f5-8b76-250573a149e7"></div> See what it looks like

                

                            <!-- 'Morning session' sessions -->

                <div data-bookaby="list:sessions~8305b962-862e-4a3c-b87f-863176456500"></div> See what it looks like

                

                            <!-- 'Standard Hours (full day).' sessions -->

                <div data-bookaby="list:sessions~be0b731e-b82c-4ac6-bb9f-71e8a6a96136"></div> See what it looks like

                

            
            

            Tip: You can specify multiple session type IDs separated by a commas.


            <div data-bookaby="list:sessions~ID_HERE,ANOTHER_HERE"></div>

Grouped Listings

If you'd like to group your listings by label, simply replace data-bookaby="list:..." with data-bookaby="list-grouped:..."


            <!-- list all -->

            <div data-bookaby="list-grouped:all"></div> See what it looks like

Calendar Embedding

Place the following code where you wish to output a calendar of upcoming individual sessions.
The basic styling of the listings have been designed to fit-in with the site in which they're embedded. It should look good out-of-the-box, but you can override styles as you wish.
The calendar will display individual sessions only. Terms must be shown in a list.


            <!-- all sessions -->

            <div data-bookaby="calendar"></div>  See what it looks like

            


                            <!-- 'Afternoon session' sessions -->

                <div data-bookaby="calendar~fb374906-4df2-4056-b1b1-33453189b2e6"></div> See what it looks like

                

                            <!-- 'Easter Holiday Club' sessions -->

                <div data-bookaby="calendar~a6a8c286-8bd0-4ad2-85c0-0e9a351d1607"></div> See what it looks like

                

                            <!-- 'Holiday Club' sessions -->

                <div data-bookaby="calendar~6a06bd70-005d-40f5-8b76-250573a149e7"></div> See what it looks like

                

                            <!-- 'Morning session' sessions -->

                <div data-bookaby="calendar~8305b962-862e-4a3c-b87f-863176456500"></div> See what it looks like

                

                            <!-- 'Standard Hours (full day).' sessions -->

                <div data-bookaby="calendar~be0b731e-b82c-4ac6-bb9f-71e8a6a96136"></div> See what it looks like

                

            
            

            Tip: You can specify multiple session type IDs separated by a commas.


            <div data-bookaby="calendar~ID_HERE,ANOTHER_HERE"></div>

Filter by Venue

You can filter listings by specifying the name of the venue.
Simply add a data-bookaby-venue attribute, with the name of your venue.
The search checks to see if the venue name starts with the value you provide, so supplying 'village', will return all venues who's name starts with 'Village' i.e. Village Hall, or Village Park. This filter is not case-sensitive.


            <div data-bookaby="list:all" data-bookaby-venue="village hall"></div>


            

            

            Tip: If you want to exclude a venue, prefix the name with !

            <div data-bookaby="list:all" data-bookaby-venue="!village hall"></div>

Custom 'Book Now' buttons

If you would like to have your own 'Book Now' buttons, add a data-button-regular attribute.


            <!-- default button label is 'Book Now' -->

            <div data-bookaby="list:sessions" data-button-regular></div>

            

            <!-- custom button label -->

            <div data-bookaby="list:sessions" data-button-regular="View Details..."></div>

Adding a link to the basket

If you would like to provide your customers a way to access their basket, place this code where you think your customers will see it.

It is not essential that you add this code as the customer can access their basket directly when booking, but it may be a nice recommended feature.


            <a href="#" onclick="return bookaby.show('basket');">

                <span class="bookaby-basket" data-suffix="in your basket">Loading...</span>

            </a>

This is a basic link. You can style it however you wish.

Advanced Usage

There's the facility to allow you to add buttons to your site that will link to specific terms or sessions.
Particularly useful if you would like to draw attention to an upcoming special event!

Adding Buttons for specific Sessions or Terms

Button snippets for currently bookable sessions...


                            <!-- Session: Holiday Club on Wed 23rd Jul 2025 at 09:00 -->

                <div data-bookaby="button:session=821364b6-5c2f-4309-b73c-c9422d21eb00"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 24th Jul 2025 at 09:00 -->

                <div data-bookaby="button:session=e58870f5-1808-4c80-9930-76ccee3e8c9f"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 25th Jul 2025 at 09:00 -->

                <div data-bookaby="button:session=46475fbc-de97-483c-b9cf-23879d77720d"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 28th Jul 2025 at 09:00 -->

                <div data-bookaby="button:session=a55baa52-064c-4c3e-9159-94ac3ca92435"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 29th Jul 2025 at 09:00 -->

                <div data-bookaby="button:session=8f5d8373-9351-412c-a099-e0b489efa84e"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 30th Jul 2025 at 09:00 -->

                <div data-bookaby="button:session=b42b2c00-a360-4b93-add3-fb383b53fefb"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 31st Jul 2025 at 09:00 -->

                <div data-bookaby="button:session=c1b5b9ce-aad4-45ff-a6bd-74ec3f777c21"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 1st Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=ebef12b5-a36c-4bcf-905e-30e54c6868e6"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 4th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=f0a55e78-c325-49ce-9e38-e15ad3957571"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 5th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=29d2b065-288d-4bb5-9089-2756a0d3bb99"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 6th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=b1938856-cf28-452f-9231-e82a2cde906a"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 7th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=abfcfb45-5f16-4f68-a3db-441ee756148a"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 8th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=28ee89e7-ead4-4c9c-a12d-c46295969578"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 11th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=57c4be10-30c2-496d-b7db-0c81c1a2118f"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 12th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=e712e886-6770-465d-b8de-432cb7c2297f"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 13th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=26018c11-553b-4ff5-afe3-f410b4ed1356"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 14th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=51b0bf9f-2dd1-482a-83be-e59a90714847"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 15th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=11b24e46-9b76-463f-9478-1623dc938d8d"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 18th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=6e61e1a9-577e-4966-be05-9d07a1b91885"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 19th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=c0fdf081-c770-4ec2-9b14-b76509096c4a"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 20th Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=ca5cc55b-b531-4326-9496-485e9cf8ddf6"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 21st Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=a8fe3510-04dc-4851-b473-f9399679ed1e"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 22nd Aug 2025 at 09:00 -->

                <div data-bookaby="button:session=3dedc24b-990e-435c-a25b-17fda43fbe06"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 27th Oct 2025 at 09:00 -->

                <div data-bookaby="button:session=aa98cd03-41e9-4895-80c7-6a3bd681d4b5"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 28th Oct 2025 at 09:00 -->

                <div data-bookaby="button:session=c90aee87-25c8-42d2-941c-e874a477dcc3"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 29th Oct 2025 at 09:00 -->

                <div data-bookaby="button:session=332838a1-9c1d-487f-90b1-fa4cf8d9e58d"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 30th Oct 2025 at 09:00 -->

                <div data-bookaby="button:session=683ea6a2-5e6b-4d0f-831c-83c481e32271"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 31st Oct 2025 at 09:00 -->

                <div data-bookaby="button:session=2f7de94e-f9b7-4b26-8543-3d7936ee72c8"></div> See it now...

Button snippets for currently bookable terms...


                                        You do not currently have any bookable terms.

Manually opening the modal

If you would like to open the modal yourself you can use the global bookaby.show function.


            bookaby.show('session', 'ID_HERE');

You can also link to 'all' to show all classes, or the 'shop', 'basket' and 'account' tabs.


            <button onclick="bookaby.show('basket')">View Basket</button>