Cincopa Inline Editor

The Cincopa Inline Editor enables you to embed editable media assets directly into your application or admin interface. This allows real-time interaction with video content, such as adding chapters, setting thumbnails, editing call-to-action, or invoking custom modules — all within your own web environment.

The editor is also used in Cincopa plugins for headless CMSs like Sanity and Strapi, where it is already initialized and configured. In these environments, users can access editing capabilities without any manual setup.

This allows content editors to modify video metadata such as chapters or call-to-action directly within the studio, without leaving the editing interface or switching tools.

There are two ways to implement the editor:

• Loading an Asset

• Manually Activating the Editor

Let's get started🚀

Loading an Asset

Loading the editor inline enables users to interact with a video and make real-time changes directly inside your web interface. This removes the need to switch between systems or dashboards, allowing asset editors to work within the same environment where the video is displayed or published.

To use the Cincopa Inline Editor, include the required script and use the load_gallery() method, which internally calls cincopa.boot_gallery.

Step 1: Include the Required Script: This JavaScript SDK provides the cincopa object and all necessary methods (e.g., boot_gallery, loadEditor) to load and manage assets.

<script src='https://rtcdn.cincopa.com/libasync.js' type='text/javascript'\>\</script\>

Step 2: Add a Container Element : Create a container in your HTML where the asset will be loaded. You can apply styling or use a dynamic ID if you need to load multiple assets.

<div id="cincopa_asset"> </div>

Step 3: Define the Editor Configuration: Configure the editor by specifying the modules to be enabled and passing a secure token for authentication.

let editorConfig = {
    load_modules: [
        { name: "chapters" },
        { name: "thumbnail" },
        { name: "call-to-action" }
    ],
    token: "YOUR_TEMP_TOKEN"
};

This configuration is passed to the cincopa.boot_gallery method, which accepts a set of parameters to control how the editor is initialized and rendered. The following table describes each supported parameter:

Step 4: Load the Asset Using boot_gallery: Call the function below to render the asset and initialize the inline editor inside the specified container:

function load_gallery() {
    cincopa.boot_gallery({
        _object: "cincopa_asset",
        _fid: "GALLERY_ID!ASSET_ID",
        _editor: editorConfig
    });
}

load_gallery();

✅Final Result

After completing the steps above, the Cincopa Inline Editor will be rendered in your designated container with the specified editing modules active. The video asset becomes directly editable with asset info, set thumbnail, and video trimming controls enabled inline.

Built-in Modules

Cincopa provides a library of built-in modules to extend video functionality and editing capabilities. These modules can be activated by adding them to the load_modules array of the editor configuration.

✅Final Result

By adding any of these modules to the configuration, the editor interface will include the corresponding functionality during asset editing, allowing control over each video element.

Adding Custom Modules

The Cincopa Inline Editor also allows you to add custom modules to extend the editor’s functionality.

let editorConfig = {
    load_modules:[
        {name: "chapters"},
        {name: "thumbnail"},
        {name: "captions"},
        {name: "customModule1", js_path: "PATH_TO_MODULE1_JS", css_path: "PATH_TO_MODULE1_CSS"},
        {name: "customModule2", js_path: "PATH_TO_MODULE2_JS", css_path: "PATH_TO_MODULE2_CSS"}
    ],
    token: "TOKEN"
};

✅Final Result

Once custom modules are defined and loaded, they appear alongside standard modules in the editor.

Manually Activating the Editor

Instead of loading the editor inline with the video player, you can activate the editor on demand using the cincopa.loadEditor() method.

Required Script

To use Cincopa's editor functionality, you must first include the Cincopa JavaScript SDK in your HTML. This script loads the necessary methods, including loadEditor, which is used to manually activate the editor. It should be included before any calls to Cincopa functions.

<!-- Load Cincopa Async Script -->
<script src="https://rtcdn.cincopa.com/libasync.js" type="text/javascript"></script>

Trigger Element

Add a clickable element (e.g., a button or hyperlink) that will be used to manually activate the editor. When this element is clicked, it will call a function that launches the editor.

<!-- Open Editor Button -->
<a id="open_editor" href="#" onclick="open_editor()">Open Editor</a>

Editor Initialization Script

This function should be defined in your JavaScript and will be executed when the trigger element is clicked. This function sets up the required editor configuration, including the asset ID (rid), the list of modules to enable, and the temporary token for authentication.

function open_editor(){
    let editor = {
        rid: "asset_rid",
        load_modules:[
            {name: "extras"}, 
            {name: "video-analytics"}, 
            {name: "multiple-audio"}, 
        ],
        token: "Token"
    };
    cincopa.loadEditor(editor);
}

✅Final Result

The Cincopa editor will open with the specified modules active.