Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

whatsapp-widget

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

whatsapp-widget

A simple WhatsApp live chat widget for your website.

1.2.0
latest
Source
npm

Version published: 4 years ago

Weekly downloads: 6; increased by200%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

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.

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

Keywords

FAQs

What is whatsapp-widget?

Is whatsapp-widget popular?

Is whatsapp-widget well maintained?

Package last updated on 11 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install