Chat Widget

Floating contact widget — chat button with stacked social media icons above and a quick-contact modal with WhatsApp, Telegram, and a callback form

The Chat Widget is a persistent UI element fixed at the bottom-right corner of the page, visible across all sections. It gives the user instant access to multiple communication channels without redirecting them away from the page. Above the main chat button, 5 social media icons (Facebook, Instagram, LinkedIn, YouTube, TikTok) are stacked vertically — smaller, with a scale hover effect. Clicking the main button opens an animated modal with WhatsApp and Telegram on one row (aligned with .btn-wa / .btn-tg in the component library) and a callback form (name, email, phone in a single column). The main chat button uses --color-success so it stands out from primary-blue navigation; it includes an animated pulse ring and a notification dot.

Preview — Widget closed (light background)

State 1 · Closed .chat-widget
Page content

Preview — Widget on dark background

State 2 · Dark background .chat-widget
Dark page content

Preview — Modal open

State 3 · Modal open .widget-modal-overlay
Page content

Anatomy & structure

Floating widget

  • .chat-widget — Fixed bottom-right container
  • .widget-socials — Vertical stack of social icons
  • .widget-social-btn.fb/ig/li/yt/tt — Coloured social buttons
  • .widget-chat-btn — Main chat button (--color-success)
  • .notif-dot — Accent notification dot
  • ::after pulse ring — CSS attention animation

Contact modal

  • .widget-modal-overlay — Blurred overlay
  • .widget-modal — Animated modal container (slide-up)
  • .widget-modal-head — Gradient header with consultant + status
  • .btn-modal-wa / .btn-modal-tg — WhatsApp / Telegram (row; aligned with .btn-wa / .btn-tg)
  • .modal-form-row — Vertical stack of fields
  • .modal-input — Name, email, phone
  • .btn-modal-submit — Request call button

Implementation

The widget is placed outside any section, directly before </body>, with position: fixed; bottom: 28px; right: 28px; z-index: 999 applied to .chat-widget. The modal is managed via simple JavaScript: the functions openChatModal() and closeChatModal() add/remove the .hidden class on .widget-modal-overlay. Closing can also be triggered by clicking the overlay.

Components used