Help Center

Introduction

This guide provides developers with the knowledge needed to create custom widgets for use within the CRM's funnel builder. You'll learn how to build, configure, and integrate interactive web components that extend the functionality of funnels and websites.

Prerequisites

Before beginning, ensure you have:

Basic understanding of HTML, CSS, and JavaScript
Experience with frontend frameworks like React, Angular, or Vue (optional)
Familiarity with iFrames and their communication methods
Knowledge of event-driven programming concepts

Understanding Custom Widgets

Custom widgets allow you to embed specialized interactive elements into funnels, such as dynamic price displays, booking interfaces, or custom calculators. These widgets appear as drag-and-drop elements in the funnel builder once published to the App Marketplace.

Development Process

Step 1: Register as a Developer

Begin by registering as a developer on the App Marketplace. Navigate to the developer section and select 'Create App' to initiate the widget creation process.

Create a standalone web application that generates the HTML, CSS, and JavaScript code for your widget based on user-configurable settings. Your application must implement three core functions:

createHtml() - Returns the HTML structure of the widget
createCss() - Returns the styling rules for the widget
createJS() - Returns the JavaScript functionality (optional)

Use postmate or similar libraries for iFrame communication with the funnel builder. When settings change, emit the updated code to the parent application:

parent?.emit('code', {
html: htmlString,
js: jsString,
elementStore: settingsObject
})

The elementStore should contain all configurable settings for your widget, such as dimensions, images, or text content. When your application initializes, it will receive any previously saved settings to prefill the configuration interface.

Step 3: Prepare for Marketplace Submission

Build your project and compress the distribution files into a ZIP archive. Important considerations:

Use relative paths (./css/style.css) instead of absolute paths
Ensure your JavaScript code is not wrapped in <script> tags
Follow the platform's submission guidelines

Once approved, your widget will appear in the 'Custom Widgets' section of the funnel builder, where users can install it.

Step 4: Implement Funnel Integration

Your widget settings application will be hosted within an iFrame inside the funnel builder. As users adjust settings through your interface, emit the updated code to ensure real-time preview updates.

The funnel builder provides limited styling controls (margins, padding, visibility) while your application handles the primary configuration through a popup interface.

Step 5: Enable Interactive Events

Custom widgets can trigger actions within the funnel preview environment using JavaScript events. This enables interactive experiences where widget interactions affect the surrounding funnel.

Available Events:

customWidgetOpenPopup - Opens a popup in the funnel preview
Example: window.dispatchEvent(new Event('customWidgetOpenPopup'))
customWidgetGoToNextStep - Advances to the next funnel step
Example: window.dispatchEvent(new Event('customWidgetGoToNextStep'))

These events allow your widget to create seamless interactions with the host funnel, providing users with a cohesive experience.

Best Practices

Test your widget thoroughly in various funnel configurations
Ensure responsive design for mobile and desktop viewing
Optimize code performance to maintain funnel loading speeds
Provide clear documentation for end-users

Developer Guide: Creating Custom Widgets for the App Marketplace