Square Space Website Integration

For integrating book now buttons into your website on square space please watch the video and follow the steps below:


1. Connect to a browser and open 3 different tabs


2. F irst select your button design on the button generator website

  • Select your design on the left side
  • Adjust colors to match your website design (in the middle)
  • Change test and size of button (on the right)
  • Press the Get CSS button in the middle to copy the CSS for your website.

3. Paste the CSS button code into your Square Space Website

  1. Login to the back-end of your square space website
  2. In the Main Section on the left navigation bar press the Design tab
  3. Then press Custom CSS
  4. Paste code into the bottom of the CSS Box and press save.

4. Go Back to your Square Space back-end home page and press Settings tab

  • Then press Advanced

  • Then Press Code Injection

  • In the Header Section, paste the code below in

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src='https://widget.adventurebucketlist.com/js/jquery-button.js'></script>
<script type="text/javascript">
  jQuery(document).ready(function($) {
      $('a.activity-button').activityWidgetButton({ merchant:
'
2a4e3ef0888c79d018ead8c532e3fa5df962e95dcfdsffsf3d33dcce563 ab177eee5623fb252515df59f3b15df1c8557af4181cf1d86c099f52abc36b312' })

   });
</script>

  • Now go to you Adventure Bucket List Dashboard and select Online Sales.
  • Then select Book Now > Choose the activity you want to list first and select Get Code.
  • Go to the bottom box, that reads: Add Javascript Code into your Website copy that code and replace the section with bolded code above with your unique code.
  • Make sure the code has your Javascript code entered and press SAVE.

5. Place the Book Now Button On Your Website

  • On the back-end of your Square Space website press the Pages tab on the right navigation bar.
  • Then select the page you would like to place the button.
  • Once on the page, press edit and click the little black circle on the right hand side and select the code Icon (</>) when it pops up.
  • On the Adventure Bucket List Dashboard in the same page from Step 4, copy your activity ID from the Add HTML to your website section. And paste it in the code below where it says ACTIVITY ID.

<a data-activity='ACTIVITY ID' class='activity-button myButton'>Book Now</a>

  • The code should look like this when done (but with your unique activity ID):                                            <a data-activity='55dce6c4f8389524156a3338' class='activity-button myButton'>Book Now</a>

  • Once you have placed the code with your unique Activity ID into the code section, press Apply.
  • Make sure to save your new page and you are good to go!

Congratulations! You are now fully integrated with payment processing.
Please contact support@adventurebucketlist.com if you have any issues.