➕ Adding Custom Buttons to the Left Sidebar

You can extend the default sidebar with your own buttons using the addButton() method.

Each button is defined by:

• pos: The position index where the button should be inserted
• title: Tooltip/title shown on hover
• html: The icon markup (typically an SVG)
• onClick: The function to execute when the button is clicked

Example: Adding Animation & Utility Buttons

builder.addButton({ 
    pos: 2,
    title: 'Animate Section',
    html: '<svg><use xlink:href="#icon-wand"></use></svg>', 
    onClick: () => {
        builder.openMotionCascade();
    }
});

builder.addButton({
    pos: 3,
    title: 'Motion Timeline',
    html: '<svg><use xlink:href="#icon-anim-timeline"></use></svg>',
    onClick: () => {
        builder.openMotionDock();
    }
});

// Open custom modal
builder.addButton({ 
    pos: 4,
    title: 'Assets',
    html: '<svg><use xlink:href="#icon-folder"></use></svg>', 
    onClick: async () => {
        builder.openModal('assets.html', {
            ariaLabel: 'Assets',
            // w: '88vw',
            // maxW: '1600px',
            // h: '88vh',
            // onOpen: (modal, iframe) => console.log('Opened:', modal, iframe),
            // onClose: (modal, iframe) => console.log('Closed:', modal, iframe),
            // showCloseButton: true,
        });
    }
});

builder.addButton({ 
    pos: 5,
    title: 'Clear Content',
    html: '<svg><use xlink:href="#icon-eraser"></use></svg>', 
    onClick: () => {
        builder.clear();
    }
});

builder.addButton({ 
    pos: 6,
    title: 'AI Assistant',
    html: '<svg><use xlink:href="#icon-sparkles"></use></svg>', 
    onClick: () => {
        builder.openAIAssistant();
    }
});

Available ContentBox Methods

• builder.openMotionCascade() - Opens the 'Animate Section' panel.
• builder.openMotionDock() - Opens the Motion editor.
• builder.openAIAssistant() - Opens the AI Assistant.
• builder.clear() - Clears all content from the current page.
• builder.modal(options) - Builds a dialog from your own content. See 'Build Your Own Dialog'.