❤
npm
Sign UpSign In

whatsapp-widget

1.2.0 • Public • Published

WhatsApp Widget

A simple WhatsApp live chat widget for your website.

Table of content

Getting started

There are some ways to import the package

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

Copyright (c) 2020 - Fajar Setya Budi.

WhatsApp Widget released under the MIT License.

Readme

Keywords

Package Sidebar

Install

npm i whatsapp-widget

Repository

github.com/magicjar/whatsapp-widget

Homepage

github.com/magicjar/whatsapp-widget#readme

Weekly Downloads

10

Version

1.2.0

License

MIT

Unpacked Size

38 kB

Total Files

7

Last publish

Collaborators

  • magicjar
Try on RunKit
Report malware