Website contacts widget: button & contacts form: start chat in whatsapp, telegram, viber, callback etc. HTML, CSS & a bit of jQuery. 3 minutes to intall. 100% free to use.
Just add js & css project links and copy html code into the bottom of your section. Change phone +199999999999 to your actual number, facebook account, /contact-us to actual contact page link
Font Awesome 4.X.X or 5.X.X
- Contacts button widget for FontAwesome4
- Contacts button widget for FontAwesome4 - 1 html page with built-in JS & CSS (link)
- Contacts button widget for FontAwesome5
- Contacts button widget for FontAwesome5 - 1 html page with built-in JS & CSS (link)
CSS #contact_widget_button style right bottom by default
<body>
<-- ... -->
<-- AFTER MAIN PAGE CONTENT -->
<h1 class="center">Contacts button widget</h1>
<!-- [START] Contact Widget Button -->
<div id="contact_widget_substrate"></div>
<div id="contact_widget_button" class="contact_widget_left d-flex align-items-center justify-content-center">
<div class="contact-widget-pulsation"></div>
<div class="contact-widget-icon text-center d-flex align-items-center justify-content-center"><i class="fa fas fa-envelope"></i><span class="contact-widget-text d-none">Contact button</span></div>
<div class="contact-widget-dropdown d-flex flex-column align-items-start">
<a rel="noopener noreferrer" href="https://m.me/my-facebook-messenger" target="_blank" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-messenger d-flex align-items-center justify-content-center"><i class="fab fa-facebook-messenger"></i></span><span>Messenger</span></a>
<a rel="noopener noreferrer" href="https://api.whatsapp.com/send?phone=+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-whatsapp d-flex align-items-center justify-content-center"><i class="fab fa-whatsapp"></i></span><span>WhatsApp</span></a>
<a rel="noopener noreferrer" href="https://t.me/+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-telegram d-flex align-items-center justify-content-center"><i class="fab fa-telegram"></i></span><span>Telegram</span></a>
<a rel="noopener noreferrer" href="viber://chat?number=+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center contact-widget-viber-desktop"><span class="contact-widget-item-icon contact-widget-viber d-flex align-items-center justify-content-center"><i class="fa-phone-square fab fa-viber"></i></span><span>Viber</span></a>
<a rel="noopener noreferrer" href="viber://add?number=+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center contact-widget-viber-mobile"><span class="contact-widget-item-icon contact-widget-viber d-flex align-items-center justify-content-center"><i class="fa-phone-square fab fa-viber"></i></span><span>Viber</span></a>
<a rel="noopener noreferrer" href="mailto:[email protected]" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-email d-flex align-items-center justify-content-center"><i class="far fa-envelope fa fa-envelope-open"></i></span><span>[email protected]</span></a>
<div href="javascript:;" data-src="#callback_form" data-fancybox class="contact-widget-item d-flex align-items-center">
<span class="contact-widget-item-icon contact-widget-call d-flex align-items-center justify-content-center"><i class="fas fa fa-phone"></i></span><span>Callback request</span>
</div>
<a href="/contact-us" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-contacts d-flex align-items-center justify-content-center"><i class="fas fa fa-address-book"></i></span><span>Our contacts</span></a>
</div>
</div>
<!-- [END] Contact Widget Button -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" media="screen" />
<link href="../css/contacts-button-widget.css" rel="stylesheet" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../js/contacts-button-widget.js></script>
</body>