https://github.com/magicjar/whatsapp-widget
A simple WhatsApp chat widget.
https://github.com/magicjar/whatsapp-widget
chat html whatsapp whatsapp-widget widget
Last synced: 12 months ago
JSON representation
A simple WhatsApp chat widget.
- Host: GitHub
- URL: https://github.com/magicjar/whatsapp-widget
- Owner: magicjar
- License: mit
- Created: 2020-07-24T22:08:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-05T23:08:53.000Z (over 2 years ago)
- Last Synced: 2025-07-02T10:04:59.505Z (12 months ago)
- Topics: chat, html, whatsapp, whatsapp-widget, widget
- Language: JavaScript
- Homepage: https://magicjar.github.io/whatsapp-widget/
- Size: 999 KB
- Stars: 34
- Watchers: 1
- Forks: 16
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/whatsapp-widget)
[](https://github.com/magicjar/whatsapp-widget/tree/master/dist/js/whatsapp-widget.min.js)
[](https://github.com/magicjar/whatsapp-widget/tree/master/dist/css/whatsapp-widget.min.css)
[](#license)
# WhatsApp Widget
A simple WhatsApp live chat widget for your website.
## Table of content
- [Getting started](#getting-started)
- [Usage](#usage)
- [Built in form](#built-in-form)
- [Custom form](#custom-form)
- [Configs](#configs)
- [License](#license)
## Getting started
There are some ways to import the package
- [Download the latest release.](https://github.com/magicjar/whatsapp-widget/releases)
- Clone the repo:
`git clone https://github.com/magicjar/whatsapp-widget.git`
- Install with [npm](https://www.npmjs.com/):
`npm install whatsapp-widget`
- CDN from [jsDelivr](https://www.jsdelivr.com)
[https://www.jsdelivr.com/package/npm/whatsapp-widget](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.
``` html
```
``` html
```
### Built in form
To use our built-in chat form, copy and paste this HTML code inside `` tag. Replace `{phone_number}` with your number in international format (Leading zero replaced with country code) and omit any brackets and dashes.
``` html
```
To initiate the built in widget, place this script before `` closing tag.
``` html
// WhatsAppWidget(element, { configs }, [ inputs ])
var chat = new WhatsAppWidget(document.getElementById('whatsapp'), {
// configs...
}, [
// array of input object
]);
```
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:
``` text
[{
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.
``` html
```
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.
``` html
```
Lastly, add a button inside the form with `submit` type and `data-toggle="wa-send"` attribute to send the chat.
``` html
Chat
```
**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}"`.
``` html
Link
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](https://github.com/magicjar/whatsapp-widget/blob/master/LICENSE).