Whatsapp widget

Add a floating widget to open WhatsApp

🎮 Demo & Configurator

Visit the live demo and interactive configurator to customize and test the widget before integrating it into your website.

Getting Started

Add this javascript at the end of your page:

<script type="text/javascript">
!function(w,h,a,t,s,p){
    w.whatsapp || (
    s = h.createElement(a),
    s.src = t,
    p = h.getElementsByTagName(a)[0],
    p.parentNode.insertBefore(s, p)
)}(window, document, "script", "https://cdn.jsdelivr.net/gh/miguelcolmenares/whatsapp-widget/dist/js/whatsapp-widget.js");
window.addEventListener('load', function(){
    new whatsapp({
        title: '¿Necesitas ayuda?',
        description: 'Chatea con nosotros por Whatsapp',
        agents:[{
            name: "Servicio al cliente",
            phone: "+57 320 1234567",
            hours: "Disponible 9am - 6pm",
            cta: "Haz clic para iniciar chat",
            message: "Hola, me gustaría obtener más información",
            schedule: [
                ["9:00", "18:00"], //Sundays or Holidays
                ["9:00", "20:00"],
                ["9:00", "20:00"],
                ["9:00", "20:00"],
                ["9:00", "20:00"],
                ["9:00", "22:00"],
                ["10:00", "18:00"] // Saturday
            ]
        },{
            name: "Soporte técnico",
            phone: "+57 320 7654321",
            hours: "Disponible 9am - 6pm",
            cta: "Haz clic para iniciar chat"
        }]
    })
});
</script>

Widget Options

Argument	Type	Default value
title	String	¿Necesitas ayuda?
description	String	Chatea con nosotros por Whatsapp
agents	Array	[]

Agents Options

Argument	Type	Default value
name	String	""
phone	String	""
hours	String	""
cta	String	""
message	String	""
schedule	Array	[]

Example:

new whatsapp({
    title: '¿Necesitas ayuda?',
    description: 'Chatea con nosotros por Whatsapp',
    agents:[{
        name : "Servicio al cliente",
        phone: "+57 320 2851704",
        hours: "Disponible 9am - 6pm",
        cta  : "Haz clic para iniciar chat",
        message: "Hola, me gustaría obtener más información",
        schedule: [
            ["9:00", "18:00"], //Sundays or Holidays
            ["9:00", "20:00"],
            ["9:00", "20:00"],
            ["9:00", "20:00"],
            ["9:00", "20:00"],
            ["9:00", "22:00"],
            ["10:00", "18:00"] // Saturday
        ]
    }]
})

📁 Project Structure

This project uses a dual-branch approach:

• main branch: Contains only the source code (src/, configuration files, tests)

  • The dist/ folder is auto-generated by GitHub Actions on every push
  • Used for development and maintaining the source code

• docs branch: Contains the demo page and widget configurator

  • Includes index.html (interactive configurator)
  • The dist/ folder is auto-generated by GitHub Actions
  • Used for GitHub Pages

Development Workflow

1. Make changes to source code in the main branch
2. Push to main - GitHub Actions will automatically build and commit dist/ files
3. The CDN (JSDelivr) will serve the latest version from the main branch

Demo/Configurator Updates

1. Switch to the docs branch to update the demo or configurator
2. Push changes - GitHub Actions will build and the demo will be updated on GitHub Pages