채팅 플러그인

이 문서에서는 채팅 플러그인을 웹사이트의 Messenger 경험에 프로그래밍 방식으로 추가하는 방법을 보여줍니다.

Meta Business Suite를 사용하여 채팅 플러그인을 웹페이지에 추가하고 싶을 경우(권장) 자세한 내용을 Meta 비즈니스 지원 센터에서 참조하세요.

사용 방법

Javascript용 Facebook SDK를 웹페이지에 설치하면 채팅 플러그인이 웹페이지에 렌더링됩니다. 기본적으로 인사말 대화 상자는 데스크톱과 모바일에 표시되고 사용자는 닫기 버튼을 클릭하여 대화 상자를 최소화할 수 있습니다. 플러그인의 인사말, 스타일(예: 색상)과 메시지 경험(예: 메뉴, 빠른 답장)을 맞춤 설정할 수 있습니다. 대화 상자의 상태는 캐싱, 극대화 또는 최소화되며 세션에서 세션까지 지속됩니다.

로그인

사용자가 Facebook에 로그인하면 플러그인에 '[NAME](으)로 계속하기' 및 '게스트로 계속하기' 버튼이 표시됩니다. 사용자가 Facebook에 로그인하지 않은 경우 플러그인은 'Messenger에 로그인'과 '게스트로 계속하기' 버튼을 표시합니다.

Webhooks 알림

사용자가 플러그인을 클릭하여 비즈니스와의 채팅을 시작하거나 계속하면 Webhooks 알림이 다음을 포함하는 서버로 전송됩니다.

• 사용자에 대한 정보(예: 페이지 범위 ID(PSID), 사용자 참조 ID)
• 메시지 소스를 채팅 플러그인으로 식별
• 알림에 포함된 리퍼럴 정보

시작 화면 을 플러그인에 구현하였고 사용자가 시작하기 버튼을 클릭하여 비즈니스와의 대화를 시작한 경우, messaging_postbacks Webhooks 알림이 서버로 전송됩니다. 그러면 비즈니스는 사용자 참조 ID를 사용하여 24시간 표준 메시지 전송 기간 내에 사용자에게 메시지를 보낼 수 있습니다.

기존 대화

사용자가 비즈니스와 기존에 나누던 대화가 있을 경우 채팅 기록을 플러그인으로 자동으로 읽어들입니다. 사용자가 메시지를 보내거나 버튼을 클릭하거나 대화에 구현한 다른 행동을 취하여 대화를 계속하면 messaging Webhooks 알림이 서버로 전송됩니다. 또는 리퍼럴 정보를 포함하면 messaging_referral Webhooks 알림이 전송됩니다. 그러면 비즈니스에서 PSID를 사용하여 24시간 표준 메시지 전송 기간 내에 사용자에게 메시지를 보낼 수 있습니다.

채팅 플러그인에서 지원하는 메시지 유형

이 플러그인은 다음을 지원하지 않습니다.

시작하기 전에

다음과 같은 항목이 필요합니다.

• pages_messaging 권한
• Facebook 페이지에서 MODERATE 작업을 수행할 수 있는 사용자가 요청한 페이지 액세스 토큰
• messaging, messaging_postbacks 및 messaging_referrals Webhooks 필드를 구독하는 Facebook 페이지에 연결된 앱
• Messenger 프로필 API 또는 Meta Business Suite를 사용하여 허용 리스트에 추가된 웹사이트 도메인

채팅 플러그인의 사용과 관련하여 Meta 비즈니스 도구 약관이 적용됩니다.

제한 사항

• 웹사이트가 라이브 상태이거나 허용 리스트에 추가되어 있어야 채팅 플러그인을 구현할 수 있습니다.
• 비즈니스의 Facebook 페이지의 페이지 설정에 나이 또는 국가 제한이 설정되어 있으면 Facebook 계정에 로그인하지 않고 웹사이트를 방문한 사용자에게 채팅 플러그인이 렌더링되지 않습니다.
• 인사 대화 상자는 Safari 12 이상 및 Firefox 브라우저에서는 캐시되지 않습니다.

채팅 플러그인 추가

1단계. SDK 추가

Javascript용 Facebook SDK를 플러그인을 렌더링하고자 하는 웹사이트의 각 페이지에 추가합니다.

<!-- Messenger Chat Plugin Code --> <div id="fb-root"></div> <div id="fb-customer-chat" class="fb-customerchat"></div> <script> var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "PAGE-ID"); chatbox.setAttribute("attribution", "biz_inbox"); </script> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'API-VERSION' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

2단계. 플러그인 맞춤 설정

API 사용

/PAGE-ID/chat_plugin 엔드포인트에 POST 요청을 전송하여 플러그인에 맞춰 인사말, 색상, 아이콘 등을 설정합니다.

