BombBomb video platform on Botsplash
BombBomb is a video email marketing platform that allows users to create and build relationships through video. By using the application, users can send video to their connections from virtually anywhere. Videos can be sent through email, text, or social media – letting the use reach anyone you need to at any time.
On Botsplash portal, we are enabling BombBomb for two cases
- Botsplash Agent can record videos using their personal webcam
- Select from range of a pre-recorded BombBomb video listing
and send the video to customers via our chat platform as a Text Message, Response to an active Web Chat or in response to FB Conversation. This blog covers the technical details on API integration and any workarounds encountered. Let’s begin!
BombBomb API Endpoints allow to upload (create new) from or get recorded videos into our application. BombBomb operates on either OAuth API as well as a legacy API. In addition, BombBomb API has jQuery plugins, which makes it super easy to interact with the APIs. At Botsplash, we have gone with the BBCore plugin for its simplicity and the minimal effort to get it started.
- Instantiate (and authenticate) BBCore object
- Render the video recorder
- Upload the recorded video to BombBomb and get the video url
- Get list of uploaded videos
We created a div with the id of “videoRecorder” which will be used to render the video recorder. Now let’s include BBCore plugin scripts in our html file before closing of the body tag.
The BBCore object is instantiated via a custom script file. Create index.js file and load the video recorder. Include the script file in the html file, shown in image above.
Replace above with the token provided in the Integrations page in your account. Next, Load the index.html in the browser, you should see a video recorder like this.
To start recording and to save the video, we’ll need to call another function “saveRecordedVideo” inside the callback function of “startVideoRecorder”. This new function takes in name of the video, video Id, filename and a callback function as parameters. Video Id and filename is available to us from “vidInfo” object that is returned from “startVideoRecorder”.
Now once we finish recording our video, it should alert a message saying “Your video has been saved”. There you go, it’s as simple as that. The uploaded video url can be found inside the data object returned from the function.
We can give the user an option to choose the name of the video to save. We’ll add an input text just above the video recorder. Once the video is recorded, we’ll fetch the video name from the text input and pass it as the first parameter in our “saveRecordedVideo” function. Here is how our final code up to this point looks. I have added some heading and paragraph tags to give proper spacing.
Access and Display pre-recorded videos
Up to this point, our application can record our video and save it and return the url of the video. But we also want to display the list of existing videos in the webpage. We need to make use of “getVideos” function for it. Let’s go ahead and query our videos.
If we check the logs, we should see list of the videos like below:
Let’s loop over the videos and append it as image link to our html page. We need to add a div that will hold the video list for us which is what “videoList” div does.
The video url is available in “shortUrl” property and animated thumbnail is available in “animatedThumbUrl” property inside response.info. At this point, you should be able to see something like this.
We also want to prepend newly recorded video to the list as soon as recording is complete. Let’s add code to achieve that as well.
From here on, you can make additional changes like CSS layouts or displaying video name and timestamp below each video and much more to suit the need of your application. Here is how our final code looks.
For more articles on Live Chat, Automated Bots, SMS Messaging and Conversational Voice solutions, explore our blog.