Building Input Driven Blocks

This guide walks you through creating a Custom Block that collects user input (such as text, selections,) and utilizes the Superfans SDK to process that data or trigger native app actions.

Steps to create input driven blocks

Access the Builder

Navigate to the Custom Blocks section of the dashboard from the Settings menu on the sidebar.

Click on Create new Custom Block

Choose create via HTML.

Choose Block Type

Provide the following:
- Block name
- Block type
- Block placement
Click on Create Block.

Your block is now created. You can customize it however you want and add it to the respective page.

Add Input Fields for the Blocks

To create inputs at the block level, click on Edit block details on the top right.
To have the input type as Text, click on "Add input field".
Provide the title, placeholder.
Make Sure you copy the unique ID of this input field.
To add input type as dropdown, click on "Add Dropdown".
Provide the Title and add the values for the dropdown by clicking "Add items". If needed, you can choose multi-select option.
Make sure you copy the unique id of this field.

Start Coding

Add the required HTML code in the HTML section of the app.
Add the corresponding CSS to beautify the Elements in CSS section.

To retrieve the values from the input fields, make sure you follow this syntax in JS section.

const discount_code_input = `{{discount-code}}`
// discount-code -> unique ID of the input field
const discount_application_type_input = `{{type-of-discount}}`;
// type-of-discount -> unique id of the dropdown field

Provide the necessary logic required for the desired use case click on Save changes.
Place the block in the desired page of the app and thats all! We're done!

Here's the sample code which applies the discount on the cart page based on inputs. The customer can choose if the disocunt has to be manually applied or automatically applied on the cart page.

<div class="cart-container">
        <div class="discount-section">
            <div id="discount-status" class="status-message"></div>
            <div id="manual-discount-container" class="input-container hidden">
                <input type="text" id="discount-input" placeholder="Enter coupon code">
                <button id="apply-btn">Apply</button>
            </div>
            <p id="feedback-msg" class="feedback"></p>
        </div>
</div>

.cart-container {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 350px;
}
h2 {
    margin-top: 0;
    color: #333;
}
.discount-section {
    margin-top: 20px;
}
.simulation-controls {
    margin-bottom: 15px;
    font-size: 12px;
    color: #666;
}
.simulation-controls button {
    margin-left: 5px;
    padding: 2px 6px;
    cursor: pointer;
}
.status-message {
    font-size: 14px;
    font-weight: 500;
    color: #0071e3;
    margin-bottom: 10px;
}
.input-container {
    display: flex;
    gap: 8px;
    transition: all 0.3s ease;
}
.input-container.hidden {
    display: none;
}
input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}
input[type="text"]:focus {
    outline: none;
    border-color: #0071e3;
}
#apply-btn {
    background-color: #0071e3;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
#apply-btn:hover {
    background-color: #005bb5;
}
.feedback {
    font-size: 13px;
    margin-top: 8px;
}
.feedback.success { color: #1d1d1f; font-weight: bold; }
.feedback.error { color: #ff3b30; }

const discount_code_input = `{{discount-code}}`
const discount_application_type_input = `{{type-of-discount}}`;
let discount_code = "";
let discount_application_type = "";
discount_code = discount_code_input.toString().trim();
discount_application_type = discount_application_type_input.toString().trim();
// Main elements
const manualContainer = document.getElementById('manual-discount-container');
const discountInput = document.getElementById('discount-input');
const applyBtn = document.getElementById('apply-btn');
const statusMsg = document.getElementById('discount-status');
const feedbackMsg = document.getElementById('feedback-msg');
let currentActiveCode = "";
/**
 * Handles initialization when data is fetched/passed regarding discount application type.
 * @param {string} type - 'auto' or 'manual'
 * @param {string} code - The discount coupon string
 */
function initializeDiscountLogic(type, code) {
    // Reset layout states
    feedbackMsg.textContent = "";
    discountInput.value = "";
    currentActiveCode = code;
    if (type === 'Automatic') {
        // 1. Hide the manual coupon field
        manualContainer.classList.add('hidden');
        statusMsg.textContent = "✨ Auto-applying your best fan discount...";
        // 2. Fire SDK Event automatically
        triggerSDKDiscount(currentActiveCode);
    } else if (type === 'Manual') {
        // 1. Show manual input box
        manualContainer.classList.remove('hidden');
        statusMsg.textContent = "Have a Superfans promotional code?";
    }
}
// Function to call the SDK trigger
async function triggerSDKDiscount(code) {
    await Superfans.actions.applyDiscount([code]);
    VajroSDK.listeners.onCartUpdated(() => {
        if(discount_code === VajroSDK.variables.cart.appliedDiscounts[0].code)
        {
           feedbackMsg.className = "feedback success"; 
           feedbackMsg.textContent = "✅ Premium Discount Applied!";
        }
        else{
            feedbackMsg.className = "feedback error";
            feedbackMsg.textContent = "Failed to add discount.";
        }
});
}
// Click listener for Manual input configurations
applyBtn.addEventListener('click', () => {
    const userEnteredCode = discountInput.value.trim();
    if (!userEnteredCode) {
        feedbackMsg.className = "feedback error";
        feedbackMsg.textContent = "Please enter a code before applying.";
        return;
    }
    triggerSDKDiscount(userEnteredCode);
});
initializeDiscountLogic(discount_application_type,discount_code);
Superfans.actions.resizeBlock();