Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/open-wa/whatsapp-button
A simple whatsapp button web component. Easily start whatsapp conversations!
https://github.com/open-wa/whatsapp-button
lit-element webcomponents whatsapp
Last synced: about 2 months ago
JSON representation
A simple whatsapp button web component. Easily start whatsapp conversations!
- Host: GitHub
- URL: https://github.com/open-wa/whatsapp-button
- Owner: open-wa
- License: mit
- Created: 2019-12-01T07:14:12.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-20T13:01:06.000Z (almost 2 years ago)
- Last Synced: 2024-11-10T07:39:16.569Z (about 2 months ago)
- Topics: lit-element, webcomponents, whatsapp
- Language: JavaScript
- Homepage: https://open-wa.github.io/whatsapp-button
- Size: 8.86 MB
- Stars: 53
- Watchers: 6
- Forks: 11
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/@open-wa/whatsapp-button) [](https://badge.fury.io/js/@open-wa/whatsapp-button) [](https://codeclimate.com/github/open-wa/whatsapp-button/maintainability)
[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]
# \
Easily start WhatsApp conversations! Based on [@material/mwc-button](https://github.com/material-components/material-components-web-components#readme).
```html
```
[Live Demo ↗](https://jsfiddle.net/8cgwvmbd/2/)
[
](https://jsfiddle.net/8cgwvmbd/2/)
## Installation
```bash
npm i @open-wa/whatsapp-button
```
then import
```html
import '@open-wa/whatsapp-button/whatsapp-button.js';
```
Or grab from [unpkg.com CDN](https://unpkg.com/@open-wa/whatsapp-button?module):
```html
```
## Usage
```html
```
You can check out an example of it working here: [JsFiddle](https://jsfiddle.net/8cgwvmbd/1/)
## How do I bypass WhatsApp's fugly redirect site?
I'm glad you asked! You can simply add the `bypass` attribute. This will result in opening the WhatsApp chat WITHOUT being redirected!
```html
```
## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```
To automatically fix many linting errors, run
```bash
npm run format
```
You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```
## Testing with Karma
To run the suite of karma tests, run
```bash
npm run test
```
or to run them in compatibility mode for legacy browsers
```bash
npm run test:compatibility
```
To run the tests in watch mode (for TDD, for example), run
```bash
npm run test:watch
```
or
```bash
npm run test:compatibility
```
## Testing with Karma via BrowserStack
To run the suite of karma tests in BrowserStack, run
```bash
npm run test:bs
```
## Managing Test Snapshots
You can manage the test snapshots using
```bash
npm run test:update-snapshots
```
or
```bash
npm run test:prune-snapshots
```
## Demoing with
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```
To build a production version of Storybook, run
```bash
npm run storybook:build
```
## Local Demo with `es-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
```bash
npm start:compatibility
```
To run a local development server in compatibility mode for older browsers that serves the basic demo located in `demo/index.html`
[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg
[buymeacoffee]: https://www.buymeacoffee.com/smashah