[](https://www.npmjs.com/package/whatsapp-widget)
[](#license)
Code was originally imported from https://github.com/magicjar/whatsapp-widget
# Standalone WhatsApp Widget
A simple Standalone WhatsApp live chat widget for your website.
## Table of content
- [Standalone WhatsApp Widget](#standalone-whatsapp-widget)
- [Table of content](#table-of-content)
- [Getting started](#getting-started)
- [Usage](#usage)
- [Built in form](#built-in-form)
- [Custom form](#custom-form)
- [Toggleable custom form](#toggleable-custom-form)
- [Configs](#configs)
- [License](#license)
## Getting started
There are some ways to import the package
- [Download the latest release.](https://github.com/griojas/standalone-whatsapp-widget/releases)
- Clone the repo:
`git clone https://github.com/griojas/standalone-whatsapp-widget.git`
- Install with [npm](https://www.npmjs.com/):
`npm install standalone-whatsapp-widget`
- CDN from [jsDelivr](https://www.jsdelivr.com)
[https://www.jsdelivr.com/package/npm/standalone-whatsapp-widget](https://www.jsdelivr.com/package/npm/standalone-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
```
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
```
**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
```
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
showHeader | boolean | false | Displays the chat header
## License
Copyright (c) 2022 - Guillermo Riojas
WhatsApp Widget released under the [MIT License](https://github.com/griojas/standalone-whatsapp-widget/blob/main/LICENSE).