How to Build and Sell Custom Funnel Widgets on the Sparkforge App Marketplace

Custom widgets let developers add new elements to the Sparkforge funnel builder — price banners, interactive components, framework-driven UI. Your widget runs as an iframe app that emits HTML, CSS, and JS back to the builder over postmate.

Prerequisites

• HTML, CSS, and JavaScript fundamentals (or a JS framework like Angular, React, or Vue)
• Familiarity with iframes
• Comfort with event-driven programming

Step 1: Register as a developer

Sign up on the App Marketplace and click Create App to begin.

Step 2: Build the widget app

Develop a standalone web app where users configure the widget. Expose three functions:

• createHtml() returns the rendered HTML
• createJS() returns optional runtime JS
• createCss() returns the widget styles

Use postmate for iframe messaging. Emit the widget code to the parent like this:

parent?.emit('code', {
  html: html,
  js: js,
  elementStore: elementSettings
})

Payload parameters

• html — rendered HTML plus inline styles. Do not wrap JS inside <script> tags.
• js — optional runtime JS for events and interaction.
• elementStore — the settings object (any shape) so the builder can rehydrate saved values.

On init, the builder sends { elementStore: Object }. Prefill your UI from that payload, then immediately emit the initial preview state so saved values render correctly on revisits.

Step 3: Submit to the marketplace

1. Build your project and bundle the output into a .zip file. .rar is not supported.
2. Use relative paths (./css/style.css), never absolute paths.
3. Keep the directory clean — for React or Vue, zip the build or dist folder, not the full project.
4. Upload the zip during widget setup.

Once approved, the widget appears under Custom Widgets. Users install it and drag it into the funnel builder.

Step 4: Editor settings split

Limited settings (margin, padding, visibility, custom classes) live inside the funnel builder's settings panel. The main configuration UI lives in your iframe popup.

Step 5: Widget events

Custom widget events let your widget talk to the funnel preview at runtime.

• customWidgetOpenPopup — opens a popup on the preview side: window.dispatchEvent(new Event('customWidgetOpenPopup'))
• customWidgetGoToNextStep — advances the funnel: window.dispatchEvent(new Event('customWidgetGoToNextStep'))

If your framework uses a router, configure it in memory mode (e.g., Vue Router's createMemoryHistory).

For mobile media queries, target the .--mobile class so styles also apply in the builder's mobile preview.

Pre-submission checklist

• Does not break builder functionality
• Does not collide with other elements visually or functionally
• No unintended external scripts
• Preserves white labeling — no leaked brand details
• State persists across revisits
• Initial state renders correctly on load
• Every setting works as expected

Reference example

Marketing Price Banner widget: github.com/b805rohit/marketing-price-banner