Skip to main content

Outfitter Onboarding: Adding Brindlechute Web Plugin to your website

This article guides outfitters through installing the Brindlechute web plugin by adding scripts to the website’s <head> section and configuring booking flow modals for seamless web integration.

Instructions

  1. Install the Script in the <head> section of your website file

    1. Dev/Testing Script <script src="https://home.brindlechute.live/brindle-embedded.js"></script>

    2. Production Script <script src="https://home.brindlechute.com/brindle-embedded.js"></script>

  2. When the script loads correctly, we print a message to the console, like so:

  3. We inject a global called brindlechute, with the following methods to trigger the booking flow modals

    1. Note: Ids are pulled from your test data, we can drop in your real ids when we go on prod environment.

    2. Example calls

      1. // Opens modal for all groups

        brindlechute.openAllGroupsModal(1001)
        ​

        // Open modal for group "Trip group test"
        brindlechute.openGroupModal(1001,77)
        ​

        // Open modal for experience "Half Day float"
        brindlechute.openExperienceModal(1001,1091)

  4. You will want to add these calls to the event triggers from buttons on the website. For example, if you have "book now" and it's on the Half day float page then you'll trip that experience's modal call. Whereas, a general button may do the All groups modal trigger.

Helpful Notes about Web Integration

Most controls are configurable on the backend under the Outfitter organization:

  • Outfitter can go to calendar and click online settings to:

    • Control blackout dates

    • Control request to book vs. instant booking and timing (article work in progress)

    • Add slot availability (article work in progress)

  • Experience Groups are used to show groups in the web booking widget see more here (article in progress).

Squarespace integration

Step #1 - Add the script

  1. Login to your squarespace and prepare to inject the Brindlechute JS snippet into your Head section

  2. Go to the code injection panel - https://[INSERT_DOMAIN].squarespace.com/config/pages/website-tools/code-injection

    1. You can see Squarespace's help article here - https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection

  3. Inject the Javascript Production Script
    <script src="https://home.brindlechute.com/brindle-embedded.js"></script>

  4. Go to website and open dev tools and open console and you'll see we confirm! You're good to move on to Step #2

Step #2 - Add a button and trigger the web widget

  1. Go back to your Squarespace editor

  2. Add a button where you'd like to have people initiate the booking flow

  3. On that button open the editor

  4. Then edit the link and enter in the following code

    1. href="#" onclick="event.preventDefault(); Then add your Brindlechute modal call that you desire brindlechute.openExperienceModal(13808,13959);"

    2. Ensure that the open in new tab is toggled off

    3. Save

  5. Boom! You just wrote a custom button on your site that launches Brindlechute web widget.

Did this answer your question?