I supposed you know that it is possible to embed some Facebook elements on your landing page such as like or share button.
However, not everybody knows that you can use an HTML & JavaScript to launch a Messenger on your site!
In other words, with using:

  • a link,
  • a button,
  • a Messenger window,

will be possible to write you a message to your Facebook account or your Facebook site.


1. Embed a Messenger link on your landing page.  

Below you can find information about how to create a link to message you on a Facebook account  (a link only can redirect to your Facebook profile - other options are redirected to the Facebook site).

1. In your landing page editor, in selected place add "Custom" widget.


2. Open edit and put an HTML code here:

Only one thing which you need to change is to replace XYZ by your Facebook profile name or ID number.


3. After changes made in "Custom" widget publish your landing page and check the Messenger link. It should look like here:

2. Place the Messenger button on your landing page.

A  second option is to place a messenger button on your site. Go through the steps below!

  1. The same as in the first option, drop on your landing page a "Custom" widget. Then, paste here below code:

Only one thing which you want to change is to replace XYZ by your Facebook site ID number.

<div class="fb-messengermessageus" 
         messenger_app_id="95100348886"
         page_id="XYZ"
         color="blue"
         size="large">
</div>


2. As a next step, publish your landing page and "Go to campaign".


3. Now, move to the "JavaScript Code" tab and add a script:

<script>      
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '95100348886',
          xfbml      : true,
          version    : 'v2.6'
        });
      };

      (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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));      
</script>


4. Save your script and check your landing page published. You should see a 'Messenger Us' on it.


3. Place the Messenger Box on your landing page.

And finally - the third option! Find out how to create a Messenger Box.

1. The same as in the first & second option, drop on your landing page a "Custom" widget. Then, paste here below code:

Only one thing which you want to change is to replace XYZ by your Facebook site ID number.

<div class="fb-page" 
         data-href="https://www.facebook.com/XYZ/"
         data-tabs="messages"
         data-width="400"
         data-height="300"
         data-small-header="true">
      <div class="fb-xfbml-parse-ignore">
        <blockquote></blockquote>
      </div>
</div>

2. As a next step, publish your landing page and "Go to campaign".

3. Now, move to the "JavaScript Code" tab and add a script:

<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '95100348886',
          xfbml      : true,
          version    : 'v2.6'
        });
      };

      (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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>


4. When you save the script move to your landing page published and check the Messenger Box appears. If you want to change a place it appears, only move the "Custom" widget.

If you have any problems with embed a Messenger let us know - find us in the right bottom corner of the window 😊


Did this answer your question?