TAWK.TO & NEXTjs-Integration

Hey Entwickler!

In diesem Artikel erfahren Sie mehr über tawk.to und seine Integration mit NEXTjs.

Über TAWK.to:
Tawk.to ist eine kostenlose, cloudbasierte Live-Chat-Software, die es Unternehmen ermöglicht, in Echtzeit mit Website-Besuchern zu interagieren. Es bietet Funktionen wie Chat-Überwachung, automatisierte Trigger und Integration mit verschiedenen Plattformen. Tawk.to ist wegen seiner Benutzerfreundlichkeit, Anpassungsoptionen und Erschwinglichkeit beliebt.

Schritte zur Integration mit Nextjs
Hilfe erhalten Sie in der tawk.to-Dokumentation https://help.tawk.to/article/react-js.

Ansonsten befolgen Sie die folgenden Schritte:

1- Installieren Sie die Bibliothek in Ihrer Nextjs-Anwendung
Garn hinzufügen @tawk.to/tawk-messenger-react

2- Gehen Sie zu https://help.tawk.to/ und melden Sie sich an
3- Erstellen Sie Ihr Widget/Projekt und gehen Sie zum Dashboard
4- Importieren Sie nun in die page.js-Datei Ihrer nextjs-Anwendung den Tawk-Messenger-React. Weisen Sie dann die Werte für Ihre widgetId und propertyId zu. Wenn Sie die API verwenden, müssen Sie useRef verwenden, um über die tawk-messenger-react-Komponente auf die Objektfunktionen zuzugreifen.

5- Gehen Sie zum Projekt-Dashboard auf tawk.to, um die IDs zu erhalten:

Im folgenden Beispiel ist die Eigenschafts-ID xxxxxxxxxxxxxxxxxxxxxxxx und die Widget-ID 123456789.

6- Jetzt in page.js:
„Client verwenden“
importiere TawkMessengerReact von '@tawk.to/tawk-messenger-react';
importiere useUserStore aus „../stores/userStore“;
importiere {useRef} aus „react“;
Standardfunktionsseite exportieren ({children }) {
const tawkMessengerRef = useRef();
const {userData } = useUserStore();
const handleMinimize = () => {
tawkMessengerRef.current.minimize();
};
const onTawkLoad = () => {
console.log("Tawk.to-Widget geladen");

if (window.Tawk_API) {
  const userName = userData.full_name;// "Hussain Ahmed" 
  const userEmail = userData.email;"hussainsidd99@gmail.com"
  const userPhone=userData.phone_number; "+2342523"
  // Use Tawk.to's identify method to set the visitor's information
  window.Tawk_API.setAttributes({
    name: userName,
    email: userEmail,
    phone: userPhone,
  }, function (error) {
    if (error) {
      console.error("Error setting Tawk.to user details:", error);
    } else {
      console.log("User details successfully sent to Tawk.to");
    }
  });

  // Alternatively, use this to set visitor attributes directly
  window.Tawk_API.visitor = {
    name: userName,
    email: userEmail,
  };
} else {
  console.error("Tawk_API is not available");
}

};
zurück (

{Kinder}
Minimieren Sie den Chat
propertyId="66be1852146b7af4a43ad88f"
widgetId="1i5b8u1aq"
ref={tawkMessengerRef}
onLoad={onTawkLoad}
/>

);
}`

onLoad={onTawkLoad} Dies definiert, was von Ihrer Anwendung an tawk.to gesendet werden soll, z. B. Besucher-/Benutzerinformationen.

Aktualisieren Sie den Code entsprechend den Anforderungen Ihres Projekts!
Danke

Das obige ist der detaillierte Inhalt vonTAWK.TO & NEXTjs-Integration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!