Quick start
Rocketium Button is an HTML5 library that adds Rocketium's powerful banner and video creator to your website. The script loads asynchronously and does not slow down your website. You can control the look-and-feel of Rocketium Button or even hide and invoke it programmatically. You can control the user experience within the creator by making only certain features available to your users. Rocketium's creator opens in a lightbox when a user clicks on Rocketium Button.
Create a new Rocketium account and contact us, either by reaching us on Rocketium support by clicking the blue icon at the bottom right of your screen. Our team will share your client ID that you need in your script. The client ID will only work with the domains that you whitelist so make sure you share those with us. You can always add or remove domains later without needing to update your website code.
You can easily create templates by choosing that option before exporting your image or video. Rocketium automatically creates code for your template and you can access it by going to the Code tab within the share pop-up of your template. You can find the ID of the template in the
templateId field and workspace ID in the teamId field.(function () {
window.rfsdk = window.rfsdk || function () {
(window.rfsdk.q = window.rfsdk.q || []).push(arguments);
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://rocketium.com/js/rfsdk.min.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
window.rfsdk('init',{
"workspaceId": "Enter your workspace ID",
"templateId": "Enter your template ID",
"clientId": "Enter your client ID",
"appendTo": "rktm-editor-wrapper",
// ... more options here
});
Paste the code snippet at the end of the
<body> tag of your website. Make sure you put the right values for workspaceId, templateId, clientId, and appendTo. More details on the configuration in the documentation.Supported browsers
Rocketium's editor relies on cutting-edge browser features. It is currently supported only on the latest versions of Google Chrome and Mozilla Firefox.
Rocketium Button fires events for important lifecycle events. The most important of these is when the image or video is exported. Handle this to show a loader or success message to users once they finish their creation. Once the export is ready to be downloaded, Rocketium will call your configured webhook. You can download the creative using the link in the webhook and use it in your application.
Rocketium Button SDK provides the following functions to fetch and manipulate video data inside the button editor -
- 1.
getVideoData- Returns video data in Rocketium format. Emits message event of typereceive-video-data. The video data can be accessed using thedataproperty of the event. - 2.
getVideoDataInCodeFormat- Returns video data in Rocketium API format. The data returned can be used with our APIs. Emits message event of typerfsdk-receive-video-data-in-code-format. The video data can be accessed using thedataproperty of the event. - 3.
SetVideoData- Takes video data in Rocketium compatible format and sets the data in the editor. If the operation was successful it calls thevideo-data-setevent.
Here's a basic example demonstrating fetching and setting of video data in the Button editor -
window.addEventListener('message', event => {
if (event.data.eventName === 'video-data-set') { // If this event is called we know video data was set successfully.
console.log('Updated Video!');
} else if (event.data.eventName === 'receive-video-data') { // Event is called after called getVideoData method.
const videoData = Object.assign({}, event.data.eventData.videoData, {});
// Changing text of first caption in first scene -
videoData.cards[0].options[0].text = 'Hello World!';
window.rfsdk('setVideoData', videoData); // Calling the setVideoData function to set video data.
} else if (event.data.eventName === 'rfsdk-receive-video-data-in-code-format') {
// Make call to rocketium API with event.data.eventData.videoData
}
});
window.rfsdk('getVideoData');