All Collections
AGENDA
AGENDA: User Guide
Integrate Booking Buttons & Calendar into your WordPress Website
Integrate Booking Buttons & Calendar into your WordPress Website

This tutorial will give you the steps to integrate booking buttons and widgets into your Word Press website via our Word Press Plugin.

Blake Pridham avatar
Written by Blake Pridham
Updated over a week ago

There are 12 quick steps to go live with Adventure Bucket List's booking buttons/widgets on your WordPress website. View the video below and/or follow the step by step instructions:

1. Login to the backend of your WordPress website.

2. Select the plugins tab on the left navigation and click Add New. Then search “Adventure Bucket List”. Here is a direct link to the plugin page:  https://en-ca.wordpress.org/plugins/adventure-bucket-list/

3. Click Install Plugin and press Activate.

4. Once activated, you will see a new tab pop-up on the left side called ABL Buttons. Click the ABL Buttons tab. Here you will see two sections, one for the public key where you put your AGENDA account’s merchant ID and the second one for your buttons CSS (the design).

5. Next step is to login to your ABL account, select the Get Code tab on the left-hand side. Choose an activity and click the get code section. 


6. Scroll to the bottom area that says Add Javascript code into your web page and copy the merchant ID within that section. (See attached screen shot)

7.  Paste the merchant ID into the Public Key Section of the ABL WordPress plugin.

8. Next step is to design your button css. If you already have a button class on your website, you can skip this step but if not, we recommend using a free button design website called CSS Button Generator: http://css3buttongenerator.com/

Design your button, then copy your css code and paste it into the Add Custom CSS section of the plugin. Once that is done, press save changes.

9. Now it is time to put your buttons on the corresponding part of your website. To do this, you will need to go to the page you want to add the button and press edit. Click the text section on the right-hand side. There are 4 main integration types to choose from listed below (the code is bolded below the title):

  1. Book Now Pop-Up Button (All Events):
    [abl-button label="Button Name" activity="activityID" style="your CSS button class"]

  2. Redirect Link (One Activity):
    [abl-redirect label="Button Name" activity="activityID" style="your CSS button class" ]

  3. Redirect Link (All Activities): 

    [abl-redirect label="Button Name" style="your CSS button class" ]

  4. Embedded Calendar with all events:
    [abl-calendar type="embedded" id="e1" width="100%" height="1200px"]

10. Copy the desired button/widget code above^ into your Word Press page. 

11. If you want to use integration option 3 or 4, you can skip to the next step. If you are using option 1 or 2 continue with this step. Next, you will need to go back into the get code section of your Adventure Bucket List account, select the desired activity from the drop down and then copy the activity ID located in the Add HTML code section right (see screenshot below) and paste it where it says activityID in the code.

12. Last steps are to edit the button name within the quotations after it says label = ' (we recommend naming the button Book Now) and make sure the code you copied from step 8, is pointing to your CSS button class, which is in the part called style=. (If you used our recommended button generator website from step 7 of this tutorial, your class is called “btn”).

13. Once you are done editing, click the update button and then you can preview the changes to see everything live.

That's it! You have successfully integrated your booking buttons into your WordPress website. If you would like to add more buttons, repeat steps 8-12 for each activity button you want to add. 

If you have any issues, please contact support@adventurebucketlist.com

Did this answer your question?