How to add Circuitree Availability Add-ons to your website

There are two pieces of code you must add to your website. The shortcode where you want your app information to show, and then the javascript code that makes the shortcode work.

Insert Shortcode

The shortcode text is a small <div> or <span> tag that you can generate and copy from within your account page. You can put as many of these shortcodes on your website as desired, and they should be placed where you want the Circuitree information to show. They should be pasted in the Source or Code view of your website editor. To generate a shortcode, you must login to your account. If you need an account created, please contact [email protected].

Add Javascript

The below javascript code must be added to every page that uses an Add-on. It should only be added once to each page. Usually it's best to add this to the bottom of your theme template so that it will load on every page. Similar to how you add javascript for Google Analytics, or other tracking software. Once the javascript is added to the page, it will scan your pages for any shortcodes and update them accordingly. 

The below code must be added to every page that has a shortcode. Recommended to be added to the footer of your site theme template. 

<script src=""></script>

Add CSS (if needed)

Add-ons text is generated with CSS classes to making styling easy.
The Event Division Availability text will use the styling your current webpage .
The Event Availability Table must be styled to fit your websites look & feel. We provide example CSS on the Example Event Availability Table page as a starting point.