{"id":21180213,"url":"https://github.com/open-wa/whatsapp-button","last_synced_at":"2025-07-09T23:32:06.999Z","repository":{"id":37089227,"uuid":"225121433","full_name":"open-wa/whatsapp-button","owner":"open-wa","description":"A simple whatsapp button web component. Easily start whatsapp conversations!","archived":false,"fork":false,"pushed_at":"2023-01-20T13:01:06.000Z","size":9288,"stargazers_count":54,"open_issues_count":30,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-06T08:41:56.422Z","etag":null,"topics":["lit-element","webcomponents","whatsapp"],"latest_commit_sha":null,"homepage":"https://open-wa.github.io/whatsapp-button","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/open-wa.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}},"created_at":"2019-12-01T07:14:12.000Z","updated_at":"2025-05-21T19:22:42.000Z","dependencies_parsed_at":"2023-02-12T02:17:52.638Z","dependency_job_id":null,"html_url":"https://github.com/open-wa/whatsapp-button","commit_stats":null,"previous_names":["smashah/whatsapp-button"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/open-wa/whatsapp-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-wa%2Fwhatsapp-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-wa%2Fwhatsapp-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-wa%2Fwhatsapp-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-wa%2Fwhatsapp-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/open-wa","download_url":"https://codeload.github.com/open-wa/whatsapp-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-wa%2Fwhatsapp-button/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264505239,"owners_count":23618909,"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":["lit-element","webcomponents","whatsapp"],"created_at":"2024-11-20T17:41:58.065Z","updated_at":"2025-07-09T23:32:06.421Z","avatar_url":"https://github.com/open-wa.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/smashah"],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@open-wa/whatsapp-button) [![npm version](https://badge.fury.io/js/whatsapp-button.svg)](https://badge.fury.io/js/@open-wa/whatsapp-button) [![Maintainability](https://api.codeclimate.com/v1/badges/945fe901103848ca5de1/maintainability)](https://codeclimate.com/github/open-wa/whatsapp-button/maintainability)\n\n[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]\n\n# \\\u003cwhatsapp-button\u003e\n\nEasily start WhatsApp conversations! Based on [@material/mwc-button](https://github.com/material-components/material-components-web-components#readme).\n\n\n```html\n\u003cwhatsapp-button phone=\"123456\" dialcode=\"44\" text=\"hello!\" label=\"Start Chat\"\u003e\u003c/whatsapp-button\u003e\n```\n\n[Live Demo ↗](https://jsfiddle.net/8cgwvmbd/2/)\n\n[\u003cimg src=\"https://raw.githubusercontent.com/smashah/whatsapp-button/master/button-demo.png\" alt=\"Screenshot of whatsapp-button\" width=\"800\"\u003e](https://jsfiddle.net/8cgwvmbd/2/)\n\n## Installation\n\n```bash\nnpm i @open-wa/whatsapp-button\n```\n\nthen import\n\n```html\n\u003cscript type=\"module\"\u003e\n  import '@open-wa/whatsapp-button/whatsapp-button.js';\n\u003c/script\u003e\n```\n\nOr grab from [unpkg.com CDN](https://unpkg.com/@open-wa/whatsapp-button?module):\n\n```html\n\u003cscript src=\"https://unpkg.com/@open-wa/whatsapp-button?module\" type=\"module\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n\u003cscript src=\"https://unpkg.com/whatsapp-button?module\" type=\"module\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\"\u003e\n  import './whatsapp-button.js';\n\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n```html\n\u003cwhatsapp-button phone=\"7712345678\" dialcode=\"44\" text=\"hey there lets chat!\" label=\"Start Chat\"\u003e\u003c/whatsapp-button\u003e\n```\n\nYou can check out an example of it working here: [JsFiddle](https://jsfiddle.net/8cgwvmbd/1/)\n\n## How do I bypass WhatsApp's fugly redirect site?\n\nI'm glad you asked! You can simply add the `bypass` attribute. This will result in opening the WhatsApp chat WITHOUT being redirected!\n\n```html\n\u003cwhatsapp-button phone=\"7712345678\" dialcode=\"44\" text=\"hey there lets chat!\" label=\"Start Chat\" bypass\u003e\u003c/whatsapp-button\u003e\n```\n\n## Linting with ESLint, Prettier, and Types\n\nTo scan the project for linting errors, run\n\n```bash\nnpm run lint\n```\n\nTo automatically fix many linting errors, run\n\n```bash\nnpm run format\n```\n\nYou can format using ESLint and Prettier individually as well\n\n```bash\nnpm run format:eslint\n```\n\n```bash\nnpm run format:prettier\n```\n\n## Testing with Karma\n\nTo run the suite of karma tests, run\n\n```bash\nnpm run test\n```\n\nor to run them in compatibility mode for legacy browsers\n\n```bash\nnpm run test:compatibility\n```\n\nTo run the tests in watch mode (for \u003cabbr title=\"test driven development\"\u003eTDD\u003c/abbr\u003e, for example), run\n\n```bash\nnpm run test:watch\n```\n\nor\n\n```bash\nnpm run test:compatibility\n```\n\n## Testing with Karma via BrowserStack\n\nTo run the suite of karma tests in BrowserStack, run\n\n```bash\nnpm run test:bs\n```\n\n## Managing Test Snapshots\n\nYou can manage the test snapshots using\n\n```bash\nnpm run test:update-snapshots\n```\nor\n```bash\nnpm run test:prune-snapshots\n```\n\n## Demoing with \n\nTo run a local instance of Storybook for your component, run\n\n```bash\nnpm run storybook\n```\n\nTo build a production version of Storybook, run\n\n```bash\nnpm run storybook:build\n```\n\n\n## Local Demo with `es-dev-server`\n\n```bash\nnpm start\n```\n\nTo run a local development server that serves the basic demo located in `demo/index.html`\n\n```bash\nnpm start:compatibility\n```\n\nTo run a local development server in compatibility mode for older browsers that serves the basic demo located in `demo/index.html`\n\n[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\n[buymeacoffee]: https://www.buymeacoffee.com/smashah","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-wa%2Fwhatsapp-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-wa%2Fwhatsapp-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-wa%2Fwhatsapp-button/lists"}