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

• Introduction

• Prerequisites
• Overview
• Step-by-Step Guide
  • Step 1: Setting Up Your Custom Widget
  • Step 2: Integrating With the Funnel Builder
  • Step 3: Communication Between Application and Funnel Builder
  • Step 4: Events and JS Integration 
• Example: Marketing Price Banner Widget

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:

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

Parameters:

html : HTML content required for widget to render along with styles

Example: 

<style>{Your styles goes here}</style>
<div class="hl-banner">{Your HTML content goes here}</div>
Copy

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:

    settings: {
      widgetHeight: number
      widgetWidth: number
      image: string
    }
Copy

• On application intialization or the initial handshake, expect for the following payload

  { elementStore: Object } // The elementStore which is emitted by your application while sending the code to parent. Use this to prefill settings which is already saved by user for your widget in the funnel builder.

Copy

• and ensure that you emit the initial state of preview

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

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:

   var event = new Event('customWidgetOpenPopup');
   window.dispatchEvent(event)
Copy

    2. customWidgetGoToNextStep

Description: This event triggers an action to move to the next step/page in the funnel/website.

Example:

   var event = new Event('customWidgetGoToNextStGoToNextStep');
   window.dispatchEvent(event)
Copy

Example: Marketing Price Banner Widget