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 Mon 26th Oct 2026 at 09:00 -->

                <div data-bookaby="button:session=cae27a2d-6a02-42f8-a194-c14a802eca4b"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 27th Oct 2026 at 09:00 -->

                <div data-bookaby="button:session=0b04ecd2-c8db-4e48-b255-523d13aaa012"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 28th Oct 2026 at 09:00 -->

                <div data-bookaby="button:session=0584d386-11d8-4863-832f-d4d080b3d6e3"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 29th Oct 2026 at 09:00 -->

                <div data-bookaby="button:session=22fd5036-ba22-4750-8237-4258198265f6"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 30th Oct 2026 at 09:00 -->

                <div data-bookaby="button:session=02c7b5e4-ca95-4e7c-992a-42fffd1db69d"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 21st Dec 2026 at 09:00 -->

                <div data-bookaby="button:session=2b4dbac3-cc96-481f-a15b-b23fe5ca8afd"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 22nd Dec 2026 at 09:00 -->

                <div data-bookaby="button:session=91969741-bba3-44cf-bb36-25232fe10451"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 23rd Dec 2026 at 09:00 -->

                <div data-bookaby="button:session=d042aa6d-8e16-4786-9988-6e8b88f3d97f"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 15th Feb 2027 at 09:00 -->

                <div data-bookaby="button:session=882a06bb-ae53-43a3-810f-2697957b89b7"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 16th Feb 2027 at 09:00 -->

                <div data-bookaby="button:session=1fc3068b-917e-4e6f-b89a-0134783b3407"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 17th Feb 2027 at 09:00 -->

                <div data-bookaby="button:session=fe8ba39c-1f02-4851-b745-16e3cc051b63"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 18th Feb 2027 at 09:00 -->

                <div data-bookaby="button:session=e5878702-e68f-4ff6-8dba-695022957c9d"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 19th Feb 2027 at 09:00 -->

                <div data-bookaby="button:session=e72ae2e9-018d-4b15-80d2-16fe2b8eb66e"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 30th Mar 2027 at 09:00 -->

                <div data-bookaby="button:session=b6626b26-2352-4e73-93f0-9528307a98b1"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 31st Mar 2027 at 09:00 -->

                <div data-bookaby="button:session=2a59eada-82d2-4940-ae67-b8f06e7c3f9a"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 1st Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=f830bb8e-50c2-47e5-88e5-277ca3030fee"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 2nd Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=bc69ad87-e229-4800-ad38-2e56bf96b8c8"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 5th Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=d752f3e7-3900-4e77-a969-1370bf4b6dbc"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 6th Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=002e811b-382f-46ae-8f46-91a85be1ca3d"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 7th Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=16120d4a-994b-4be5-9b8e-1dce8c423fa1"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 8th Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=48d08d5d-49e7-49cb-ac04-cf2ea3b1fe0d"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 9th Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=e8da8116-db4d-4fc5-b0f1-f7f09fa2f52c"></div> See it now...

                

                            <!-- Session: Holiday Club on Sat 17th Apr 2027 at 09:00 -->

                <div data-bookaby="button:session=78ce3c59-dab4-450f-8675-701ce2f052d4"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 1st Jun 2027 at 09:00 -->

                <div data-bookaby="button:session=c68ee691-84fa-49ad-8a39-dad94a2aa8f4"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 2nd Jun 2027 at 09:00 -->

                <div data-bookaby="button:session=8ee6198a-a764-44dd-bc08-6b5cf77ab8b4"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 3rd Jun 2027 at 09:00 -->

                <div data-bookaby="button:session=d1d3f015-444c-4837-b524-047c4956e085"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 4th Jun 2027 at 09:00 -->

                <div data-bookaby="button:session=4942d0cc-ad06-4830-a4ad-c4a247e0a7f9"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 26th Jul 2027 at 09:00 -->

                <div data-bookaby="button:session=240d0fc8-e3f2-4ffd-9fe0-0b96bc47a52e"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 27th Jul 2027 at 09:00 -->

                <div data-bookaby="button:session=cd01513e-4591-4dda-8365-a7be85c28b76"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 28th Jul 2027 at 09:00 -->

                <div data-bookaby="button:session=d8f6e897-56db-4084-b59e-2077d9d10534"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 29th Jul 2027 at 09:00 -->

                <div data-bookaby="button:session=b3ff7a82-d32d-42bb-bb8e-c723b815b8de"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 30th Jul 2027 at 09:00 -->

                <div data-bookaby="button:session=7bef6fa8-91f9-4b16-a5c6-ce369d91e675"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 2nd Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=a9eee846-aff0-4a0e-a6f2-97b5f96f0c58"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 3rd Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=94bde85b-15b5-4f2a-a2ee-2973ff6e799b"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 4th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=7b8947ee-9737-4f63-894b-fb4a3cf84ebf"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 5th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=4563c5b3-b28d-43c8-b947-b9bd050afb67"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 6th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=b8f9e0ab-8d5c-44ad-8334-920a2edfe647"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 9th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=5fe8c049-4f2c-4e78-ad92-32c34eb18447"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 10th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=27529edd-ae68-45c1-9e93-a80dbe25b3e4"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 11th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=78f300ce-93bb-400b-88ba-ed5c5745ede9"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 12th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=2471f226-f4b2-4c9d-a776-e7e57eb96af1"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 13th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=2233b625-bc9b-4359-bce0-87276751c87a"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 16th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=2ff7e938-85ee-4a32-a906-7b091232098e"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 17th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=5918b85f-8736-419c-802d-e76bb28dd698"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 18th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=a31c0881-9fb2-4ba9-ac71-7c14c329effe"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 19th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=fdbe40e5-8147-42a0-a114-c4e475a650bc"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 20th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=6179e597-9c4b-48d2-a309-5a921596b217"></div> See it now...

                

                            <!-- Session: Holiday Club on Mon 23rd Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=28eebbe0-e293-4774-a4e6-6adcc6c0d04a"></div> See it now...

                

                            <!-- Session: Holiday Club on Tue 24th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=df804328-78a8-47a0-8648-f860ea785e79"></div> See it now...

                

                            <!-- Session: Holiday Club on Wed 25th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=4022496e-1df7-4f93-a01e-efa5ae73b40c"></div> See it now...

                

                            <!-- Session: Holiday Club on Thu 26th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=0051505e-3cc0-46b8-a5db-1b65f7ed465b"></div> See it now...

                

                            <!-- Session: Holiday Club on Fri 27th Aug 2027 at 09:00 -->

                <div data-bookaby="button:session=ae6ce3f5-ea50-48f4-a190-2d3f4ee17608"></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>