react whatsapp widget

React-whatsapp-widget

あなたのウェブサイトのwhatsappチャットウィジェット

これは何ですか？

これは非常にシンプルなフローティングWhatsAppボタンウィジェットです。 2020年のCovid-19の影響により、ほとんどの中小企業はオンラインでの存在に移行しなければなりませんでした。顧客とのコミュニケーションを改善するWEYの1つは、このようなウィジェットを使用することです。

WhatsAppチャットAPIを呼び出すフローティングのようなボタンをサイトに追加します。

構成する番号とユーザーが書くテキストへのWhatsAppチャットを自動的に開始します。

すべてのテキストは完全にカスタマイズ可能であり、アイコン/ロゴを提供することもできます。

インストール

npm install --save react-whatsapp-widget

使用法

 import React from 'react' ;
// This is the way to import an SVG file and then pass it as a props
import { ReactComponent as CompanyIcon } from './assets/crown.svg' ;

import { WhatsAppWidget } from 'react-whatsapp-widget' ;
import 'react-whatsapp-widget/dist/index.css' ;

const App = ( ) => {
    return (
        < WhatsAppWidget CompanyIcon = { CompanyIcon } phoneNumber = "XXXXXXXXXX" />
    ) ;
} ;

ショ和phoneNumberは、国際形式の完全な電話番号です。国際的な形式で電話番号を追加するときに、ゼロ、ブラケット、またはダッシュを省略します。

例： 541112222222ここで、54はアルゼンチン国際コードです。

カスタマイズ

オプション	価値	デフォルト	説明
電話	string	''	メッセージを受信するWhatsApp Intenational番号。
Companycon	Component	BiSupport	あなたの会社SVGアイコン
会社名	string	'Support'	あなたの会社名
ReplyTimeText	string	'Typically replies within a day'
メッセージ	string	'Hello! ? nnWhat can we do for you?'	nを使用すると、ブレークラインを作成できます。
sendbuttontext	string	'Send'	送信ボタン内のテキスト
InputPlaceHolder	string	'Type a message'	メッセージ入力のプレースホルダーテキスト
開ける	boolean	false	trueの場合、チャットボックスはデフォルトとして開きます

貢献

リポジトリをクローニングした後、開発環境を開始するには、2つの異なる端末タブで次のコマンドを実行する必要があります。

 cd react-whatsapp-widget
npm install
npm start

 cd react-whatsapp-widget/example
npm install
npm start

最初のコマンドは、SRC/を監視し、変更を行うときにDIST/フォルダーに再コンパイルします。

2番目のコマンドは、ローカルパッケージにリンクするサンプルアプリを実行します。

プルリクエストは大歓迎です！

ライセンス

MIT©ANN0NIP