{"id":27440313,"url":"https://github.com/magicjar/whatsapp-widget","last_synced_at":"2025-07-15T09:03:28.280Z","repository":{"id":40802986,"uuid":"282324658","full_name":"magicjar/whatsapp-widget","owner":"magicjar","description":"A simple WhatsApp chat widget.","archived":false,"fork":false,"pushed_at":"2023-11-05T23:08:53.000Z","size":1023,"stargazers_count":34,"open_issues_count":15,"forks_count":16,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T10:04:59.505Z","etag":null,"topics":["chat","html","whatsapp","whatsapp-widget","widget"],"latest_commit_sha":null,"homepage":"https://magicjar.github.io/whatsapp-widget/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/magicjar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-24T22:08:53.000Z","updated_at":"2025-06-03T09:58:10.000Z","dependencies_parsed_at":"2024-10-16T08:40:36.361Z","dependency_job_id":null,"html_url":"https://github.com/magicjar/whatsapp-widget","commit_stats":{"total_commits":56,"total_committers":2,"mean_commits":28.0,"dds":"0.017857142857142905","last_synced_commit":"240e23bf21bddd516ed87af46c959a57e051bdd4"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/magicjar/whatsapp-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicjar%2Fwhatsapp-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicjar%2Fwhatsapp-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicjar%2Fwhatsapp-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicjar%2Fwhatsapp-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magicjar","download_url":"https://codeload.github.com/magicjar/whatsapp-widget/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicjar%2Fwhatsapp-widget/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265424298,"owners_count":23762879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","html","whatsapp","whatsapp-widget","widget"],"created_at":"2025-04-14T22:39:58.803Z","updated_at":"2025-07-15T09:03:28.203Z","avatar_url":"https://github.com/magicjar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/whatsapp-widget.svg)](https://www.npmjs.com/package/whatsapp-widget)\n[![JS gzip size](https://img.badgesize.io/magicjar/whatsapp-widget/master/dist/js/whatsapp-widget.min.js?compression=gzip\u0026label=JS%20gzip%20size)](https://github.com/magicjar/whatsapp-widget/tree/master/dist/js/whatsapp-widget.min.js)\n[![CSS gzip size](https://img.badgesize.io/magicjar/whatsapp-widget/master/dist/css/whatsapp-widget.min.css?compression=gzip\u0026label=CSS%20gzip%20size)](https://github.com/magicjar/whatsapp-widget/tree/master/dist/css/whatsapp-widget.min.css)\n[![Code license](https://img.shields.io/github/license/magicjar/whatsapp-widget)](#license)\n\n# WhatsApp Widget\n\nA simple WhatsApp live chat widget for your website.\n\n## Table of content\n\n- [Getting started](#getting-started)\n- [Usage](#usage)\n    - [Built in form](#built-in-form)\n    - [Custom form](#custom-form)\n- [Configs](#configs)\n- [License](#license)\n\n## Getting started\n\nThere are some ways to import the package\n- [Download the latest release.](https://github.com/magicjar/whatsapp-widget/releases)\n- Clone the repo:\n\n    `git clone https://github.com/magicjar/whatsapp-widget.git`\n    \n- Install with [npm](https://www.npmjs.com/):\n    \n    `npm install whatsapp-widget`\n\n- CDN from [jsDelivr](https://www.jsdelivr.com)\n\n    [https://www.jsdelivr.com/package/npm/whatsapp-widget](https://www.jsdelivr.com/package/npm/whatsapp-widget)\n\n## Usage\n\nInclude the `css` inside `head` tag and `javascript` file inside `body` tag of your html file.\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"/dist/css/whatsapp-widget.min.css\"\u003e\n```\n\n``` html\n\u003cscript src=\"/dist/js/whatsapp-widget.min.js\"\u003e\u003c/script\u003e\n```\n\n### Built in form\n\nTo use our built-in chat form, copy and paste this HTML code inside `\u003cbody\u003e` tag. Replace `{phone_number}` with your number in international format (Leading zero replaced with country code) and omit any brackets and dashes.\n\n``` html\n\u003cform id=\"whatsapp\" class=\"wa-widget\" action=\"{phone_number}\" data-chat=\"whatsapp\"\u003e\u003c/form\u003e\n```\n\nTo initiate the built in widget, place this script before `\u003c/body\u003e` closing tag.\n\n``` html\n\u003cscript\u003e\n    // WhatsAppWidget(element, { configs }, [ inputs ])\n\n    var chat = new WhatsAppWidget(document.getElementById('whatsapp'), {\n        // configs...\n    }, [\n        // array of input object\n    ]);\n\u003c/script\u003e\n```\nFrom 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.\n\nExample:\n``` text\n[{\n    data: 'name',\n    type: 'text',\n    required: true\n}, {\n    data: 'email',\n    type: 'email',\n    required: false\n}, {\n    data: 'message',\n    type: 'text',\n    required: true\n}]\n```\n\nThis will create three inputs.\n 1. `Name` input with `text` type and it's required / mandatory\n 2. `Email` input with `email` type and it's opsional\n 3. `Message` input with `text` type and it's required / mandatory\n\n### Custom form\n\nTo 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.\n\n``` html\n\u003cform id=\"billing-support\" action=\"{phone_number}\" data-chat=\"billing-support\"\u003e\n    \u003cdiv class=\"wa-widget-content\"\u003e\n        \u003c!-- your input --\u003e\n    \u003c/div\u003e\n\u003c/form\u003e\n```\n\nAnd 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.\n\n``` html\n\u003cinput data-message=\"name\" type=\"text\" placeholder=\"Your name\" required\u003e\n\u003cinput data-message=\"message\" type=\"text\" placeholder=\"Your message\"\u003e\n\u003c!-- more input --\u003e\n```\n\nLastly, add a button inside the form with `submit` type and `data-toggle=\"wa-send\"` attribute to send the chat.\n\n``` html\n\u003cbutton type=\"submit\" data-toggle=\"wa-send\"\u003eChat\u003c/button\u003e\n```\n\n**The custom form will automaticaly initiated without a script.**\n\n### Toggleable custom form\n\nIf 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}\"`.\n\n``` html\n\u003ca class=\"button\" data-toggle=\"wa-chat\" data-target=\"#billing-support\" href=\"#billing-support\"\u003eLink\u003c/a\u003e\n\n\u003c!-- OR --\u003e\n\n\u003cbutton class=\"button\" data-toggle=\"wa-chat\" data-target=\"#customer-support\"\u003eButton\u003c/button\u003e\n```\n\nOn 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.\n\n## Configs\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\nname | string | '' | Chat / person name\ndivision | string | '' | Division name\nphoto | string | '' | Company logo or person photo\nintroduction | string | '' | Chat introduction\n\n## License\n\nCopyright (c) 2020 - Fajar Setya Budi.\n\nWhatsApp Widget released under the [MIT License](https://github.com/magicjar/whatsapp-widget/blob/master/LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicjar%2Fwhatsapp-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagicjar%2Fwhatsapp-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicjar%2Fwhatsapp-widget/lists"}