Welcome to the MoonBack as a Service (MaaS) technical integration documentation.
Do you already know what kind of integration you are going to do? If you don't know yet, visit [this page].(https://moonback.readme.io/reference/moonback-as-a-service)
First step
For any integration you need an application ID in order to have a working MoonBack as a Service Widget.
Where's my Application ID?
You can get it on the integrations page of your MoonBack account, no matter what subscription you have (even if it is the free account).
If your integration is MDS-02 or MDS-03 you need to contact support to:
- set the SALT hash to encode the email
- establish the domains from which the integration will work (for security reasons)
Let's MoonBack !
We know you are a programmer eager to integrate MoonBack, so let's cut to the chase with an example. After the example we review each section and its explanation.
<button id="moonback-button">Embed a personal video</button>
<script type="text/javascript">
function moonback_callback(json)
{
console.log(json);
console.log('MoonBack URL is ' + json.public_url);
}
</script>
...
...
<!-- MoonBack as a Service Widget -->
<script id="mbackjs">
var moonback_config = {
// Main settings (required)
"token": "963e53495493559d84161016efbd3f0b354d9be382b5376ea29a892d4d6475e8",
"element": "#moonback-button",
// MoonBack account management (optional, just for MDS-02 and MDS-03)
"email": "[email protected]",
"hash": "e62151bdfbf91b1eb74a6bd8d1819ef5", // this is generated with email + your secret halt
"welcome_mail": true,
// Customization of record page (optional)
"title": "¡Grabe un MoonBack!",
"subtitle": "Sú vídeo se incluirá en el informe.",
// Customization of extra data page (optional, overrides manual population)
"ask_message": true,
"ask_notes": true,
"ask_tags": true,
// Population of extra data programatically (optional)
"message": "your message here",
"notes": "your notes here",
"tags": "your tags here",
// Customization of thank you page (optional)
"thankyou": {
"title": "MoonBack grabado correctamente",
"subtitle": "Continúe con el informe",
"bg_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/NASA-HS201427a-HubbleUltraDeepField2014-20140603.jpg/1024px-NASA-HS201427a-HubbleUltraDeepField2014-20140603.jpg",
},
// Callback settings (required)
"callback": moonback_callback,
// Other settings (optional)
"language": "es",
"console_debug": true,
};
!function(m,b,a,c,k){c=m.createElement(b),k=m.getElementsByTagName(b)[0],c.async=1,c.src=a,k.parentNode.insertBefore(c,k)}(document,"script","https://moonback.me/widget/maas?app_id="+moonback_config.token+"&email="+encodeURIComponent(moonback_config.email)+"&hash="+moonback_config.hash);
</script>
<!-- MoonBack as a Service Widget -->
Widget code generator page
You have a generator for this widget on your MoonBack as a Service integration page of your MoonBack account.
Main settings (required)
token
The application Id of the account used to received MoonBacks. In MDS-01, MDS-02 and MDS-03 docking systems is your account app id as a integrator partner. In MDS-04 is customer's app id, so you that your customer will be able to see in his account and put in your integration configuration page.
element
You need an element on your website that will trigger the MoonBack recording process. This element is a DOM Selector that you can choose as you like. In the example it is a "button" element. This has an identifier that is the one that we will use later in the Widget configuration.
MoonBack account management
In this integrations methods, we create a MoonBack account with the email provided (or we auto-login to that account in order to be able to use the MoonBack record process).
This is just for MDS-02 and MDS-03.
email
Customer's real email address with which he/she will register with MoonBack. It is important that it is real since it will be the way in which the customer will be able to access his MoonBack if he wishes to do so, or with which he will be able to recover access if he loses it.
It has to be a value in the form of an email. If you don't want to provide the customer's email you can create something like "[email protected]". This is what the user will see in their MoonBack control panel and they will be able to change it whenever they want, as it is how they log into their MoonBack account.
hash
For security reasons, a hash must be generated, which is composed of an md5 of two strings:
- the email you send
- a SALT that is provided when you create the MoonBack Partner contract
<?=md5($email.$salt)?>
welcome_mail
true or false, to choose if you want the customer to receive the MoonBack registered user welcome email (with his password).
Customization of record page (optional)
title
Title that will appear below the MoonBack recording at the beginning of the process. Very useful to give continuity to the user experience and explain to your customer what he can do.
subtitle
Subtitle accompanying the title ;-)
Customization of extra data page (optional)
ask_message
true or false, to choose if customer will be able to insert a message with the MoonBack (highly recommended)
ask_notes
true or false, to choose if customer will be able to insert a private note
ask_tags
true or false, to choose if customer will be able to insert custom tags to categorize his MoonBacks
If none of these three options are selected, user will be redirected to "thank you" page after recording.
Customization of thank you page (optional)
title
Title that will appear in the last page at the end of the process. Very useful to give continuity to the user experience and explain to your customer what he has accomplish it and can go back to your page.
subtitle
Subtitle accompanying the title ;-)
bg_image
Custom background image URL for that page. If not set, we will show a beautiful one by default.
Callback settings (required)
callback
The name of your Javascript function where you will received the JSON with all the MoonBack Data once the process is finished.
This function will receive a JSON with all the MoonBack data in this format. In the example, the function is called "moonback_callback(json)" but it can be the one you want, always, however, with an argument that is the JSON that you will receive.
Here an example:
{
"code": "f3a1fqs791",
"public_url": "https://moonback.show/f3a1fqs791",
"mid": null,
"message": "Message of the MoonBack",
"links": 0,
"notes": "Private notes of the MoonBack",
"length": 45,
"url_sd": "https://storage.googleapis.com/moonback/354d9be382b5376ea29a892d4d6475e8/35439be382b5376ea29a892d4d6475e8-Moonback-2021314-f32a1fqs791_low.mp4",
"url_hd": "https://storage.googleapis.com/moonback/354d9be382b5376ea29a892d4d6475e8/35439be382b5376ea29a892d4d6475e8-Moonback-2021314-f3a1fqs791.mp4",
"url_gif": "https://storage.googleapis.com/moonback/354d9be382b5376ea29a892d4d6475e8/35439be382b5376ea29a892d4d6475e8-Moonback-2021314-f3a1fqs791.gif",
"url_jpg": "https://storage.googleapis.com/moonback/354d9be382b5376ea29a892d4d6475e8/35439be382b5376ea29a892d4d6475e8-Moonback-2021314-f3a1fqs791.jpg",
"created_at": 1618385146
}
Other settings (optional)
language
Language (in ISO 639-1 format) for some buttons or texts in the MoonBack process.
Currently available: "en" and "es"
console_debug
true or false, to choose if you want to see some debug messages in the Developer console
Do not modify the rest of the code
You can modify the parameter settings as you need, but do not modify the rest of the code as then the integration may not work correctly.
And now ...
MoonBack Time !
