react whatsapp widget

React-Whatsapp-Widget

whatsapp แชทวิดเจ็ตสำหรับเว็บไซต์ของคุณ

นี่คืออะไร?

นี่คือวิดเจ็ตปุ่ม WhatsApp ที่ลอยได้ง่ายมาก เนื่องจากผลกระทบของ COVID-19 ในปี 2020 ธุรกิจขนาดเล็กส่วนใหญ่ต้องย้ายไปอยู่ออนไลน์ หนึ่งใน 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	''	หมายเลข Intenational WhatsApp ซึ่งจะได้รับข้อความ
บริษัท	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	หาก จริง chatbox จะเปิดเป็นค่าเริ่มต้น

การบริจาค

หลังจากโคลนนิ่งที่เก็บคุณต้องเรียกใช้คำสั่งต่อไปนี้ในแท็บเทอร์มินัลที่แตกต่างกันสองแท็บเพื่อเริ่มสภาพแวดล้อมการพัฒนา

 cd react-whatsapp-widget
npm install
npm start

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

คำสั่งแรกจะดู SRC/ และคอมไพล์ใหม่ลงใน DIST/ Folder เมื่อคุณทำการเปลี่ยนแปลง

คำสั่งที่สองเรียกใช้แอพตัวอย่างที่เชื่อมโยงไปยังแพ็คเกจท้องถิ่นของคุณ

ยินดีต้อนรับคำขอดึง!

ใบอนุญาต

MIT © Ann0nip