Embedding your schedule on your website (schedule widget)
If you have an 'Essential' or 'Pro' account, you can use the Ubindi schedule widget to embed your class schedule and other offerings in your own website, so students can register for class or buy packages directly on your site (they don't have to visit your public page on Ubindi). Ubindi still tracks credits, attendance, and adds any new student to your student list... it all works the same way as on your public Ubindi page. The widget is not available on the Free plan (sorry).
You can customize the basic colors of your widget to match your website.
Schedule widgets are only available for teachers on the Essential or Pro plan.
Getting your widget
You'll find your Schedule Widget on your Settings page (accessed in the dropdown menu at the top right):
Locate the element that says "Schedule widget" and click 'customize' to set your colors and then grab the small piece of code to embed into your website:
Customizing your colors
In the top color menu, you'll see three colored boxes. By default, these are set to the normal Ubindi colors. But you can change the color of your top bar, the background, and any buttons to match your website.
Click on each colored box to pick a color. The preview will update dynamically as you play around.
Once you're done with the first color, click "Close" and move on to the next color button to bring up the color picker. If you know the HEX code for the color you'd like, you can also paste or type that straight into the color picker:
Once you're done and you like the look of your preview, click "Save":
Grabbing your code
Simply click the "Copy" button to copy the full code to your clipboard (i.e. memory).
Adding the widget to your website
Go to edit your website, and simply paste your widget code from your clipboard (command+v on mac, and ctrl+v on pc) into the location where you want your schedule to appear.
In general, you will want to past your widget code into a place where you can add html code. Ubindi widgets don't use Javascript or any other fancy technology, it's simple an iFrame (if you don't know what these things are, don't worry about it!). The widget will expand in width to fill whatever container you put it into, to ensure that things look great on mobile phones. The height is defaulted to 600px, but if you want your widget to be shorter or taller, please get in touch and we'll help you make it so.
You can add the widget to any kind of website, and every site is different. Below are some basic instructions for some of the more popular site builders, but if yours isn't on there and you're having any trouble, please get in touch and we'll do our best to help!
Wordpress
In the Classic Editor, you'll need to switch to the text editor mode, and add your code at the relevant spot. When you then switch to 'visual' mode, you'll be able to preview your widget. Then click update (or publish) and your widget will show up on your Wordpress site.
on some WordPress sites, this won't work and you will find that the Ubindi widgets is not appearing. In this case, you need to use a "plugin" for iframes. Have a look here to see a number of free plugins for that.
Wix
You can add your widget as a "new element" to any existing "section", or you can create a new section where you can then add a new element.
In the "Element" menu, choose "HTML embed". In the next view, select "HTML"and paste the Ubindi widget code into the area called "PASTE YOUR CODE". Below that, you'll find options to set the width and height: slide the width all the way to the right to allow the widget to expand and fully fill the width of the element's container. For the height, choose a reasonably large value so the widget isn't cut off. As you adjust these sliders, you will see a preview.
That's it — just click "Publish" at the top right of your browser and your schedule will be nicely displayed on your website!
GoDaddy
You can add your widget in a new section. Click a "plus" button in the site editor to add a a new section, then choose "HTML". You'll see a form on the right... give your widget a title, then paste the Ubindi code into the field called "Custom code". Below that you'll see an option to force the height of your widget to have some specified value... just leave this blank.
That's it — just click "Publish" at the top right of your browser and your schedule will be nicely displayed on your website!
Weebly
Open your site editor and on your chosen page, click "build" in the top menu. The Ubindi widget can be added as an element. On the "elements" menu at the bottom you'll see "SHOW ALL ELEMENTS". Click that to reveal more element options... the one you want is called "</> Embed Code". Click that box and drag it into the place where you want your widget to appear. You'll see a small "Click to set custom HTML" — click that.
Now you'll see a simple interface where you can set a title for your widget, and where you can paste in the Ubindi widget code.
That's is — just click "Publish" at the top and your schedule will be nicely displayed on your website!
Customizing or updating widget colors directly on your website
If you're not sure what colors might work best, instead of using the color picker on Ubindi, simply go ahead and click "Save" to copy your code and install the widget on your site. Once the widget is installed on your site, you can change colors from there. That way you see the effect of things right on your own site.
This works also if the widget is already embedded on your website and you just want to update the colours.
So find your widget on your website (on a public facing page), and you'll see a pencil at the bottom right of your widget. This is visible only to you.
If you don't see the pencil you may have to log in (click 'register' one of your classes to bring up the login form), and reload the page.
Click the pencil, and this will let you customize your colors.
Once you've customized the colors to your heart's content, simply click 'save', reload the page, and ta-dah!, you'll see the widget in the new colors you've set.
Related Articles
Browser settings for schedule widgets
Some browsers, depending on your settings, may prevent you from interacting with (or even seeing) the Ubindi schedule widget on your teachers website. If you are having trouble signing up for classes or logging in, please try the solution below. It's ...Editing, cancelling and deleting classes
To change something about classes you have on your schedule, go to your schedule dashboard and simply click or tap the 3 little dots at the top right of any of your classes: When you make changes to a class, it's up to you to let your students know — ...Instructions for students: registering as a student
A note on browsers: Ubindi doesn't work well with the Microsoft Edge browser. If you're using Edge, please accept our apologies. You'll need to use any other browser. Signing up on Ubindi as a student Your teacher will have shared with you a link to ...Video library / Recorded classes
On your schedule dashboard, you can create live classes (in-person or online), but you can also add videos to create a library of recorded classes that your students can access. You can take payment for your videos, and you can connect passes or ...How to add, edit or delete a video
For a quick overview of how videos work on Ubindi please see here. If you need a detailed 'how-to', you're in the right place! ? Quick recap: Ubindi doesn't host your videos, so there's no "upload" (and no storage limit). Rather, you can host your ...