🚀 Floating Calls & Social Buttons Widget

A free, open-source, privacy-first floating contact button widget for any website. Add WhatsApp, phone, email, social media, and custom contact buttons to your site in minutes—no coding required!

🔗 Live Demo & Builder | 📚 Documentation | 💬 Support

![Floating Widget Preview]

✨ Features

🎯 Core Features

100% Client-Side – No backend, no database, no server required
Privacy-First – Zero cookies, zero tracking, zero analytics
Lightweight – Under 10KB gzipped, zero dependencies
Universal Compatibility – Works on any website, CMS, or tech stack
Accessible – Full ARIA support, keyboard navigation, screen reader friendly

🎨 Customization

16+ Button Types – Phone, WhatsApp, Email, SMS, Telegram, Messenger, Viber, Instagram, Facebook, Twitter/X, LinkedIn, YouTube, TikTok, Discord, Skype, WeChat, LINE, and custom links
Visual Builder – Configure everything without touching code
Position Control – Place in any corner with custom offsets
Appearance Options – Colors, sizes, icons, labels, animations
Behavior Settings – Click/hover triggers, scroll triggers, delays

🛡️ Technical Excellence

Shadow DOM Isolation – No CSS conflicts with your site
Mobile Responsive – Optimized for all screen sizes
No External Dependencies – Pure vanilla JavaScript
SEO Friendly – No impact on page speed or rankings
Open Source – MIT licensed, free forever

🚀 Quick Start

Option 1: Use the Visual Builder (Recommended)

Visit our Online Builder
Add your contact buttons
Customize appearance and behavior
Copy the generated code
Paste into your website before </body>

Option 2: CDN Installation

Add this code before your closing </body> tag:

<!-- Floating Widget by LiveUpx.com -->
<script>
  window.floatingWidgetConfig = {
    buttons: [
      { type: 'whatsapp', value: '1234567890', label: 'WhatsApp Us' },
      { type: 'phone', value: '+1234567890', label: 'Call Us' },
      { type: 'email', value: '[email protected]', label: 'Email Us' }
    ],
    position: { vertical: 'bottom', horizontal: 'right' },
    mainButton: { icon: 'chat', color: '#6366f1' }
  };
</script>
<script src="https://cdn.jsdelivr.net/gh/liveupx/Floating-Calls-Social-Buttons-Widget@latest/dist/widget.min.js" defer></script>

Option 3: Self-Hosted

Download dist/widget.min.js
Upload to your server
Reference it in your HTML:

<script>
  window.floatingWidgetConfig = { /* your config */ };
</script>
<script src="/path/to/widget.min.js" defer></script>

📖 Documentation

Configuration Options

window.floatingWidgetConfig = {
  // Contact buttons array
  buttons: [
    {
      type: 'whatsapp',      // Button type (see supported types below)
      value: '1234567890',   // Contact value (phone, username, URL, etc.)
      label: 'Chat with us', // Display label
      color: '#25D366',      // Button color (optional)
      newTab: true           // Open in new tab (optional, default: true)
    }
  ],

  // Main toggle button
  mainButton: {
    icon: 'chat',     // Icon: 'plus', 'chat', 'phone', 'menu', 'heart'
    color: '#6366f1', // Background color
    size: 56          // Size in pixels (40-72)
  },

  // Widget position
  position: {
    vertical: 'bottom',   // 'top' or 'bottom'
    horizontal: 'right',  // 'left' or 'right'
    offsetX: 24,          // Horizontal offset in pixels
    offsetY: 24           // Vertical offset in pixels
  },

  // Appearance settings
  appearance: {
    buttonSize: 48,           // Contact button size (32-64)
    spacing: 12,              // Space between buttons (4-24)
    expandDirection: 'up',    // 'up', 'down', 'left', 'right'
    showLabels: true,         // Show button labels on hover
    pulseAnimation: true,     // Pulsing animation on main button
    shadow: true              // Button shadows
  },

  // Behavior settings
  behavior: {
    trigger: 'click',         // 'click' or 'hover'
    showDelay: 0,             // Delay before showing widget (seconds)
    scrollTrigger: false,     // Show only after scrolling
    scrollOffset: 100,        // Scroll distance to trigger (pixels)
    closeOnOutsideClick: true // Close when clicking outside
  }
};

Supported Button Types

Type	Description	Value Format
`phone`	Phone call	`+1234567890`
`whatsapp`	WhatsApp chat	`1234567890` (without +)
`email`	Email	`[email protected]`
`sms`	SMS message	`+1234567890`
`telegram`	Telegram	`username`
`messenger`	Facebook Messenger	`page-id`
`viber`	Viber	`+1234567890`
`instagram`	Instagram	`username`
`facebook`	Facebook	`page-name`
`twitter`	Twitter/X	`username`
`linkedin`	LinkedIn	`username` or `company/name`
`youtube`	YouTube	`@channel` or `channel-id`
`tiktok`	TikTok	`@username`
`discord`	Discord	`invite-code`
`skype`	Skype	`username?call`
`wechat`	WeChat	WeChat ID (display only)
`line`	LINE	`line-id`
`link`	Custom URL	Full URL

JavaScript API

// Get widget instance
const widget = window.FloatingWidget;

// Update configuration
widget.updateConfig({
  mainButton: { color: '#ff0000' }
});

// Add a new button
widget.addButton({
  type: 'whatsapp',
  value: '1234567890',
  label: 'WhatsApp'
});

// Remove a button by index
widget.removeButton(0);

// Show/hide widget
widget.show();
widget.hide();

// Expand/collapse buttons
widget.expand();
widget.collapse();

// Destroy widget
widget.destroy();

