Penyepaduan TAWK.TO & NEXTjs

Hei pengembang!

Dalam artikel ini, anda akan mempelajari tentang tawk.to dan ia adalah penyepaduan dengan NEXTjs.

Mengenai TAWK.to:
Tawk.to ialah perisian sembang langsung berasaskan awan percuma yang membolehkan perniagaan berinteraksi dengan pelawat tapak web dalam masa nyata. Ia menawarkan ciri seperti pemantauan sembang, pencetus automatik dan penyepaduan dengan pelbagai platform. Tawk.to popular kerana kemudahan penggunaannya, pilihan penyesuaian dan keterjangkauan.

Langkah untuk menyepadukan dengan Nextjs
Anda boleh mendapatkan bantuan daripada dokumentasi tawk.to https://help.tawk.to/article/react-js.

Jika tidak ikut langkah berikut:

1- Pasang pustaka pada aplikasi Nextjs anda
tambah benang @tawk.to/tawk-messenger-react

2- Pergi ke https://help.tawk.to/ dan daftar
3- Cipta widget/projek anda dan papan pemuka goto
4- Sekarang dalam fail page.js aplikasi nextjs anda mengimport tawk-messenger-react. Kemudian, tetapkan nilai untuk widgetId dan propertyId anda. Apabila menggunakan API, anda perlu menggunakan useRef untuk mengakses fungsi objek daripada komponen tawk-messenger-react.

5- Pergi ke papan pemuka projek di tawk.to untuk mendapatkan id:

Dalam contoh di bawah, ID sifat ialah xxxxxxxxxxxxxxxxxxxxxxxx dan widgetId ialah 123456789.

6- Kini dalam page.js:
`"gunakan klien"
import TawkMessengerReact daripada '@tawk.to/tawk-messenger-react';
import useUserStore daripada "../stores/userStore";
import {useRef} daripada "react";
eksport halaman fungsi lalai({ kanak-kanak }) {
const tawkMessengerRef = useRef();
const {userData } = useUserStore();
const handleMinimumkan = () => {
tawkMessengerRef.current.minimize();
};
const onTawkLoad = () => {
console.log("Tawk.to widget dimuatkan");

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

};
kembali (

{kanak-kanak}
Kurangkan Sembang
propertyId="66be1852146b7af4a43ad88f"
widgetId="1i5b8u1aq"
ref={tawkMessengerRef}
onLoad={onTawkLoad}
/>

);
}`

onLoad={onTawkLoad} Ini mentakrifkan perkara yang perlu dihantar kepada tawk.to daripada aplikasi anda seperti maklumat pelawat/pengguna.

Kemas kini kod mengikut keperluan projek anda!
Terima kasih

Atas ialah kandungan terperinci Penyepaduan TAWK.TO & NEXTjs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!