🧩 Extending ContentBox with a Custom Panel

You can extend ContentBox by adding a custom sidebar button that opens a custom panel — allowing users to insert predefined content or sections into the editor.

🔧 Step 1: Add a Sidebar Button

Use the addButton() method to add a new button to the sidebar. This button will open your custom panel HTML file.

builder.addButton({ 
    pos: 0,
    title: 'Products',
    src: 'mypanel.html', // Path to your custom panel HTML
    html: '<svg style="width:17px;height:17px;" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">...</svg>',
    class: 'sidebar-sections'
});

• src: The path to your custom HTML panel (e.g., mypanel.html)
• html: SVG icon markup for the button
• class: Optional CSS class for styling

✅ Tip: You can find a working example in the package at public/example-custom.html.

💡 Step 2: Create Your Custom Panel (mypanel.html)

Create a simple HTML file (mypanel.html) containing buttons or links that call parent.contentbox.addSection() to insert content.

Each button should execute:

parent.contentbox.addSection(html, css);

Parameters:

• html : The HTML structure of your section
• css : A typography CSS file from assets/styles/ (choose one starting with type-)

Example: Inserting a Section

parent.contentbox.addSection(`
    <div class="is-section is-box is-section-100 type-rufina-oxygen">
        <div class="is-boxes">
            <div class="is-box-centered">
                <div class="is-container v2 is-content-960 leading-13 size-17">
                    <div class="row">
                        <div class="column full">
                            <h1 class="text-center leading-09 size-92">Product One</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
`, 'type-rufina-oxygen.css');

Make sure to:

• Use a valid type-*.css file from the assets/styles/ folder
• Apply the matching class name to the .is-section element

🔒 Make Content Non-editable (Optional)

To make a section non-editable , add the protected class to the .is-section element and avoid using the is-container class inside it:

<div class="is-section is-box is-section-100 type-rufina-oxygen protected">
    ...
</div>

⚙️ Add Custom JavaScript (Optional)

You can embed custom scripts inside a section using the data-module attribute:

<div class="is-overlay-content"
     data-module="code"
     data-module-desc="Custom HTML or JavaScript"
     data-html="${encodeURIComponent(`

        <!-- Your custom script here -->

    `)}">
</div>