요청 예시

curl -i -X POST "https://graph.facebook.com/v21.0/PAGE-ID/chat_plugin
    ?welcome_screen_greeting:YOUR-WELCOME-TEXT
    &theme_color:553399
    &entry_point_icon:MESSENGER-ICON
    &entry_point_label:CHAT
    &access_token=PAGE-ACCESS-TOKEN"

플러그인 맞춤 설정에 사용되는 필드에 대한 자세한 내용은 채팅 플러그인 참고 자료 를 참조하세요.

HTML 속성 사용

페이지 설정 도구 또는 API를 통해 제공되지 않는 맞춤 설정에만 이 방법을 사용하는 것이 좋습니다.

Webhooks 알림

사용자가 비즈니스에 메시지를 전송하면 Webhooks 알림이 서버로 전송됩니다.

기존 대화

사용자가 비즈니스와의 기존 대화에 메시지를 보내면 messaging Webhooks 알림이 전송됩니다. 이 알림에는 사용자의 페이지 범위 ID와 customer_chat_plugin으로 설정된 tags 개체의 source 매개변수가 포함됩니다.

메시지 알림

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "PSID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

메시지 리퍼럴 알림

채팅 플러그인에 대해 ref 속성을 설정하면 messaging_referrals Webhooks 알림이 서버로 전송됩니다.

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598385735,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598385735,
                    "sender": {
                        "user_ref":"USER-REFERENCE-ID"
                    },
                    "referral": {
                        "ref": "REF-PARAMETER-INFORMATION",
                        "source": "CUSTOMER_CHAT_PLUGIN",
                        "type": "OPEN_THREAD",
                        "referer_uri": "REFERRAL-URI"
                    }
                }
            ]
        }
    ]
}

새로운 대화

messaging_postbacks Webhooks 알림은 사용자가 채팅 플러그인의 시작 화면에 있는 시작하기 버튼을 클릭하여 대화를 시작하면 전송됩니다.

메시지 Postback 알림

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "user_ref": "USER-REFERENCE-ID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "postback":{
                        "title": "TITLE-FOR-THE-CTA",  
                        "payload": "PAYLOAD-DEFINED-BY-CTA",
                        "referral": {
                            "ref": "ADDITIONAL-INFORMATION",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                    }
                }
            ]
        }
    ]
}

마케팅 메시지 옵트인 요청

마케팅 메시지 옵트인 요청을 만드는 방법은 마케팅 메시지 가이드 를 참조하세요.

제한 사항

채팅 플러그인에 대한 마케팅 메시지에 업데이트 및 프로모션 주제가 지원됩니다.

메시지 옵트인 알림

사용자가 비즈니스에서 마케팅 메시지를 수신하도록 옵트인하면 messaging_optins Webhooks 알림이 전송됩니다.

"object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": TIMESTAMP,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": TIMESTAMP,
                    "optin": {
                        "type": "notification_messages",
                        "payload": "empty_payload",
                        "notification_messages_token": "NOTIFICATION-MESSAGE-TOKEN",
                        "notification_messages_frequency": "MESSAGE-FREQUENCY",
                        "topic": "NOTIFICATION-MESSAGE-TOPIC",
                        "token_expiry_timestamp": EXPIRATION-DATE-TIMESTAMP,
                        "ref": "ADDITIONAL-INFORMATION",
                        "user_token_status": "NOT_REFRESHED",
                        "notification_messages_status": "RESUME_NOTIFICATIONS"
                    }
                }
            ]
        }
    ]
}

recipient 개체에서 notification_messages_token 값을 ID 값으로 설정하여 사용자에게 마케팅 메시지를 보낼 수 있습니다.

문제 해결 팁

• 표시 거부...

  • 도메인이 화이트리스트에 추가되었는지 확인하세요.
  • 리퍼럴 URL이 전송되도록 Referrer-Policy 헤더가 설정되어 있는지 확인하세요.

• Firefox에서 채팅 플러그인이 렌더링되지 않음

  • Firefox Facebook 컨테이너 애드온을 삭제하세요.
  • 플러그인 렌더링을 보려면 콘텐츠 차단을 끄세요(검색 표시줄에서 회색 방패 클릭).

다음 단계

• 답장 보내기
• 마케팅 메시지 보내기

기타 참고 자료

• 고정 메뉴 비활성화
• JavaScript용 Facebook SDK
• 게스트 모드 - 사용자가 Facebook에 로그인되지 않은 상태에서 대화를 시작하도록 허용합니다.
• 아이스 브레이커 - 사용자가 자주 묻는 질문 리스트로 비즈니스와 대화를 시작하도록 허용합니다.
• 고정 메뉴 - 사용자가 대화 중에 기능을 발견하고 더욱 쉽게 액세스할 수 있도록 지원합니다.