Cincopa Inline Editor Documentation

Cincopa Inline Editor allows you to integrate and customize assets with an inline editing experience. This guide provides an overview of how to use load_gallery() and configure the editor object to enable built-in and custom modules.

There are two ways to implement the editor: one loads the editor within video assets themselves, and the second manually calls the editor for any asset.

Loading an Asset

To use the Cincopa Inline Editor, include the required script and use the load_gallery() method, which utilizes cincopa.boot_gallery to load an asset.

Required Script

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

cincopa.boot_gallery(loadObject)

This function loads a Cincopa asset inside a specified HTML element.

Parameters:

Example Usage:

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

<script>
cincopa.boot_gallery({
    _object: "cincopa_asset",
    _fid: "GALLERY_ID!ASSET_ID",
    _editor: editorConfig
});
</script>

Editor Object Configuration

The _editor object allows you to load various modules to enhance the editing experience.

Example Editor Object:

let editorConfig = {
    load_modules:[
        {name: "chapters"},
        {name: "thumbnail"},
        {name: "captions"}
    ],
    token: "TOKEN"
};

Built-in Modules:

• info – Title your masterpiece. Add a description and other fields like tags to boost SEO.
• share – Spread the buzz. Share your video to social or a local share page.
• embed-info – Share everywhere. Embed your asset on your website.
• email – Create dynamic emails. Embed your video thumbnail directly in your emails and track engagement.
• thumbnail – Set a custom thumbnail for your asset.
• video-trim – Trim unwanted parts and create seamless videos.
• partitioning-speaker – Add captions & transcripts. Manage, edit, and add multiple languages.
• chapters – Add chapters for easy navigation.
• annotations – Boost engagement with time-stamped annotations.
• call-to-action – Drive action with a compelling call-to-action.
• replace-asset – Replace an asset with a newer version.
• video-renditions – Choose from multiple video renditions.
• extras – Keep assets and related files in sync.
• multiple-audio – Layer up with multiple audio tracks.
• video-analytics – Unlock viewer insights.
• downloads-asset – Attach files and links related to the asset.
• lead-generation – Capture leads by adding forms.

To enable these modules, simply add them to the load_modules array.

Adding Custom Modules

It is also possible to develop and load custom modules by specifying their JavaScript and CSS paths.

Example with Custom Modules:

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"
};

Manually Activating the Editor

To manually open the editor for an asset, use the following approach:

Example Function:

function openEditor(){
    let editor = {
        rid: "ASSET_RID",
        load_modules:[
            {name: "extras"}, 
            {name: "captions"}, 
            {name: "slides"}, 
            {name: "youtube"}, 
            {name: "live-panel"},
            {name: "live-source"}, 
            {name: "youtube"}
        ],
        token: "TOKEN"
    };
    cincopa.loadEditor(editor);
}

Obtaining a Token

To get a TOKEN, use the following API endpoint:

🔗 Cincopa API Documentation

Ensure that API calls are made server-side to securely fetch the token.

Available Editor Options

The editor supports various options to customize the behavior and UI:

Summary

1. Include the script – Load libasync.js.
2. Call cincopa.boot_gallery() – Specify the _object, _fid, and optionally _editor.
3. Use built-in modules – Add chapters, thumbnail, and captions.
4. Load custom modules – Provide custom JS and CSS paths.
5. Manually activate the editor – Use cincopa.loadEditor() with an editor configuration.
6. Fetch a secure token – Use the Cincopa API for authentication.

By following this guide, you can effectively integrate and customize the Cincopa Inline Editor in your projects.