We have two options for integrating Retreat Booking Guru with your website. If you are using Wordpress to manage your site, we recommend that you use our Wordpress plugin, which is available through the Wordpress plugin repository.   See How do I integrate Retreat Booking Guru on my Word Press website?

For Non-Wordpress websites:

We offer two embeddable views that you can integrate into your website. These include a listing of programs, and a table of programs.

Basic setup to display a listing of programs

Copy and paste the following code on one of your site pages (where you’d like to list your programs). Make sure to replace 'yourdomain' with the sub domain from the url associated with your retreat booking guru install.

i.e. https://yourdomain.secure.retreat.guru

<div id="rbg-connect"></div>
<script type="text/javascript">
rbgOptions = {
    retreatType: "Retreat",
    customer: "yourdomain",
    buttonColor: "",
    defaultRoute: "",
    font: "Lato",
    highlightColor: ""
};
! function() {
    function t() {
        var t = document.createElement("script");
        t.type = "text/javascript", t.async = !0, t.src = "https://s3.amazonaws.com/rbgconnect.retreat.guru/public/rbg-connect.min.js";
        var e = document.getElementsByTagName("script")[0];
        e.parentNode.insertBefore(t, e)
    }
    window.attachEvent ? window.attachEvent("onload", t) : window.addEventListener("load", t, !1)
}();
</script>

Adding a loading spinner animation

You can also add a simple spinning loading animation that displays before the program list load. This way the user feels like the page loads very quickly.
Simply put the loading spinner HTML and CSS in the main content section of the snippet.

<div id="rbg-connect"></div>

Replace the above code in the snippet with the following.

<div id="rbg-connect">
    <div style="margin: 0 auto;" class="loader"></div>
    <style>
        .loader {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }
       
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</div>

Example:


Basic setup to display a table of programs

If you want to display a table of programs, remove the

id="rbg-connect"

and add

class="rbg-table"

to the div element.

Then change rbgOptions to the following;

...
rbgOptions = {
    customer: 'mydomain',
    font: 'Open Sans',
    color: '#666',
    highlightColor: '#FF9800',
    registerLink: 'Rooms, Availability and Bookings',
    retreatType: 'Lesson',
    tableSettings: {
        title: true,
        dates: true,
        customFields:['Custom Field 1', 'Custom Field 2'],
        teachers: true,
        moreLink:true,
        location:true,
        prices:true,
        price: true,
        spaces: true,
        spacesWords: true
    }
};
...

Inside of rbgOptions is a tableSettings option. In the example above, we included every column that is available. If you do not want to include the column, remove it from the tableSettings object.

Note: customFields should contain an array of Extra Display Field titles. For example, if you created an extra display with the Title "Breakfast included" and the Content "Yes", and you would like to display it in the table, your tableSettings would look like this:

...
rbgOptions = {
    customer: 'yourdomain',
    font: 'Open Sans',
    color: '#666',
    highlightColor: '#FF9800',
    registerLink: 'Rooms, Availability and Bookings',
    retreatType: 'Lesson',
    tableSettings: {
        title: true,
        dates: true,
        customFields:['Breakfast included'],
        teachers: true,
        moreLink:true,
        location:true,
        prices:true,
        price: true,
        spaces: true,
        spacesWords: true
    }
};
...

You can change font, color, highlightColor, registerLink, and retreatType to any value to customize the plugin styles

Specifying categories

You can filter the list, so that it only displays programs for a specified category (only 1 category at a time is supported). To do this, add

eventCategory: 'your-category'

to the rbgOptions element where "your-category" is the category slug.
For example, if you assigned the category "plant-medicine" to your program, the code would look like this:

 
...
rbgOptions = {
    customer: 'yourdomain',
    font: 'Open Sans',
    color: '#666',
    highlightColor: '#FF9800',
    registerLink: 'Rooms, Availability and Bookings',
    retreatType: 'Lesson',
    eventCategory: 'plant-medicine'
};    
...

Specifying categories in a table

You can also filter the table so that it only displays programs for a specified category (only 1 category at a time is supported). To do this it is the same as the list, add

eventCategory: 'your-category'

to the rbgOptions  element where "your-category" is the category slug. For example, if you assigned the category "plant- medicine" to your program, the code would look like this:

<div class="rbg-table"></div>
<script type="text/javascript">
rbgOptions = {
    customer: 'yourdomain',
    font: 'Open Sans',
    color: '#666',
    highlightColor: '#FF9800',
    registerLink: 'Rooms, Availability and Bookings',
    retreatType: 'Lesson',
    eventCategory: 'plant-medicine',
    tableSettings: {
        title: true,
        dates: true,
        customFields:['Custom Field 1', 'Custom Field 2'],
        teachers: true,
        moreLink:true,
        location:true,
        prices:true,
        price: true,
        spaces: true,
        spacesWords: true
    }
};
! function() {
    function t() {
        var t = document.createElement("script");
        t.type = "text/javascript", t.async = !0, t.src = "https://s3.amazonaws.com/rbgconnect.retreat.guru/public/rbg-connect.min.js";
        var e = document.getElementsByTagName("script")[0];
        e.parentNode.insertBefore(t, e)
    }
    window.attachEvent ? window.attachEvent("onload", t) : window.addEventListener("load", t, !1)
}();
</script> 

Note: column ordering is not supported at this time

Did this answer your question?