Bloom CDN

Bloom CDN is designed for web-based projects such as web calculators. It seamlessly integrates with any static website, including WordPress, Joomla, Drupal, and other popular CMS platforms.

Installation
To install Bloom CDN on your website, copy and paste the following code within the head section. Replace your-api-key with your own API key.

All input and output elements must be placed within the bloom-container element. The CDN detects a submit action inside #bloom-container as a trigger for calculation.

<script src="https://cdn.jsdelivr.net/gh/bloom-engine/files/script.js?apiKey=your-api-key"></script>
Set Cell values of Spreadsheet
You can easily set spreadsheet cells using the data-label attribute. Specify it in the format SheetName!Cell. For example, to set cell A2 of Sheet1 use data-label="Sheet1!A2"

If the element type is input or select, Bloom CDN treats it as an input cell. For non-input elements, it is considered an output cell.

When defining output cells, you can also specify ranges, such as

Sheet1!A2 - Single value output Check sample here

Sheet1!A2:A5 - 1D array output Check sample here

Sheet1!A2:b4 - 2D array output Check sample here

Sample #1 (Single Value Output) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/gh/bloom-engine/files/script.js?apiKey=your-api-key"></script>
</head>
<body>

    <div id="bloom-container">
        <form>
            <div class="form-group">
                <label>Investment</label>
                <input type="text" data-label="Sheet1!B2">
            </div>
    
            <button>Calculate</button>
    
            <div>ROI: <span data-label="Sheet1!B5"></span></div>
        </form>
    </div>
    
</body>
</html>

input type="text" data-label="Sheet1!B2" - CDN consider as the input value for B2 cell of the Sheet1

span data-label="Sheet1!B5" - CDN set B5 cell value of the Sheet1 after doing calculation with new B2 cell value

Sample #2 (1D Array)

When you set output cell as Sheet1!C2:C4, Result will be a 1D array. To set each output correctly use both data-label and data-col


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/gh/bloom-engine/files/script.js?apiKey=your-api-key"></script>
</head>
<body>

    <div id="bloom-container">
        <form>
            <div class="form-group">
                <label>Investment</label>
                <input type="text" data-label="Sheet1!B2">
            </div>
    
            <button>Calculate</button>
    
            <div data-label="Sheet1!C2:C4">
                <p>ROI after 1 year: <span data-col="1"></span></p>
                <p>ROI after 5 year: <span data-col="2"></span></p>
                <p>ROI after 10 year: <span data-col="3"></span></p>
            </div>
        </form>
    </div>
    
</body>
</html>

input type="text" data-label="Sheet1!B2" - CDN consider as the input value for B2 cell of the Sheet1

div data-label="Sheet1!C2:C4" - Output range

span data-col="1" - Set 1st value of the array

Sample #3 (2D Array) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/gh/bloom-engine/files/script.js?apiKey=your-api-key"></script>
</head>
<body>

    <div id="bloom-container">
        <form>
            <div class="form-group">
                <label>Loan Amount</label>
                <input type="text" data-label="Sheet1!B2">
            </div>
    
            <button>Calculate</button>
    
            <div data-label="Sheet2!A2:C13">
                <p>Month: <span data-col="1"></span></p>
                <p>Interest Payment: <span data-col="2"></span></p>
                <p>Monthly Installment: <span data-col="3"></span></p>
            </div>
        </form>
    </div>
    
</body>
</html>

input type="text" data-label="Sheet1!B2" - CDN consider as the input value for B2 cell of the Sheet1

div data-label="Sheet2!A2:C13" - Output range

span data-col="1" - Set 1st value of 1st array of 2D array