react whatsapp widget

반응--위스 앱-더미

웹 사이트의 WhatsApp 채팅 위젯

이게 뭔가요?

이것은 매우 간단한 플로팅 WhatsApp 버튼 위젯입니다. 2020 년 Covid-19의 영향으로 인해 대부분의 소기업은 온라인 입지로 이동해야했습니다. 고객과의 커뮤니케이션을 개선하기위한 Wey 중 하나는 이와 같은 위젯을 사용하는 것입니다.

WhatsApp Chat 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는 아르헨티나 internacional 코드입니다.

사용자 정의

옵션	값	기본	설명
전화기	string	''	WhatsApp의 메시지를받는 whatsApp intenational Number.
Companyicon	Component	BiSupport	회사 SVG 아이콘
회사 이름	string	'Support'	회사 이름
ReplyTimeText	string	'Typically replies within a day'
메시지	string	'Hello! ? nnWhat can we do for you?'	n 으로 브레이크 라인을 만들 수 있습니다.
SendButtonText	string	'Send'	전송 버튼 내부의 텍스트
입력 장소 보유자	string	'Type a message'	메시지 입력의 자리 표시 자 텍스트
열려 있는	boolean	false	true 인 경우 채팅 박스가 기본값으로 열립니다

기여

저장소를 복제 한 후 개발 환경을 시작하려면 두 개의 다른 터미널 탭에서 다음 명령을 실행해야합니다.

 cd react-whatsapp-widget
npm install
npm start

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

첫 번째 명령은 SRC/를보고 변경할 때 Dist/ Folder로 다시 컴파일합니다.

두 번째 명령은 로컬 패키지에 링크하는 예제 앱을 실행합니다.

풀 요청을 환영합니다!

특허

MIT © Ann0nip