react whatsapp widget

React-WhatsApp-Widget

WhatsApp -Chat -Widget für Ihre Website

Was ist das?

Dies ist ein sehr einfaches Widget der WhatsApp -Taste. Aufgrund der Auswirkungen von Covid-19 im Jahr 2020 mussten die meisten kleinen Unternehmen zu einer Online-Präsenz wechseln. Einer der Wey, um die Kommunikation mit Ihren Kunden zu verbessern, besteht darin, ein solches Widget zu verwenden.

Es fügt Ihrer Website eine schwebende Schaltfläche hinzu, die die WhatsApp-Chat-API aufruft.

Es startet automatisch einen WhatsApp -Chat mit der von Ihnen konfigurierten Nummer und dem Text, den der Benutzer schreibt.

Alle Texte sind vollständig anpassbar und Sie können auch ein Symbol/Logo bereitstellen.

Installieren

npm install --save react-whatsapp-widget

Verwendung

 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" />
    ) ;
} ;

Euen Wo die phoneNumber eine vollständige Telefonnummer im internationalen Format ist. Lassen Sie Nullen, Klammern oder Striche aus, wenn Sie die Telefonnummer im internationalen Format hinzufügen.

Beispiel: 541112222222 wobei 54 der argentinische internakionale Code ist.

Anpassung

Option	Wert	Standard	Beschreibung
PhoneNumber	string	''	WhatsApp -Intenationennummer, die die Nachricht empfängt.
Firmaicon	Component	BiSupport	Ihr Unternehmen SVG -Symbol
Name der Firma	string	'Support'	Ihr Firmenname
ReplyTimetext	string	'Typically replies within a day'
Nachricht	string	'Hello! ? nnWhat can we do for you?'	Mit n können Sie eine Breakline erstellen.
sendButtonText	string	'Send'	Text in der Schaltfläche Senden
InputPlace -Hels	string	'Type a message'	Platzhaltertext der Nachrichteneingabe
offen	boolean	false	Wenn die Chatbox stimmt, wird die Chatbox als Standard geöffnet

Beitragen

Nach dem Klonen des Repositorys müssen Sie die folgenden Befehle in zwei verschiedenen Terminal -Registerkarten ausführen, um die Entwicklungsumgebung zu starten.

 cd react-whatsapp-widget
npm install
npm start

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

Der erste Befehl beobachtet das SRC/ und kompiliert sie in den DIST/ Ordner, wenn Sie Änderungen vornehmen.

Der zweite Befehl führt die Beispiel -App aus, die zu Ihrem lokalen Paket verlinkt.

Pull -Anfragen sind willkommen!

Lizenz

MIT © Ann0NIP