Integrate Retreat Guru with Your Website

This article describes our plugin available for other website platforms. We offer two basic views - list and table - that you can embed on a website page.

List view - display a list of programs

Copy and paste the following code on the page within your website where you’d like the list of programs to appear.

Replace yourdomain with the subdomain from the URL associated with your retreat booking guru site. The subdomain can be found within your site URL.

For example, 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 animation

(Optional) You can add a loading animation that displays before the program list load. Add 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>

Table view - display a table of programs

If you want to display your programs in a table view, replace

id="rbg-connect"

with

class="rbg-table"

within the <div> element.

Configure rbgOptions as follows:

...
rbgOptions = {
    customer: 'mydomain',
    font: 'Open Sans',
    color: '#666',
    highlightColor: '#FF9800',
    registerLink: 'BOOK NOW',
    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 available column. 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: 'BOOK NOW',
    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 customize the display created by the plugin.

Note that the value you specify for retreatType should be singular because the snippet will automatically add an "s" to the value you provide.

Using program categories

List view - display programs in a specific category

You can filter the list of programs so that only programs within a specified category will be included in the display.

To do this, add

eventCategory: "your-category",

to the rgbOptions where your-category is the slug for the program category you wish to display.

For example, if you assigned the category Featured Programs (slug = featured-programs) to selected programs and wished to display only those programs assigned to the Featured Programs program category, the code would look like this:

 
...
<div id="rbg-connect"></div>
rbgOptions = {
    customer: 'yourdomain',
    retreatType: "Program",
    eventCategory: "featured-programs",
    font: 'Open Sans',
    color: '#666',
    highlightColor: '#FF9800',
    registerLink: 'Rooms, Availability and Bookings',
};    
...

List view - display multiple lists on the same page

For example, on your Featured Programs page, you could display one list on the page for on-site programs and another, on the same page, for online programs.

In rbgOptions: set defaultRoute to any value you wish, except /events. The value /events is reserved - do not set defaultRoute to /events.

defaultRoute: '/events-list'

Set classSelector to target the <div>'s you want to fill with program list content.

classSelector: 'rbg-connect-multi-list',

For each list that will be displayed, add a container <div> with the class you chose for classSelector.

<div class="rbg-connect-multi-list"> ...

Use data-category to specify the single program category you wish to display - programs within that category will be displayed.

Use data-retreat-type to specify the list header text

<div class="rbg-connect-multi-list" data-category="onsite-retreat" 
data-retreat-type="On-site Retreat"></div>

Remember to include main container <div>.

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

When you configure it as described above, your result should look similar to this:

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

<div class="rbg-connect-multi-list"
     data-category="onsite-retreat"
     data-retreat-type="On-site Retreat"></div>

<div class="rbg-connect-multi-list"
     data-category="online-retreat"
     data-retreat-type="Online Retreat"></div>

<script type="text/javascript">
    rbgOptions = {
        customer: '',
        font: 'Open Sans',
        color: '#666',
        highlightColor: '#FF9800',
        registerLink: 'BOOK NOW',
        classSelector: 'rbg-connect-multi-list',
        defaultRoute: '/events-list'
    };
    !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>

List view - adding custom HTML (text) on your page with multiple lists

If you wish to add text between the lists on your page, that appears only when multiple lists are configured on the same page, use the rbgOptions optional parameter customContentClass. You may choose the class name.

customContentClass: 'rbg-connect-multi-list-content'

Add this class to any custom HTML (text) you want to appear only when multiple lists are configured on the same page.

This will allow the custom content to be shown in the multiple list view but hidden when viewing a single program page.

Here's an example:

<h2 class="rbg-connect-multi-list-content">Custom Multi-list Header</h2> 

<div class="rbg-connect-multi-list" 
   data-category="onsite-retreat" 
   data-retreat-type="On-site Retreat">
</div> 

<div class="rbg-connect-multi-list-content"> 
   <h2>Custom header for the between text.</h2> 
   <p>Text that will appear between the lists.</p>
</div> 

<div class="rbg-connect-multi-list" 
   data-category="online-retreat" 
   data-retreat-type="Online Retreat  ">
</div>

Table view - display programs in a specific category

You can filter the table view of programs so that only programs within a specified category will be included in the display.

To do this, add data-category to your <div>

<div class="rbg-table" data-category="your-category">...</div>

where "your-category" is the slug for the program category that you wish to be displayed.

For example, if you assigned the category Featured Programs (slug = featured-programs) to selected programs and wished to display only those programs assigned to the Featured Programs program category, the code would look like this:

<div class="rbg-table" data-category="featured-programs"></div>
<script type="text/javascript">
rbgOptions = {
    customer: 'yourdomain',
    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
    }
}; 
! 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> 

Column order is not supported at this time.

LIMITED SUPPORT: Retreat Guru support is limited to making the plugin available for your use - sorry, but we do not provide services related to design, coding, or styling.