A simple WhatsApp live chat widget for your website.
There are some ways to import the package
-
Clone the repo:
git clone https://github.com/magicjar/whatsapp-widget.git -
Install with npm:
npm install whatsapp-widget -
CDN from jsDelivr
Include the css inside head tag and javascript file inside body tag of your html file.
<link rel="stylesheet" href="/dist/css/whatsapp-widget.min.css"><script src="/dist/js/whatsapp-widget.min.js"></script>To use our built-in chat form, copy and paste this HTML code inside <body> tag. Replace {phone_number} with your number in international format (Leading zero replaced with country code) and omit any brackets and dashes.
<form id="whatsapp" class="wa-widget" action="{phone_number}" data-chat="whatsapp"></form>To initiate the built in widget, place this script before </body> closing tag.
<script>
// WhatsAppWidget(element, { configs }, [ inputs ])
var chat = new WhatsAppWidget(document.getElementById('whatsapp'), {
// configs...
}, [
// array of input object
]);
</script>From v1.2.0, you can create as many inputs as you want with built-in form by creating an array of input object with data, type, and required properties.
Example:
[{
data: 'name',
type: 'text',
required: true
}, {
data: 'email',
type: 'email',
required: false
}, {
data: 'message',
type: 'text',
required: true
}]
This will create three inputs.
Nameinput withtexttype and it's required / mandatoryEmailinput withemailtype and it's opsionalMessageinput withtexttype and it's required / mandatory
To make a custom form, first you have to create form element with an id attribute, data-chat attribute and action attribute to put your phone number. Inside the form you have to add an element with wa-widget-content class.
<form id="billing-support" action="{phone_number}" data-chat="billing-support">
<div class="wa-widget-content">
<!-- your input -->
</div>
</form>And for the input form to write a chat or message, you only need to create an input element with data-message attribute inside the form element. You can add an input as many as you want as long as it has data-message attribute.
<input data-message="name" type="text" placeholder="Your name" required>
<input data-message="message" type="text" placeholder="Your message">
<!-- more input -->Lastly, add a button inside the form with submit type and data-toggle="wa-send" attribute to send the chat.
<button type="submit" data-toggle="wa-send">Chat</button>The custom form will automaticaly initiated without a script.
If you want to make your custom form toggleable (show and hide) with a click. Just create a link element a or a button element with data-toggle="wa-chat" and data-target="#{form_id}".
<a class="button" data-toggle="wa-chat" data-target="#billing-support" href="#billing-support">Link</a>
<!-- OR -->
<button class="button" data-toggle="wa-chat" data-target="#customer-support">Button</button>On button toggled, it will automaticaly add expanded class on it self and on the form element on show, and will remove expanded class on hide.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | '' | Chat / person name |
| division | string | '' | Division name |
| photo | string | '' | Company logo or person photo |
| introduction | string | '' | Chat introduction |
Copyright (c) 2020 - Fajar Setya Budi.
WhatsApp Widget released under the MIT License.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}