Как написать такую кнопку на чистом JS, без jquery?
Здесь есть аналоги jQuery-методов на "чистом" JS, с примерами:youmightnotneedjquery.com
У виджета (блок или компонент) кнопки 3 состояния:
1-просто кружок с после загрузки,
2-с добавленным баблом (появляется по setTimeout, плюс вешается clearTimeout по клику, если чел сам нажал)
3-с закрытым бабблом и открытым чатом (на клик по кнопке и бабблу вешается закрытие баббла и открытие модальника с чатом)
И снова состояние 1, если чат свернули (вешаешь на клик по кнопке показ модалки с чатом, на outerclick/"свернуть чат" - скрытие модалки с чатом.
Таким образом, верстаешь эти все части и вешаешь обработку событий на переходы между ними. Сам чат имеет уже свою беково-фронтовую реализацию.