@frugan/whatsapp-widget
v1.3.3
Published
A simple WhatsApp live chat widget for your website.
Downloads
31
Maintainers
frugan-devReadme
WhatsApp Widget
A simple WhatsApp live chat widget for your website.
Table of content
Getting started
There are some ways to import the package
Clone the repo:
git clone https://github.com/frugan-dev/whatsapp-widget.gitInstall with npm:
npm i @frugan/whatsapp-widgetCDN from jsDelivr
https://www.jsdelivr.com/package/npm/@frugan/whatsapp-widget
Usage
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>Built in form
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 ])
const 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 name, type, and required properties.
Example:
[{
name: 'domain',
type: 'hidden',
value: 'domain.tld',
required: false,
}, {
name: 'name',
type: 'text',
required: true,
placeholder: 'Your name',
}, {
name: 'email',
type: 'email',
required: false,
placeholder: 'Your email',
}, {
name: 'message',
type: 'text',
required: true,
placeholder: 'Your message',
}]This will create four inputs.
Domaininput withhiddentype anddomain.tldvalueNameinput withtexttype and it's required / mandatoryEmailinput withemailtype and it's optionalMessageinput withtexttype and it's required / mandatory
Custom form
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 name attribute inside the form element. You can add an input as many as you want as long as it has name attribute.
<input name="name" type="text" placeholder="Your name" required>
<input name="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.
Toggleable custom form
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.
Configs
Name | Type | Default | Description ---- | ---- | ------- | ----------- name | string | '' | Chat / person name division | string | '' | Division name photo | string | '' | Company logo or person photo introduction | string | '' | Chat introduction
License
Copyright (c) 2020 - Fajar Setya Budi.
WhatsApp Widget released under the MIT License.