Embedding

Studio Web Component

Embed the Carbone Studio in your application

Integrate Carbone Studio directly into your application

From Carbone v5, the studio is a HTML Native Web component which can be integrated into any web application 🎉

From the software editor's perspective:

From the user's perspective:

From the developer's perspective:

Important notes and consideration during the beta phase:

1. Load the web component file

  <script src="/carbone-studio.js"></script>
  <style>
    carbone-studio {
      height:100%;
      width:100%;
    }
  </style>

2. Start the studio

// Instantiate the Web component
const studio = document.createElement('carbone-studio');
// Or insert `<carbone-studio></carbone-studio>` directly in the DOM.
// Add the studio component to the DOM
document.body.appendChild(studio);             
// Configure the studio
studio.setConfig({
  origin : 'https://api.carbone.io/', // Defaults to `window.location.origin`
  token  : '',                        // Provide a JWT Token if authentication is enabled on your On-premise instance
});


const templateFile = {
  // The studio will automatically call `URL_ORIGIN/template/:templateId` to download the template
  templateId : '424242424242424242424242424',
  // Extension is used for the user interface and may change in the future
  extension  : 'docx' 
};
// Pre-initialize the studio with data, language, etc.
const options = {
  data           : {},
  complement     : {},
  enum           : {},
  translations   : {},
  lang           : 'fr-fr',         // Defaults to browser language
  timezone       : 'Europe/Paris',  // Defaults to browser language
  currencySource : 'EUR',           // Defaults to browser language
  currencyTarget : null
};
// Open the template in the studio
studio.openTemplate(templateFile, options);

URLs called by the studio:

More options for request hooks are coming soon; we look forward to your feedback!

3. Listen events

  studio.addEventListener('connected');
  studio.addEventListener('disconnected');
  studio.addEventListener('options:updated', optionsUpdated);
  studio.addEventListener('template:updated', templateUpdated);
  function optionsUpdated(e) {
    console.log(e.detail);
    // {
    //   "data": {}
    // }
  }
  function templateUpdated(e) {
    console.log(e.detail);
    // {
    //   "templateId": "424242424242424242424242424",
    //   "extension": "docx"
    // }
  }