TAWK.TO 및 NEXTjs 통합

안녕하세요 개발자 여러분!

이 기사에서는 tawk.to와 NEXTjs와의 통합에 대해 알아봅니다.

TAWK.to 소개:
Tawk.to는 기업이 웹사이트 방문자와 실시간으로 상호 작용할 수 있는 무료 클라우드 기반 라이브 채팅 소프트웨어입니다. 채팅 모니터링, 자동화된 트리거 및 다양한 플랫폼과의 통합과 같은 기능을 제공합니다. Tawk.to는 사용 편의성, 사용자 정의 옵션 및 경제성으로 인기가 높습니다.

Nextjs와 통합하는 단계
tawk.to 문서 https://help.tawk.to/article/react-js에서 도움을 받을 수 있습니다.

그렇지 않은 경우 다음 단계를 따르세요.

1- Nextjs 애플리케이션에 라이브러리를 설치합니다
원사 추가 @tawk.to/tawk-messenger-react

2- https://help.tawk.to/로 이동하여 가입하세요
3- 위젯/프로젝트를 만들고 대시보드로 이동
4- 이제 nextjs 애플리케이션의 page.js 파일에서 tawk-messenger-react를 가져옵니다. 그런 다음 widgetId 및 propertyId에 값을 할당합니다. API를 사용하는 경우 tawk-messenger-react 구성 요소의 개체 함수에 액세스하려면 useRef를 사용해야 합니다.

5- ID를 얻으려면 tawk.to의 프로젝트 대시보드로 이동하세요.

아래 예에서 속성 ID는 xxxxxxxxxxxxxxxxxxxxxxxx이고 widgetId는 123456789입니다.

6- 이제 page.js에서:
``클라이언트 사용"
'@tawk.to/tawk-messenger-react'에서 TawkMessengerReact 가져오기;
"../stores/userStore"에서 useUserStore를 가져옵니다.
"반응"에서 {useRef}를 가져옵니다.
기본 함수 페이지 내보내기({ 하위 }) {
const tawkMessengerRef = useRef();
const {userData } = useUserStore();
const handlerMinimize = () => {
tawkMessengerRef.current.minimize();
};
const onTawkLoad = () => {
console.log("Tawk.to 위젯이 로드됨");

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

};
복귀(

{어린이}
채팅을 최소화하세요
propertyId="66be1852146b7af4a43ad88f"
widgetId="1i5b8u1aq"
ref={tawkMessengerRef}
onLoad={onTawkLoad}
/>

);
}`

onLoad={onTawkLoad} 이는 방문자/사용자 정보와 같이 애플리케이션에서 tawk.to로 보낼 내용을 정의합니다.

프로젝트 요구사항에 따라 코드를 업데이트하세요!
감사합니다

위 내용은 TAWK.TO 및 NEXTjs 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!