Facebook 채팅 플러그인, 사용 중단됨
이전 원문: Facebook 채팅 플러그인, 사용 중단됨 게시일: 2023-8-4 마지막 편집: 2024-9-21 원래 분류: 🧷 외부 확장
알림
💡
Facebook 공식 발표에 따르면 2024년 5월 9일부터 채팅 플러그인은 더 이상 사용할 수 없습니다.
페이지 채팅 고객 지원 도구로 SaleSmartly 플러그인을 선택할 수 있습니다.
문서
아래는 이전 문서입니다.
💡 마지막 업데이트는 2023-09-06이며, 원문 문서의 4번째 항목인
PAGE_ID획득 방식을 수정했습니다. 기존 방식으로 얻은PAGE_ID는 채팅 플러그인 로드 실패를 일으킬 수 있습니다.
💡 Facebook 공식 채팅 플러그인은 방문자와 실시간으로 채팅하기 편하게 해 주는 도구였습니다.
전체 과정은 약 10분 정도이며, 완료하면 Facebook 플러그인을 얻을 수 있었습니다.
사용 효과
웹 페이지 오른쪽 아래에 채팅 상자가 표시됩니다. 사용자는 사이트 관리자와 채팅할 수 있고, 익명 방문자 또는 Facebook Messenger 로그인 사용자로 대화할 수 있습니다.
사이트 관리자는 PC 백엔드나 앱에서 메시지를 실시간으로 확인할 수 있습니다.
설정 방식
NotionNext 백엔드에 환경 변수 두 개를 추가하면 FBChat 플러그인을 켤 수 있었습니다. 대응 설정 파일 경로는 blog.config.js입니다.
이 두 매개변수를 얻는 방법은 아래 등록 방법을 참고하세요.
활성화 방법
Facebook 계정을 등록하고 로그인합니다.
https://www.facebook.com/login/
1. 공개 페이지 만들기
Facebook에서 공개 페이지를 만드는 과정은 간단합니다. 단계에 따라 페이지를 만들면 PAGE_ID를 얻을 수 있습니다.
- 페이지 왼쪽의 공개 페이지를 클릭합니다.
- 새 공개 페이지 만들기를 클릭합니다.
- 정보를 입력해 등록을 완료합니다.
입력을 마치면 기본 페이지 설정을 진행하도록 안내됩니다. 필요한 항목만 선택해 설정하면 됩니다.
PAGE_ID가져오기
기존 PAGE_ID 획득 방식은 잘못되었습니다.
완료 후 안내에 따라 페이지로 돌아가면 공개 페이지 주소창 URL에서 PAGE_ID를 볼 수 있다고 되어 있었지만, 이 방식은 올바르지 않습니다. 예시 ID: 100095411623547
잘못된 예시 스크린샷
올바른 방식은 공개 페이지 왼쪽에서 Settings를 클릭한 뒤 Brand Content를 클릭하는 것입니다.
Brand Content 클릭 후 이동한 페이지에 PAGE_ID 매개변수가 포함되어 있습니다. 예시의 PAGE_ID는 100411122875215입니다.
- 허용 목록 설정
웹사이트에서 해당 공개 페이지의 Messenger 기능을 사용할 수 있도록 다음 설정이 필요합니다.
오른쪽 위 아바타 -> Settings & privacy -> Settings를 클릭해 설정 센터로 이동합니다.
설정 센터 왼쪽에서 새 공개 페이지 경험을 클릭합니다.
새 공개 페이지 경험에서 고급 메시지 기능을 클릭하고 사이트 도메인을 입력한 뒤 추가를 클릭합니다.
2. 개발자 권한 활성화
이 단계를 완료하면 전용 app id를 얻을 수 있고, 이 id로 Facebook 기능을 호출할 수 있습니다.
- 아래 링크를 클릭해 개발자 등록을 신청합니다.
https://developers.facebook.com/async/registration
- 계속을 클릭하고 요구사항에 따라 휴대폰 번호와 이메일을 검증합니다.
- 마지막 단계로 등록을 완료합니다.
여기에서 속성을 선택합니다. 어떤 값을 선택해도 이후 작업에는 영향을 주지 않습니다.
- 앱을 만듭니다.
등록이 완료되면 개발자 홈으로 이동합니다. 이후에도 https://developers.facebook.com/apps/에서 앱을 확인할 수 있습니다. 만들기를 클릭합니다.
- 앱을 설정합니다.
Facebook을 선택하고 계속을 클릭합니다.
앱 이름을 입력한 뒤 바로 앱 만들기를 클릭합니다.
APP_ID가져오기
앱 홈에서 확인할 수 있습니다.
완료
여기까지 진행하면 APP_ID와 PAGE_ID를 얻은 것입니다.
NotionNext 백엔드에 환경 변수 두 개를 추가하면 FBChat 플러그인을 켤 수 있었습니다. 대응 설정 파일 경로는 blog.config.js입니다.
Facebook 백엔드 설정에 대하여
Facebook 백엔드에서 이 채팅 플러그인의 사전 응답, 영업 시간 같은 속성을 설정할 수 있습니다. 여기서는 자세히 다루지 않습니다.
설정 진입점: Facebook 공개 페이지의 설정 메뉴에서 Meta Business Suite를 클릭합니다.
비즈니스 백엔드 페이지
위 진입점 외에도 https://business.facebook.com/에 직접 접속할 수 있습니다.
백엔드에서는 모든 채팅 메시지를 확인할 수 있고, 오른쪽 위에서 자동 응답 같은 기능을 설정할 수 있습니다.
또한 백엔드에서는 플러그인의 스타일, 위치, 자동 응답 내용을 사용자 지정할 수 있습니다.
클라이언트
이 기능은 Facebook Messenger 채팅 도구를 사용합니다. Facebook, Messenger, 또는 Business Suite 앱을 설치해 사용할 수 있습니다.
참고
- 공식 소개
https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin
- React 플러그인 코드
https://github.com/Yoctol/react-messenger-customer-chat
원문 링크
https://docs.tangly1024.com/article/notion-next-facebook-chat-plugn