Job application

With BuboBox for job applications you can very easily allow solicitants to attach a video to their solicitation form.

Basic integration steps

1. Create a widget of type “job” and get snippet code

If you don’t have a widget yet you can create one otherwise you can select your widget you want to embed under My BuboBoxes. Select a widget and go to Embed Code where you can copy the code snippet for the selected box.

Make sure that the widget type is job.

2. Paste the code in your website

Open the page where you want to embed the BuboBox in your favorite text editor. Paste the BuboBox snippet between to form tags of your solicitation form.

<form>
    <!-- YOUR CODE -->
    <!-- PASTE BUBOBOX SNIPPET HERE -->
    <!-- YOUR CODE -->
</form>

The reason why you need to paste the snippet between your form tags is because this snippet will add a hidden field to your form. Once a solicitant records a video this hidden field is filled in and when they submit the form you can save this extra field in your database as a reference to the recorded video.

The hidden field that is added will look like this:

<input type="hidden" id="bbbx-entry-uuid" name="bbbx-entry-uuid">

Make sure to save the UUID in your database because this is the ID that can be used to connect profile x with video y.

Integrate the videos in your backend system

It’s perfectly possible to view and manage all the videos using our BuboBox admin panel, but it’s much cleaner and easier for the reviewers of the profiles that they can do that in a system that they are familiar with.

To add the the videos on the solicitants page in the backend you can use following code:

<iframe src="http://embed.bubobox.com/embed/player?id=UUID" width="336" height="240" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>placeholder-fix</iframe>

So if you would have a UUID like 7dc53df5-703e-49b3-8670-b1c468f47f1f then your player embed code would look like:

<iframe src="http://embed.bubobox.com/embed/player?id=7dc53df5-703e-49b3-8670-b1c468f47f1f" width="336" height="240" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>placeholder-fix</iframe>

This way you can fill in that UUID based on the profile that is viewed dynamically.

Attach meta data

It is possible to attach meta data to a video that will be available in our BuboBox admin panel. This is especially handy when you want to use our system to view the videos so you know which video belongs to which person.

To attach meta data you would add a javascript function to your web page with the name bbbx_fetch_meta. This function must return an object with properties that you want to use as meta data. This function is called just before a video is published, so you can dynamically fill in this data based on the form fields

function bbbx_fetch_meta() {
  return {
    "name":  "John Doe",
    "email": "[email protected]"
  };
}

A dynamic example would look something like this. In this case we use jQuery and assume there is a text field with id name and email on our page:

function bbbx_fetch_meta() {
  return {
    "name":  $("#name").val(),
    "email": $("#email").val()
  };
}

Styling

You are free to style the job module the way you want so that it blends in with your form perfectly.

Below is the HTML structure of the job module. You can use this as guide for styling the job module to fit your needs.

<div id="bbbx-job-wrapper" class="bbbx-job-has-entry">
    <div id="bbbx-job-preview-group" data-bbbx-trigger="job.preview">
        <a id="bbbx-job-preview-thumb"><img src="image-url.jpg" width="100"></a>
    </div>
    <div id="bbbx-job-buttons-group">
        <div>
            <button id="bbbx-job-record" data-bbbx-trigger="recorder.open">Re-record video</button>
            <button id="bbbx-job-record" data-bbbx-trigger="job.reset">Remove video</button>
        </div>
    </div>
    <input type="hidden" id="bbbx-entry-uuid" name="bbbx-entry-uuid" value="0aae45b7-020c-47d8-9249-c9863fa2d08f">
</div>

An example styling could look like this:

#bbbx-job-wrapper {
    width: 324px;
    margin-bottom: 10px;
}
#bbbx-job-wrapper img {
    cursor: pointer;
}
#bbbx-job-wrapper button {
    background: #E3E3E3;
    border: 1px solid #BBB;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px #F6F6F6;
    box-shadow: inset 0 0 1px 1px #F6F6F6;
    color: #333;
    font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFF;
    width: 150px;
    margin: 0 5px;
}
#bbbx-job-wrapper button:hover {
    background: #F3F3F3;
    color: #111;
}
#bbbx-job-wrapper #bbbx-job-preview-group {
    display: none;
    height: 71px;
    margin-bottom: 5px;
    background: url(../assets/images/job-preview-load.gif) no-repeat center center;
}
#bbbx-job-wrapper.bbbx-job-has-entry #bbbx-job-preview-group {
    display: block;
    text-align: center;
}

By using this style the job module will look like this: