Про програму
Alive5 надає вбудовуваний віджет з чатом у реальному часі, ботами/сценаріями, відеодзвінками та кастомними кольоровими схемами інтерфейсу. Моїм завданням було покращення продуктивності віджету, реалізація ключових функцій та розробка візуального конструктора потоків чат-бота з перетягуванням елементів.
В центрі уваги
- Покращив час завантаження на 30% та оптимізував вбудовуваний чат-віджет на базі ванільного JavaScript
- Адаптував код віджету відповідно до специфікацій WCAG AA, що безпосередньо призвело до його впровадження Гарвардським університетом
- Покращив та стандартизував понад 20 екранів адмін-панелі на базі Angular, Bootstrap та D3.js
- Розробив drag&drop редактор вузлів логіки для конструктора ботів з використанням бібліотеки JsPlumb
- Концептуалізував та реалізував генеративні теми віджету, що автоматично підлаштовують кастомні кольорові схеми користувача для відповідності стандартам читабельності WCAG AA
Виклик
Покращити час завантаження та продуктивність вбудовуваного чат-віджету та реалізувати ключові функції, як-от відеодзвінки, система модальних вікон, генеративні теми та анімації. Розробити візуальний конструктор потоків чат-бота з перетягуванням. Покращити аналітичні звіти чату.
Розв'язок
Розробити редактор потоку бота з Drag&Drop, який відображає логіку розмовного потоку чату. Використати jsplumb як основу для інтерфейсу схеми потоку.
Розробити допоміжні функції для конструктора ботів, як-от мінімальна карта, збільшення/зменшення, нескінченний холст та підсвічування шляху для вибраного вузла.
Стандартизувати та покращити дашборд аналітики чату.
Оптимізувати логіку завантаження віджету, щоб запобігти блокуванню завантаження сайту клієнта, розділивши логіку на два кроки: завантаження мінімального скрипту + ліниве завантаження решти скриптів і ресурсів та складання інтерфейсу.
Організувати процес доставки коду з використанням gulp та сторонніх бібліотек для автоматичного об'єднання та стиснення коду і мінімізації ресурсів.
Покращити доступність UI відповідно до WCAG 2.2 AA. Розробити генератор контрастних кольорів для забезпечення читабельного інтерфейсу в кастомних кольорових темах.
Розробити та реалізувати мікроанімації для плавного та привабливого досвіду користувача.
Розробити компонент модального вікна, що можна повторно використовувати. Цей компонент відображатиме додатковий контент та форми оплати, а також вбудовуватиме зовнішні сайти, як-от Calendly.
