Facebook Messenger Chat Plugin not Firing messaging_referrals event in Webhook Request - facebook

Question

I'm trying to integrate messenger on my website. I want to track users (by Cookie Value). There is a option in Facebook Chat Plugin, "messaging_referrals" which tells referral key of user chatting.
As per instructions i have added event "messaging_referrals" in facebook app webhook events.
But still in my webhook i'm not getting referral key.
My Plugin Code looks like this
<div class="fb-customerchat"
page_id="ABC"
ref="OPTIONAL_WEBHOOK_PARAM"
logged_in_greeting="<GREETING_MESSAGE_FOR_LOGGED_IN_USERS>"
logged_out_greeting="<GREETING_MESSAGE_FOR_LOGGED_OUT_USERS>">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XYZ',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And Request I'm getting in my webhook is this
"data": {
"sender": {
"id": "abc"
},
"recipient": {
"id": "ABC"
},
"message": {
"mid": "mid.$cAADv109V6n_F6BY",
"text": "hi",
"seq": 511,
"tags": {
"source": "customer_chat_plugin"
}
},
"timestamp": 1522049646776
}
As per this i should also be receiving "OPTIONAL_WEBHOOK_PARAM" in my webhook request

Answer 1

Here is how the ref field work in facebook.
MAKE SURE YOU HAVE REMAINED YOUR CHAT CONVERSATION HISTORY
THEN YOU FOLLOW THIS INSTRUCTION.
You must logout the current facebook , if you have.
you open your chat messenger within your website , THEN by click Login into Messenger button , will pop the Facebook login form for you, so just fill it and login.
After step 2, you will see in your website messenger box appear with button Continue as YOUR_FB_NAME Then you click this button, then the ref field will trigger .
Here is my log for proof as answer ( I am using SDK version 7.0) .
In your HTML customer chat might be look like this
<!-- Your Chat Plugin code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="11xx695540xxxx"
ref="your-ref-pass-to-webhoooks"
theme_color="#DA615C"
referer_uri="your-website-uri"
logged_in_greeting="Question-1"
logged_out_greeting="Question-2">
</div>