Javascript API

You can embed BuboBox in your website with the Javascript that is displayed after you create a new widget or you can copy the code snippet from the widget settings page. Go to My BuboBoxes and select the widget you want to embed in your page. Now click on “Embed Code” in the submenu.

The code snippet will look something like below. WIDGET_ID will be replaced with your selected widget.

<div class="bbbx-widget" data-widget="WIDGET_ID"></div>
<script type="text/javascript">
    /*** CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE ***/
    var bbbx_widget_id = WIDGET_ID; // required: replace with the widget ID of the widget you want to show

    /*** DON'T EDIT BELOW THIS LINE ***/
    (function() {
        var bbbx = document.createElement('script'); bbbx.type = 'text/javascript'; bbbx.async = true;
        bbbx.src = '//api.bubobox.com/widget.js?id=' + bbbx_widget_id;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bbbx);
    })();
</script>

Global widget var

There are two global javascript variables that you can use to interact with your widget and those are mybb and bubobox_x where x is a widget ID.

Don’t use these global variables between directly between script tags because this will give a Javascript error because the BuboBox code is loaded asynchronously. A place where you can use these global variables is for example in a an onclick event of an <a> element. For example:

<a href="javascript:void(0);" onclick="mybb.openRecorder('video')">Open Recorder</a>

More about what methods are available on these global BuboBox vars can be found below.

Config callback

There is a global callback function available that is executed once all BuboBox resources are loaded. The function is bbbx_config and if you use this inside that function you have access to the global currently loaded widget object. This is actually the same like the global vars described above. On this object you can call methods to execute a specific action like opening a recorder, play a certain item, and much more. It’s also possible to listen for specific events that happen in the widget and execute some code one that event happens. Below an example of listening to the widget for a published event.

var bbbx_widget_id = WIDGET_ID;

function bbbx_config() {
    // all resources are loaded
    this.subscribe("event", function() {
        alert('Thanks for your entry');
    });
}

/*** DON'T EDIT BELOW THIS LINE ***/

Code settings

You can configure your widget through our admin panel but sometimes it’s possible you’ll want to apply some settings through code. In this case you’ll place your settings just below the line where bbbx_widget_id gets defined:

var bbbx_widget_id = WIDGET_ID;
var bbbx_visual = false; // example setting through code
/*** DON'T EDIT BELOW THIS LINE ***/

More information about the example setting above can be found on the visual mode page(add link).

Global methods

Below you find a list of methods that you can call on the widget object.

All examples below are executed on the this object so these must be used inside the bbbx_config function. If you want to use these functions outside bbbx_config you should use mybb or bubobox_x.

Open Recorder

Open a recorder lightbox so the user can create a new entry.

Parameters

Open media item

Open a specific media item in a lightbox.

Parameters

Example

this.openPlayer(3434)

Embed media item

With this method you can get the html code that can be used to embed a player in your html page.

Parameters

Example

this.getPlayerEmbed(1396, 400, 300, function(embed) {
    BBBX.$('#player').html(embed);
});

For this example to work, make sure to create an html element with id “player” on your page:

<div id="player"></div>

Get entries

Get an array of entries from the current widget. The returned value is an array of objects. Every object has the following properties:

Object properties

Parameters

Options

Example

this.getEntries(function(entries) {
    console.log(entries);
});

For example to create a thumbnail list of all entries, and when a users clicks on a thumbnail the item is displayed. Below you can find the code to do this:

this.getEntries(function(entries) {
  var html = '';
  for(idx in entries) {
     var entry = entries[idx];
     html += '<li><a href="javascript:mybb.openPlayer(' + entry.video_id + ')"><img src="' + entry.thumb_url + '" width="200" /></li>';
  }
  BBBX.$('.bbbx-custom').html('<ul>' + html + '</ul>');
});

The example below will return entries that contain “Joe” as meta data:

this.getEntries(function(entries) {
    console.log(entries);
}, {search: 'Joe'});

Get entry

Get and object with information about the requested entry ID.

Parameters

Example

this.getEntry(4000, function(entries) {
    console.log(entries);
});

Open Share Popup

Open a share lightbox so the user can share an entry.

Parameters

Set entry order

The set order method can be used to change the order of the entries in the widget. The widget will automatically update once this method is called.

mybb.setOrder([type]);

Types

Listen for events with Subscribe

With the subscribe method you can listen for a specific event on the widget. Below you find an overview of all the events:

this.subscribe([event], [callback]);

Events

Parameters

Example

this.subscribe('player.hide', function(e) {
    console.log('Player is closing now', e.entryId);
})