Skip to content
Patient Copilot Help Center

Developer Guide for selling Web-Widgets on the App Marketplace

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. ## 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 - Sign up as a developer on the App Marketplace. - 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 }) html: HTML content required for widget to render along with styles Example:
    {Your HTML content goes here}
    js: JS code required for the widget to run (optional) Note: make sure you don’t wrap your js code inside
    • { 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 3. 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. 4. 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: 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 github.com https://github.com/b805rohit/marketing-price-banner A Checklist before submitting your widget app for review When developing and integrating custom widgets into a funnel builder, it’s crucial to ensure they function effectively without causing any disruptions or conflicts. Please test your app to ensure it meets the criteria mentioned in this checklist before submitting the app for review. #### ✅ Upload Format Supported You are expected to: - Build your widget project (i.e., HTML, CSS, JS). - Bundle it into a .zip file (not .rar). - Upload the .zip file to the App Marketplace during the widget setup process. #### ❌ .rar or Other Formats -.RAR files are not supported.
  • Only .zip is mentioned as the accepted archive format. #### Best Practice When creating your widget: - Use relative paths for assets. - Keep your build clean — no unnecessary files or folders. - Ensure your HTML, CSS, and JS are in the correct directory structure before zipping. If you’re using a frontend framework (like React or Vue), zip the build/dist folder, not the entire project directory.