Skip to content
Javascript widget that makes easy to integrate WhatsApp communication with your customers.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
assets
dev
.gitignore
README.md
widget.js

README.md

WhatsWidget mockup

WhatsWidget

WhatsWidget is a simple javascript widget that allow your customers to talk to you directly on whatsapp. It's based on this post by Jenyay so if you're interested in building javascript widgets, start there 👍.

Usage

Just add a script before your closing head tag.

(function (w,d,s,o,f,js,fjs) {
    w['ww']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs)
}(window, document, 'script', 'whatswidget', 'https://cdn.jsdelivr.net/gh/mascarell/whatswidget/widget.js'))

whatswidget('config', {
    message: 'Widget example! 🔥',
    phone: '123456789',
    showMessageAlways: true,
    useCookies: true
})

Configuration options

description required default
message Widget welcome message. If not provided, no message will be shown. No
phone Don't forget to add the prefix of your country, for example, 34666666666 (Spain uses +34 for the prefix, don't use + or parentheses for the number). If no number is provided, the widget will not redirect on click. No
floatLeft Align the widget to the left. By default it's aligned to the right. No false
showMessageAlways The message is hidden by default on mobile viewports, it is, however, responsive, so just change to true and it will show on smartphones too. No false
useCookies Show the message only once per day, change to false to not use cookies and show the message everytime the user visits your site. No false

Run the project locally

git clone https://github.com/mascarell/whatswidget.git
cd whatswidget

# install dependencies
cd dev
npm install

# to test locally
npm run start
#or
npm run build

# to build for release
npm run build-release
You can’t perform that action at this time.