📁 Path Configuration

When hosting ContentBox.js or its associated asset files in a different location — such as a CDN, cloud storage, or separate directory — you can use the following configuration options to ensure correct file loading and path resolution.

Here’s an example of how to set up custom paths:

const builder = new ContentBox({
    /* options */
    controlPanel: true,
    iframeSrc: 'blank.html' // Must be served from the same origin

    // Base path for general assets
    assetPath: 'https://path.to/assets/', 

    // Font assets path
    fontAssetPath: 'https://path.to/assets/fonts/', 

    // Snippet file and related paths
    snippetUrl: 'https://path.to/assets/minimalist-blocks/content.js',  // Full URL to snippet file
    snippetPath: 'https://path.to/assets/minimalist-blocks/',  // Base path for images and resources
    snippetPathReplace: [
        'assets/minimalist-blocks/images/',
        'https://path.to/assets/minimalist-blocks/images/' 
    ], // Replace local image paths with remote URLs

    // Module and plugin paths
    modulePath: 'https://path.to/assets/modules/',
    pluginPath: 'https://path.to/contentbuilder/',

    // Media path for AI-generated content (e.g., random images)
    mediaPath: 'https://path.to/assets/gallery/',
    
    // Typography styles path
    contentStylePath: 'https://path.to/assets/styles/',
    
    // Templates path
    templates: [
        {   
            url: 'https://path.to/assets/templates-simple/templates.js',
            path: 'https://path.to/assets/templates-simple/', 
            pathReplace: [],
            numbering: true,
            showNumberOnHover: true,
        },
        {   
            url: 'https://path.to/assets/templates-quick/templates.js',
            path: 'https://path.to/assets/templates-quick/', 
            pathReplace: [],
            numbering: true,
            showNumberOnHover: true,
        },
        {   
            url: 'https://path.to/assets/templates-animated/templates.js',
            path: 'https://path.to/assets/templates-animated/', 
            pathReplace: [],
            numbering: true,
            showNumberOnHover: true,
        },
    ],
      
    // Form Builder module paths
    assetsFolder: 'https://path.to/assets/formfiles/',
    exampleImageUrl: 'https://path.to/assets/formfiles/ai-V8Khk.jpg',
    exampleVideoUrl: 'https://path.to/assets/formfiles/ai-thhyR.mp4',
    exampleAudioUrl: 'https://path.to/assets/formfiles/ai-3EVMb.wav',
});

These settings allow full control over where ContentBox looks for external files — making it easy to host assets remotely or serve them from optimized delivery networks.