About
Alive5 provides an embeddable chat widget with real-time chat, bots/playbooks, video calls, and custom UI color schemes. My task was to improve widget performance, implement core features and develop visual drag&drop chat bot flow builder.
Highlights
- Improved load time by 30% and optimized embeddable chat widget that utilizes vanilla JavaScript
- Adapted the widget code to comply with WCAG AA specifications, which directly led to adoption by Harvard University
- Enhanced and standardized over 20 screens in the admin panel that uses Angular, Bootstrap, and D3.js
- Developed a drag&drop nodes logic editor for a bot builder using the JsPlumb library
- Conceptualized and implemented generative widget themes that automatically fine-tuned user custom color schemes to meet WCAG AA readability standards
Challenge
Improve load time and performance of the embeddable chat widget, and implement core features like video calls, modal system, generative themes, and animations. Develop visual drag&drop bot flow builder. Improve chat analytics reports.
Solution
Build Drag&Drop bot flow editor that represents the logic behind the chat conversation flow. Use jsplumb as a foundation for a flowchart interface.
Develop supportive features for the Bot Builder like mini-map, zoom-in/out, infinite canvas and path highlight for a selected node.
Standardize and improve chat analytics dashboard.
Optimize widget loading logic to prevent blocking of a customer website load, by splitting widget logic into two steps: minimal possible script loading + lazy load of the rest of the scripts and assets, and composing the interface.
Organize code delivery process using gulp and 3rd party libraries to automatically merge and compress code and minimize assets.
Improve UI accessibility to make it compliant with WCAG 2.2 AA. Develop a contrast colors generator to ensure that custom color themes will provide a readable interface.
Design and implement micro-animations to provide a smooth and engaging User Experience.
Develop a reusable Modal component which is used to show users additional content, and payment forms, and embed external websites, like calendly.