Goal

Develop an embeddable survey widget that can be easily integrated into other websites with on-the-fly customization.

Phase 1:

• Create a customizable JavaScript/TypeScript component that:

  • Renders a toggle button and an iframe wrapper to display surveys.

  • Supports configurable styles for the button (text, icon, font, colors, hover effects, etc.) and identical positioning for both button and iframe.

  • Offers features such as auto-close (with mouse-aware timers), close-on-leave, and an in-iframe close ("X") button.

  • Supports both immediate (iframe-only) and toggleable rendering modes.

• This core code is already written and serves as a robust starting point for easy embedding and on-the-fly customization.

Phase 2:

• Enhance the functionality by adding:

  • Path-Specific Logic: Dynamically determine which survey to display based on the visitor’s URL path.

  • Event Logic: Trigger different surveys and adjust formatting on the fly based on various user interactions or other events.

This phased approach will allow for a simple integration method initially, with more advanced dynamic behaviors added later.