What is BombBomb
BombBomb is a platform to record, send and track video emails. BombBomb provides lots of value to users - who can send personalized video email instead of regular text emails. You can learn more about BombBomb here.
How to integrate BombBomb
We used the BombBomb Javascript API to connect to various BombBomb Services. To begin, include the BBCore and jQuery libraries in your html (The latest version is available at https://s3.amazonaws.com/static.bombbomb.com/js/BBCore.min.js):
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//s3.amazonaws.com/static.bombbomb.com/js/BBCore.min.js"></script>
Please refer the quick start section on BombBomb Github page for any latest updates.
Authenticate with BombBomb
Each user will need a BombBomb API key to connect to the API and use BombBomb services. They can find the API key under the integrations page. We provided our users with an interface to enter their BombBomb API key and once they entered the key - we checked the validity of the key by using the following code -
var bb = new BBCore({ accessToken: api_key });
return bb.isAuthenticated();
Show existing recorded videos from user's BombBomb Account.
If the authentication was successful - we can use the following code to fetch the videos -
var bb = new BBCore({ accessToken: api_key });
bb.getVideos(videoList);
videoList = function(video_params) {
var name, ref;
var video_list = video_params.info;
var video_count = video_list.length;
var container = $('#bombbombVideoList .container');
if (video_count > 0) {
var i = 0;
while (i < video_count) {
var video_element = video_list[i];
name = (ref = video_element.name === 'null') != null ? ref : {
'No Title': ''
};
html = "<li id='bombbomb-video-" + video_element.id + "' animation-url='" + video_element.animatedThumbUrl + "' thumb-url='" + video_element.thumbUrl + "'><div class='video_selection'><input type='radio' name='bombbomb-video' value='" + video_element.id + "'></div><div class='video_details'><img src='" + video_element.thumbUrl + "' /><a href='" + video_element.vidUrl + "' target='_blank' title='" + video_element.name + "'>" + video_element.name + "</a></div></li>";
container.append(html);
i++;
}
} else {
container.append("<p class='no-video-message'>No videos!</p>");
}
};
Record new videos to BombBomb
BombBomb API provides us with the ability to embed a video recorder on your website and record to a BombBomb account. Basic implementation for the same is provided on BombBomB Github Page#RecordVideo. We have added extended this feature for our users to give a title to the video and save it using the method saveRecordedVideo. Renaming the video and saving feature is not available for iOS devices - although you will be able to record the video and embed. Also, a user can choose from animated/static image as the cover of the video - lines 30-32. Please note you need an extra API call to get the video URL line no - 33 method_name - saveRecordedVideo
this.recordBBVideo = function(api_key, container, callback) {
var bb, err, error, target;
target = container.find('.bb_video_container');
bb = new BBCore({ accessToken: api_key });
try {
return bb.startVideoRecorder({ target: target }, function(vidInfo) {
var bb_url, gifURL, image_extension, videoURL, video_form;
if (!_.include(window.record_video_list_for_session, vidInfo.videoId)) {
record_video_list_for_session.push(vidInfo.videoId);
if (IsAppleMobile()) {
display_flash_message("Your video has been saved and the video link is added to your message. It may take few seconds for the video preview.");
image_extension = '.gif';
gifURL = 'https://s3.amazonaws.com/bbemail/PROD/video_thumbs/' + vidInfo.videoId + image_extension;
videoURL = bb.getVideoDeliveryUrl({ video_id: vidInfo.videoId, autoplay: true });
bb_url = videoEmbedTag(videoURL, gifURL);
return callback(bb_url);
} else {
video_form.find("#bb_video_id").val(vidInfo.videoId);
video_form.find("#bb_video_filename").val(vidInfo.filename);
video_form.find("#bb_video_title").val('Video - ' + moment().format('MMM D, YYYY h:mm A'));
return container.find(".btn_select_recorded_video").die('click').live('click', function(e) {
var video_file, video_id, video_title;
video_form = $(this).closest('.bb_video_form');
video_id = video_form.find("#bb_video_id").val();
video_file = video_form.find("#bb_video_filename").val();
video_title = video_form.find("#bb_video_title").val();
return bb.saveRecordedVideo(video_title, video_id, video_file, function(data) {
var animated;
alert("Your video has been saved.");
animated = container.find(".btn_select_recorded_video").closest('#bombbombRecorderDiv').find('.selection_btn .interactive_gif input').is(':checked');
image_extension = animated ? '.gif' : '.jpg';
gifURL = 'https://s3.amazonaws.com/bbemail/PROD/video_thumbs/' + video_id + image_extension;
bb.getVideoDeliveryUrl({ video_id: video_id, autoplay: true });
videoEmbedTag(videoURL, gifURL);
});
});
}
}
});
}
};
Embed new and existing videos in your email.
One of the advantages of the BombBomb and the primary reason for our integration - that we are not adding any embed or iframe scripts to your HTML email which is not supported by most email client. In the below code we are just appending an animated GIF wrapped in a hyperlink - clicking on which user is redirected to the video.
videoEmbedTag = function(videoURL, gifURL) {
return "<p><a href='" + videoURL + "' target='_blank' rel='noopener noreferrer'><img src='" + gifURL + "' /></a></p>";
};
Miscellaneous
If you are a partner with BombBomb - they also ask to add a field to their requests called xsrc, so they can identify where API traffic comes from.You need to send a unique identifier to the BombBomb team which you can determine after talking with the BombBomb team.
And post that you need to execute the below code with every service request
this.initBBCore = function() {
var bbCoreSendRequest;
bbCoreSendRequest = BBCore.prototype.sendRequest;
return BBCore.prototype.sendRequest = function(method, params, success, error) {
if (typeof params === 'function') {
success = params;
}
if (typeof method === 'object') {
params = method;
}
if (typeof method === 'object' && params.method) {
method = params.method;
}
params.xsrc = UNIQUE_SOURCE_IDENTIFIER;
return bbCoreSendRequest.call(this, method, params, success, error);
};
};
var bb = new BBCore({ accessToken: api_key });
initBBCore();
return bb.isAuthenticated();
Hope this article helps. Please let me know if you have any queries or feedback.
Have a BB 
day.