I'm always excited to take on new projects and collaborate with innovative minds.

Phone

+880 1916-730963

Address

3/6 Pirerbag, Mirpur, Dhaka 1216

Social Links

Project

Customizable Livechat Widget Icon for Wordpress

Customizable Livechat Widget Icon for Website is a lightweight and powerful plugin designed to help you connect with your visitors instantly. Instead of complex chat systems, this plugin provides a clean, floating button that expands to show your most important contact channels: Facebook Messenger, WhatsApp, Telegram, and Phone Call.

Client

WordPress Project

Start Date

03-01-2026
Customizable Livechat Widget Icon for Wordpress
Description

Customizable Livechat Widget Icon for Wordpress is a lightweight and powerful plugin designed to help you connect with your visitors instantly. Instead of complex chat systems, this plugin provides a clean, floating button that expands to show your most important contact channels: Facebook Messenger, WhatsApp, Telegram, and Phone Call. 

It is designed with performance in mind using pure CSS animations and minimal JavaScript. The plugin offers a modern, side-by-side admin interface where you can customize the appearance, upload your own icons, and control the exact position of the widget for every device type (Desktop, Laptop, Tablet, and Phone).

Plugin Information
Key Features
  • Multi-Channel Support: Add links for Messenger, WhatsApp, Telegram, and Direct Phone Calls.
  • Fully Customizable Appearance: Upload your own custom Main Chat Icon (PNG/SVG) or use the default one.
  • Dynamic Background Color: Change the widget background color. The pulse animation automatically adapts to your chosen color.
  • Responsive Positioning: Define specific pixel offsets (Bottom & Side) for Desktop, Laptop, Tablet, and Mobile separately. No more overlapping with other elements!
  • Smart Toggle Behavior: Smooth hover effect for desktops and Click-to-Toggle behavior for mobile devices for better user experience.
  • Easy Admin Panel: User friendly settings page, conveniently accessible from Tools → Livechat Manage.
  • Lightweight & Fast: Zero bloat. Uses optimized assets and clean code to ensure your site speed remains top-notch.
Technologies Used
  • PHP & WordPress Plugin API – Core plugin functionality, hooks, and settings management.
  • HTML5 & CSS3 – Frontend widget structure, responsive design, and pulse animations.
  • JavaScript (Vanilla & jQuery) – Frontend click/toggle behavior and backend media uploader integration.
  • WordPress Settings API – Secure handling of plugin options and database interactions.
  • Dashicons – Native WordPress icons for the admin interface.
Installation
  • Download the plugin zip file and extract it.
  • Upload the chatikonix-customizable-livechat-widget-icon folder to /wp-content/plugins/.
  • Alternatively, download the github repository as a ZIP file, then go to Dashboard > Plugins > Add Plugin > Upload Plugin > install Now > and Activate Plugin.
  • You can also install it form the plugin store by searching name of the plugin.
  • Activate the plugin via the Plugins menu in WordPress.
  • Go to Dashboard → Tools → Livechat Manage.
  • Configure your social links, upload a custom icon (optional), and adjust positioning.
  • Click Save Settings and visit your site to see the live chat widget in action.
Design Highlights
  • Clean Settings Interface: A modern, card-based layout that makes configuration simple and intuitive.
  • Fast & Reliable: Lightweight architecture ensures instant loading without slowing down your website.
  • Minimal & Focused: No unnecessary features or bloat—does exactly what it promises perfectly.
Frequently Asked Questions

Where can I find the settings page?
- The settings are located under (Tools → Livechat Manage) in your WordPress dashboard.

Can I use my own image as the chat icon?
- Yes! In the settings panel, you can upload any PNG, JPG, or SVG image to be used as the main floating button icon.

How do I change the position on mobile devices?
- In the settings page, look for the "Responsive Positioning" section. You can set specific "Bottom" and "Side" pixel values for Phone, Tablet, Laptop, and Desktop independently.

Does this plugin store any user data?
- No. This plugin simply provides redirect links to your social media profiles. It does not track or store any visitor data.

Screenshot

Admin Settings: Appearance and Position configuration.

screenshot-1-1
 

 

Frontend view (Desktop): The widget expanded, showing social media icons (Messenger, WhatsApp, Telegram, Phone).

screenshot-3-1

 

Changelog

1.0.3

  • Feature: Complete redesign of the Admin Settings page with a modern side-by-side layout.
  • Security: Implemented strict output escaping (esc_url, esc_attr) and sanitization to meet WordPress standards.
  • Improvement: Moved inline JavaScript to external file and used `wp_enqueue_script` for better performance.
  • Fix: Resolved "Text Domain" mismatch and standardized plugin slug.
  • Update: Replaced SVG icons with high-quality PNGs for better cross-browser compatibility.

1.0.2

  • Feature: Complete redesign of the Admin Settings page with a modern side-by-side layout.
  • Improvement: Enhanced custom icon handling (uploaded images now display in original colors).
  • Fix: Replaced SVGs with high-quality PNG icons for better cross-browser compatibility.
  • Fix: Improved hover transition smoothness and default background color logic.

1.0.1

  • Feature: Added "Responsive Positioning" controls (separate offsets for Desktop, Laptop, Tablet, and Phone).
  • Fix: Fixed mobile touch behavior (widget now toggles on click/tap instead of hover).
  • Improvement: Added dynamic RGB calculation for the pulse animation color.


1.0.0

  • Initial release.
Update Notice

1.0.3 = Stable release.

License & Copyright
Share

Leave a comment

Your email address will not be published. Required fields are marked *