🔌 Platform Installation Guides

WordPress

Go to Appearance → Theme Editor (or use a plugin like "Insert Headers and Footers")
Find footer.php or add to footer scripts
Paste the widget code before </body>
Save changes

Or use a plugin:

Insert Headers and Footers by WPBeginner
Header Footer Code Manager
WPCode

Shopify

Go to Online Store → Themes → Actions → Edit code
Find theme.liquid
Paste the widget code before </body>
Save

Wix

Go to Settings → Custom Code
Click Add Custom Code
Paste the widget code
Set placement to Body - end
Apply to All pages

Squarespace

Go to Settings → Advanced → Code Injection
Paste in the Footer section
Save

Webflow

Go to Project Settings → Custom Code
Paste in Footer Code section
Publish your site

HTML/Static Sites

Simply paste the code before </body> in your HTML files.

🔒 Privacy Philosophy

We believe in privacy by design:

No Cookies – We don't set any cookies, ever
No Tracking – No analytics, no user tracking, no data collection
No External Requests – All code runs locally, no data leaves your site
No Backend – No servers to hack, no databases to breach
No Dependencies – No third-party libraries that could inject tracking
Open Source – Full transparency, audit the code yourself

Your visitors' privacy is respected. Period.

🛠️ Development

Project Structure

floating-widget/
├── index.html         # Builder page
├── css/
│   └── builder.css    # Builder styles
├── js/
│   └── builder.js     # Builder logic
├── src/
│   └── widget.js      # Widget source code
├── dist/
│   ├── widget.min.js      # Minified production widget
│   └── widget.min.js.map  # Source map
├── examples/              # Usage examples
├── README.md
├── CONTRIBUTING.md
└── LICENSE

Building from Source

# Clone the repository
git clone https://github.com/liveupx/Floating-Calls-Social-Buttons-Widget.git
cd Floating-Calls-Social-Buttons-Widget

# Install dependencies
npm install

# Build minified version
npm run build

# Start development server
npm run dev

NPM Scripts

npm run build    # Build minified widget
npm run dev      # Start dev server
npm run lint     # Run linter
npm run test     # Run tests

🌟 Examples

Minimal Setup

<script>
  window.floatingWidgetConfig = {
    buttons: [
      { type: 'whatsapp', value: '1234567890' }
    ]
  };
</script>
<script src="https://cdn.jsdelivr.net/gh/liveupx/Floating-Calls-Social-Buttons-Widget@latest/dist/widget.min.js" defer></script>

Full-Featured Setup

<script>
  window.floatingWidgetConfig = {
    buttons: [
      { type: 'whatsapp', value: '1234567890', label: 'WhatsApp', color: '#25D366' },
      { type: 'phone', value: '+1234567890', label: 'Call Us', color: '#22c55e' },
      { type: 'email', value: '[email protected]', label: 'Email', color: '#ea4335' },
      { type: 'telegram', value: 'username', label: 'Telegram', color: '#0088cc' },
      { type: 'instagram', value: 'username', label: 'Instagram', color: '#E4405F' }
    ],
    mainButton: {
      icon: 'chat',
      color: '#6366f1',
      size: 60
    },
    position: {
      vertical: 'bottom',
      horizontal: 'right',
      offsetX: 20,
      offsetY: 20
    },
    appearance: {
      buttonSize: 48,
      spacing: 12,
      expandDirection: 'up',
      showLabels: true,
      pulseAnimation: true
    },
    behavior: {
      trigger: 'click',
      showDelay: 2,
      scrollTrigger: true,
      scrollOffset: 200
    }
  };
</script>
<script src="https://cdn.jsdelivr.net/gh/liveupx/Floating-Calls-Social-Buttons-Widget@latest/dist/widget.min.js" defer></script>

Left-Side Position

<script>
  window.floatingWidgetConfig = {
    buttons: [
      { type: 'phone', value: '+1234567890' },
      { type: 'email', value: '[email protected]' }
    ],
    position: {
      vertical: 'bottom',
      horizontal: 'left',
      offsetX: 20,
      offsetY: 20
    },
    appearance: {
      expandDirection: 'up'
    }
  };
</script>

🤝 Contributing

We love contributions! Please read our Contributing Guide to get started.

Ways to Contribute

🐛 Report bugs
💡 Suggest features
📝 Improve documentation
🔧 Submit pull requests
⭐ Star the repo
📢 Spread the word

💖 Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

Become a Sponsor

📄 License

This project is licensed under the MIT License – see the LICENSE file for details.

You are free to:

✅ Use commercially
✅ Modify
✅ Distribute
✅ Use privately

🙏 Credits

Developed with ❤️ by LiveUpx.com

Technologies Used

Vanilla JavaScript (ES6+)
Shadow DOM
CSS3 Animations
SVG Icons

📞 Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

🏷️ Tags

floating-button contact-widget whatsapp-button click-to-call social-buttons website-widget floating-contact chat-button call-button whatsapp-chat floating-action-button fab contact-form-alternative lead-generation website-plugin no-code privacy-first open-source vanilla-javascript lightweight accessible wcag aria responsive mobile-friendly seo-friendly wordpress-plugin shopify-app wix-widget squarespace webflow

📊 Stats

Made with ❤️ for the open-source community
⭐ Star us on GitHub

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
css		css
dist		dist
examples		examples
js		js
src		src
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
demo1.png		demo1.png
demo2.png		demo2.png
demo3.png		demo3.png
demo4.png		demo4.png
demo5.png		demo5.png
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json

License

liveupx/Floating-Calls-Social-Buttons-Widget

Folders and files

Latest commit

History

Repository files navigation