Whatsapp-widget NPM

WhatsApp Widget

A simple WhatsApp live chat widget for your website.

Table of content

Getting started

There are some ways to import the package

Download the latest release.
Clone the repo:
git clone https://github.com/magicjar/whatsapp-widget.git
Install with npm:
npm install whatsapp-widget
CDN from jsDelivr
https://www.jsdelivr.com/package/npm/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 ])

    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. 1. Name input with text type and it's required / mandatory 2. Email input with email type and it's opsional 3. Message input with text type 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 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.

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

WhatsApp Widget released under the MIT License.

whatsapp live-chat widget html css javascript chat

@infinitebrahmanuniverse/nolb-wha @everything-registry/sub-chunk-3143

5 years ago

5 years ago

5 years ago

5 years ago