react whatsapp widget

react-whatsapp-widget

WhatsApp Widget de chat para su sitio web

¿Qué es esto?

Este es un widget de botón WhatsApp flotante muy simple. Debido al impacto de Covid-19 en 2020, la mayoría de las pequeñas empresas tuvieron que pasar a una presencia en línea. Uno de los Wey para mejorar la comunicación con sus clientes es usar un widget como este.

Agrega un botón flotante a su sitio que llama a la API de chat de WhatsApp.

Comenzará automáticamente un chat de WhatsApp con el número que configura y el texto que escribe el usuario.

Todos los textos son totalmente personalizables y también puede proporcionar un icono/logotipo.

Instalar

npm install --save react-whatsapp-widget

Uso

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

️ Donde el phoneNumber es un número de teléfono completo en formato internacional. Omita cualquier cero, paréntesis o guiones al agregar el número de teléfono en formato internacional.

Ejemplo: 541112222222 donde 54 es el Código Internacional Argentina.

Personalización

opción	valor	por defecto	descripción
número de teléfono	string	''	Número intenacional de WhatsApp que recibirá el mensaje.
Companyicon	Component	BiSupport	El icono SVG de su empresa
nombre de empresa	string	'Support'	Nombre de su empresa
RespuestaTiMetext	string	'Typically replies within a day'
mensaje	string	'Hello! ? nnWhat can we do for you?'	Con n puedes crear una línea de taquilla.
sendButTontext	string	'Send'	Mensaje de texto dentro del botón Enviar
titular de entrada	string	'Type a message'	Texto del marcador de posición de la entrada del mensaje
abierto	boolean	false	Si es verdadero, el chatbox estará abierto como predeterminado

Que contribuye

Después de clonar el repositorio, debe ejecutar los siguientes comandos en dos pestañas de terminal diferentes para iniciar el entorno de desarrollo.

 cd react-whatsapp-widget
npm install
npm start

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

El primer comando observa el SRC/ y lo recompensa en la carpeta Dist/ cuando realiza cambios.

El segundo comando ejecuta la aplicación Ejemplo que vincula a su paquete local.

¡Las solicitudes de extracción son bienvenidas!

Licencia

MIT © Ann0nip