# whatsapp-widget > A simple WhatsApp live chat widget for your website. Latest version **1.2.0** (published 2020-08-11) · MIT license · 0 weekly downloads ## Install ```sh npm install whatsapp-widget pnpm add whatsapp-widget yarn add whatsapp-widget bun add whatsapp-widget ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2020-08-11 | | First published | 2020-08-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 37.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 33 | | Author | Fajar Setya Budi | | Maintainers | magicjar | | Keywords | whatsapp, live-chat, widget, html, css, javascript, chat | ## Links - npm: https://www.npmjs.com/package/whatsapp-widget - Repository: https://github.com/magicjar/whatsapp-widget - Homepage: https://github.com/magicjar/whatsapp-widget#readme - Issues: https://github.com/magicjar/whatsapp-widget/issues - npm.io page: https://npm.io/package/whatsapp-widget ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 1.2.0 (latest) — 2020-08-11 - 1.1.0 — 2020-08-05 - 1.0.1 — 2020-08-04 - 1.0.0 — 2020-08-03 ## README # 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 ``` 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 ## License Copyright (c) 2020 - Fajar Setya Budi. WhatsApp Widget released under the [MIT License](https://github.com/magicjar/whatsapp-widget/blob/master/LICENSE). --- _Source: https://npm.io/package/whatsapp-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._