Can we change "Send to Messenger" plugin button text?

Question

I want to change button text which is generated by "Send to Messenger" plugin using javascript facebook SDK.

Answer 1

Fortunately, you can change the button texts! Unfortunately, you can't use arbitrary text. You can only choose from the pre-defined button texts by facebook.

Here's the list of button texts that you can use

• GET_THIS_IN_MESSENGER
• RECEIVE_THIS_IN_MESSENGER
• SEND_THIS_TO_ME
• GET_CUSTOMER_ASSISTANCE
• GET_CUSTOMER_SERVICE
• GET_SUPPORT
• LET_US_CHAT
• SEND_ME_MESSAGES
• ALERT_ME_IN_MESSENGER
• SEND_ME_UPDATES
• MESSAGE_ME
• LET_ME_KNOW
• KEEP_ME_UPDATED
• TELL_ME_MORE
• SUBSCRIBE_IN_MESSENGER
• SUBSCRIBE_TO_UPDATES
• GET_MESSAGES
• SUBSCRIBE
• GET_STARTED_IN_MESSENGER
• LEARN_MORE_IN_MESSENGER
• GET_STARTED

You can change the text by setting cta_text attribute to one of the preceding options. In this example, I used KEEP_ME_UPDATED option:

<div class="fb-send-to-messenger"
  cta_text="KEEP_ME_UPDATED"
  messenger_app_id="<APP_ID>" 
  page_id="PAGE_ID" 
  data-ref="<PASS_THROUGH_PARAM>" 
  color="<blue | white>" 
  size="<standard | large | xlarge>">
</div>

Answer 2

The easiest way I know to do it is by placing the send-to-messenger div inside another div & formatting the parent div & a sibling div. The trick is to pass the click event through an element. This requires position first div as absolute. Here's my code

<div style='height: 32px;width: 148px;display: inline-block;overflow: hidden;color: #fff;'>
   <div style='background-color: #5ac7ec;pointer-events:none;position:absolute;width:148px;z-index:2;line-height:36px;>
     CONNECT
   </div>
   <div class="fb-send-to-messenger"
      messenger_app_id="123456789"
      page_id="987654321"
      data-ref="some_data"
      color="blue"
      size="large">
   </div>

Answer 3

You can use the cta_text option but you cannot write anything there, only couple of predefined texts.

• Read more here