React.js
xxxxxxxxxx# Nodenpm install @tawk.to/tawk-messenger-react# Yarnyarn add @tawk.to/tawk-messenger-react2. Importez tawk-messenger-react dans le fichier App.js de votre dossier src/. Ensuite, attribuez les valeurs pour votre widgetId et propertyId.
xxxxxxxxxximport TawkMessengerReact from '@tawk.to/tawk-messenger-react';function App() { return ( <div className="App"> <TawkMessengerReact propertyId="property_id" widgetId="default"/> </div> );}Connectez-vous à votre compte et allez dans ⚙️Administration ➞ Canaux ➞ Widget de discussion.
Pour trouver vos identifiants de widget et de propriété, connectez-vous au tableau de bord tawk.to. Dirigez-vous ensuite vers ⚙️Administration ➞ Canaux ➞ Widget de discussion.
Si vous avez plusieurs propriétés, vérifiez que vous visualisez la bonne. Survolez le nom de la propriété actuelle dans le menu supérieur du tableau de bord pour afficher toutes vos propriétés et en sélectionner une nouvelle.
Ensuite, si votre propriété possède plusieurs widgets, sélectionnez un widget dans le menu déroulant supérieur.
Sous Lien de discussion directe, le dernier segment du chemin est le widgetId et suit le propertyId.
Comment utiliser les callbacks et expose functions
Voir la liste des API dans notre référence API.
xxxxxxxxxximport { useRef } from 'react';import TawkMessengerReact from '@tawk.to/tawk-messenger-react';function App() { const tawkMessengerRef = useRef(); const handleMinimize () => { tawkMessengerRef.current.minimize(); }; return ( <div className="App"> <button onClick={handleMinimize}> Minimize the Chat </button> <TawkMessengerReact propertyId="property_id" widgetId="default" ref={tawkMessengerRef}/> </div> );}Utilisation des Callbacks
Pour utiliser les Callbacks d'API, transmettez une fonction en tant qu'accessoires sur le rappel que vous utiliserez.
xxxxxxxxxxunction App() { const onLoad = () => { console.log('onLoad works!'); }; return ( <div className="App"> <TawkMessengerReact propertyId="property_id" widgetId="default" onLoad={onLoad}/> </div> );}Expose functions
Pour accéder aux Expose functions, vous devrez utiliser useRef de React. Créez une variable constante qui contiendra useRef() et transmettez-la dans le composant TawkMessengerReact en tant que prop.
xxxxxxxxxxconst tawkMessengerRef = useRef();const handleMinimize () => { tawkMessengerRef.current.minimize();};xxxxxxxxxxfunction App() { const onLoad = () => { console.log('onLoad works!'); }; return ( <div className="App"> <TawkMessengerReact propertyId="property_id" widgetId="default" onLoad={onLoad}/> </div> );}