whatsappButton.js

v1.0.6 Main changes:

Changed metric system from rem to px for extensible compatibility.

Presentation

whatsappButton.js is a plugin made with javascript that creates a interactive button for your web aplications.
It is easy-to-use, customizable and resilient.

Try it out at: https://alvesalexsander.github.io/whatsappButton/
We have a friendly user interface to help you!

Install via NPM! running command: npm install whatsapp-button.js

Features

whatsappButton.js is a tool that will provide a new way to get to your public through the internet.

Here is some information about it:

Dependency-free: Built with pure javascript and css. No need to match other dependencies to have your whatsappButton.js live.
Highly customizable: whatsappButton.js wears the colors and fits along with your product.
Create personalized phrases to welcome your public, pick the color of your choice to style your button and, of course, a font style to carry your message!
Easy-to-use: Your users will be a click away from you. And you, just a few little steps to implementation.
whatsappButton.js is ready for deployment.
Open-source code: This is an open-source project. It means that you are free to download, edit and share improvements.
If possible, please credit the original author.
Friendly UI: Use our user interface that helps you on the creative process of your button. It will help you at setting and shaping up your button.
Check it out at: https://alvesalexsander.github.io/whatsappButton/

Usage

How To Use:

1. Install via NPM!: npm install whatsapp-button.js

Download plugin files at: whatsappButton.js page and put it inside your node_modules folder (path must to be node_modules/whatsapp-button.js).

2. Link the .CSS file or CDN .CSS URL with a link element in the head tag of your application.
3. Link the .JS file or CDN .JS URL with a script element in the head or body tags of your application.
4. Use the User Interface at https://alvesalexsander.github.io/whatsappButton/ to create your button layout

Check the Building section for further information.

5. At the end of the creation process, the UI will present you an javascript code like this one:

new WhatsappButton('5522123456789', 'Could we help you?', 'We are at your service! Want help at choosing a wine? Any other thing we could help?', 'netWinez, can we help?', '1', '#6f2045', '#000000', '', 'https://fonts.googleapis.com/css?family=Satisfy&display=swap')

Then, you can call the code shown on any .js file or in a script element to create your button.
Compatible with Google Chrome, Mozilla Firefox, Microsoft Edge and the most modern browsers.

Building

This section is a more technical insight that explains how the whatsappButton.js works.

1. Technology Stack - The plugin is fully developed with front-end technology. Made with Vanilla JavaScript and CSS Rules.
There is no other dependency than a web browser capable of parsing JavaScript ES5 (ES6 version is also available) and CSS3 specifications to run whatsappButton.js.
Compatible with Google Chrome, Mozilla Firefox, Microsoft Edge and the most modern browsers.

2. Instantiation Parameters - WhatsappButton is the class that handles some parameters at object instantiation.
These parameters are in charge of shaping up the button layout.

Parameters

These are the parameters in sequence of object instantiation:
new WhatsappButton(pNumber, wMessage, phMessage, dMessage, iconStyle, color, subColor, textColor, fontFamily)

Parameter	Type	Description
pNumber *	string(preferred), number	Enter only numbers of a phone number to received messages. For example: 5522123456789
wMessage	string	Will be displayed when mouse is over the button. Recommended: <=16 characters.
phMessage	string	This one will be shown while the user didn't type in the input field yet.
dMessage	string	At mobile, Whatsapp will be automatically launch with this message in chat input field
iconStyle	string(preferred), number	Pick an icon style of your choice. Values 0-4.
color	string(#xxxxxx/#xxx/rgb/rgba)	Pick a main color for the backgrounds. HEX and rgb/rgba formats are supported.
subColor	string(#xxxxxx/#xxx/rgb/rgba)	Pick a main color for the details. HEX and rgb/rgba formats are supported.
textColor	string(#xxxxxx/#xxx/rgb/rgba)	Pick a color for the texts. HEX and rgb/rgba formats are supported.
fontFamily	string(Google Fonts Name/URL)	Enter a font name or font URL from any of the available at Google Fonts API**. For example: 'Squada One' or 'https://fonts.googleapis.com/css?family=Squada+One&display=swap'

pNumber * - It is the only required parameter. Buttons called with this minimal requirement will have the default style applied.
Please, do not enter symbols or other characters than numbers in this parameter field.

fontFamily ** - For some reason, Press Start 2P is a known font style that does not work well.
It is possible that there may be a few more incompatible font styles.

3. Default styles:

These are the basic building informations about whatsappButton.js plugin.
Please, feel free to download and explore more about it.
If you have any tips, report or compliment(or complain) to add, do not hesitate to contact us.
You can e-mail the author at: alvesalexsander@live.com OR contato@alexsanderalves.com

User Interface

This is the whatsappButton.js User Interface.

The UI will help you with a live-preview version of your button. You can sneak peek at it before creating.
It was and is tested often to ensure a fail-proof result at creating your button.

When you are finished, click on the "I've done. Make my Button!" and the UI will make an instance of your ready-to-use whatsappButton! You may test your button to see how it works at will!
For last, the UI will also display instructions of how to use your button.
And if you did not liked the final result, a "Reset" button will become available, so you can restart right away where you stopped!

Credits and support

Hi, my name is Alexsander Alves and I am a front-end developer.
I am the developer behind whatsappButton.js plugin.

First of all, I would like to thank you for coming and seeing my job. It is very valuable to me.
My purpose working on this project is to bring to the community a solid and at the same time flexible solution on establishing a good and beautiful communication channel with their public.
whatsappButton.js is meant to be simple and effective at what is has born to be: connecting people.

I would appreciate if you use it, test it, share your thoughts and spread the plugin.
Just like I said before, you all are welcome to participate bringing new ideias to whatsappButton.js!

A great thanks for this amazing tools used at whatsappButton.js:
HEX Color picker by jscolor - http://jscolor.com/
Free SVG Icons by FlatIcon - https://www.flaticon.com/
Icons by Font Awesome - https://github.com/FortAwesome/Font-Awesome | https://fontawesome.com/

alvesalexsander / whatsappButton