Introduction
This guide aims to help developers create custom widgets for use in funnel builder and integrate them seamlessly. We will cover how to create, set up, and render custom widgets using HTML, CSS, and JavaScript or any JS frameworks like Angular, React, Vue along with communication between your custom widget application and the funnel builder.
TABLE OF CONTENTS
Prerequisites
- Basic knowledge of HTML, CSS, JavaScript or Experience with JS frontend frameworks (Angular, React, Vue or similar)
- Familiarity with iFrames.
- Understanding of event-driven programming.
Overview
Custom widgets allow you to extend functionalities of a funnel builder by embedding custom elements like price banners or other interactive components.
Step-by-Step Guide
Step 1: Register yourself as a developer on the App Marketplace
1. Sign up as a developer on the App Marketplace.
2. Click on 'Create App' and start your app creation journey.
Step 2: Setting Up Your Custom Widget
Create Your Application
Develop an independent web application which allows users to interact with UI elements and generate HTML, CSS and JS (if required) which will render the custom widget element based on the settings that they choose.
The application should have the following functions which emits HTML, CSS and JS
createHtml() => Returns the HTML code for the widget
createJS() => Returns the JS code required for the widget to run in the website (optional)
createCss() => Returns the css code required for the widget styles.
The application should use postmate for iFrame communication between the funnel builder. The widget code can be emitted to the funnel builder via an event emit
Example:
Parameters:
html
: HTML content required for widget to render along with styles
Example:
js
: JS code required for the widget to run (optional)
note: make sure you don't wrap your js code inside <script /> tag
elementStore
: All the variables that represents the settings of the widget (variable names can be anything of your preference)
Example:
On application intialization or the initial handshake, expect for the following payload
and ensure that you emit the initial state of preview
Note: ensure that you emit the initial state Make sure that the data received is filled to all the respective settings of your widgets so that we can show the previously saved values on revisits
Step 3: Integrating With the Funnel Builder
1. Upload to Marketplace
Build the project and upload the HTML, CSS & JS file or dist folder as a zip to the marketplace app
Ensure it adheres to the platform's guidelines and submission requirements.
2. Add Custom Widget to Funnel Elements
Once approved and available in the marketplace, the funnel builder will list your widget under a “Custom Widgets” or similar section.
Users can install the custom widget from the marketplace.
Drag and Drop Widget to Funnel Builder
4. Limited Settings Configuration
- Configure limited settings (like margin, padding, visibility, and custom classes) to be editable directly from the funnel builder’s settings area.
- Main widget settings should be configured through an external pop-up handled by your application.
5. Render the Widget
Ensure the funnel builder can render the widget by interpreting the generated HTML, CSS, and JavaScript.
Step 4: Communication Between Application and Funnel Builder
Using iFrames
Host(will take care of hosting) your settings application inside an iframe within the funnel builder.
Make sure it generates and communicates HTML, CSS, and JS code as settings are adjusted.
Step 5: Events and JS Integration
Custom widget events allow your custom widget to communicate with the funnel preview environment. This communication is for creating interactive web applications where actions in the widget can trigger responses in the funnel preview, resulting in a smoother and more integrated user experience.
Key Concepts
- Event Emission: Your custom widget can send out signals (events) when users interact with it, like clicking a button or changing a setting.
- Event Handling: The funnel preview listens for these signals and performs certain actions in response, like opening a popup or moving to the next step in a funnel.
Events:
1. customWidgetOpenPopup
Description: This event triggers an action to open a popup on the preview side.
Example:
2. customWidgetGoToNextStep
Description: This event triggers an action to move to the next step/page in the funnel/website.
Example:
Example: Marketing Price Banner Widget
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article