Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arc9693/react-floating-whatsapp-button

chat hacktoberfest react whatsapp

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/arc9693/react-floating-whatsapp-button
Owner: arc9693
Created: 2021-06-10T07:25:56.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-03-27T17:32:08.000Z (10 months ago)
Last Synced: 2024-12-23T00:26:16.948Z (16 days ago)
Topics: chat, hacktoberfest, react, whatsapp
Language: TypeScript
Homepage: https://arc9693.github.io/react-floating-whatsapp/
Size: 2.95 MB
Stars: 4
Watchers: 2
Forks: 1
Open Issues: 5
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # react-floating-whatsapp-button

> React component to add floating whatsapp chat button with window and an optional message to the app.

[![NPM](https://img.shields.io/npm/v/react-floating-whatsapp-button.svg)](https://www.npmjs.com/package/react-floating-whatsapp-button) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![Example gif](./example/public/example.gif)

## Install

```bash

npm install --save react-floating-whatsapp-button

```

## Usage

```tsx

import React, { Component } from 'react'

import { FloatingWhatsApp } from 'react-floating-whatsapp-button'

import 'react-floating-whatsapp-button/dist/index.css'

class Example extends Component {

  render() {

    return 

  }

}

```

## Example

[https://arc9693.github.io/react-floating-whatsapp-button/](https://arc9693.github.io/react-floating-whatsapp-button/)

## Props(optional)

| Name            | Description                    | Type    | Default                       |

| --------------- | ------------------------------ | ------- | ----------------------------- |

| phone           | Phone number                   | string  | '1231231231'                  |

| message         | Sender's default message input | string  | ''                            |

| size            | Button size                    | string  | '70px'                        |

| backgroundColor | Button background color        | string  | '#25D366'                     |

| position        | left/right                     | string  | 'right'                       |

| popupMessage    |                                | string  | 'Hello, how can we help you?' |

| showPopup       |                                | boolean | false                         |

| showOnIE        |                                | boolean | true                          |

| autoOpenTimeout | in ms                          | number  | 2000                          |

| headerColor     |                                | string  | '#128C7E'                     |

| headerTitle     |                                | string  | 'WhatsApp Chat'               |

| zIndex          | z-index of the component       | number  | 0                             |

| buttonImage     | Base64 encoded button image    | string  | Whatsapp icon's image         |

## License

MIT © [arc9693](https://github.com/arc9693)