Adding a Facebook Messenger Popup to your AMP site

If you’re looking to create a popup style chat on your AMP site there are various solutions available, with users having implemented live chat agents from various third party services. This tutorial will show you how to make use of existing AMP components to create a Facebook Messenger style chat popup. 

For those not familiar with Facebook Messenger it’s the live communication tool integrated within Facebook users profiles and business pages. It’s a popular medium of real time contact between Facebook page and individual users. As a website owner or business you can apply automated replies, respond in real time and capture valuable leads. Visitors to your site can contact you instantly, without having to send an email or fill in a form. You’ll find out more about how Facebook Messenger works at this resource. 

This tutorial will use the amp-lightbox component for the modal popup, along with the amp-facebook-page component to initiate the messenger feature. 

Prerequisite: We’ve tried to make this tutorial as easy as possible to follow, however it does assume a very basic understanding of CSS and WordPress hooks. If you prefer to get straight into it and download the mini plugin as opposed to following the tutorial jump to the bottom of this page, or click here to download the mini plugin. 

1. Create a mini plugin to add the content

Creating a mini plugin instead of  making changes to your active WordPress theme can be useful for a variety of reasons, including the below:

• Theme updates won’t overwrite your them changes
• You can use the mini plugin on other sites
• You can safely deactivate when you wish

In order to create a mini plugin follow the steps below:

1. Create a folder on your computer, title it “mypopup”.
2. Open up your favourite text editor.
3. Add the following content to the file. Feel free to change the “Author Name”.

<?php
/**
 * Plugin Name: AMP Popup
 * Description: My AMP Popup
 * Author: Joe Bloggs
 **/Code language: HTML, XML (xml)

4. Save the file as mypopup.php within the new folder you just created.
5. That’s it. Next is to add content to the plugin. 

2. Create the button to open the popup

Next is to create a static button that when pressed opens your Facebook messenger popup. Follow the steps below to create the button, which will appear in AMP URLs:

1. Open the mypopup.php file that you’ve created. 
2. Add the following code to the mypopup.php file. This code inserts a static button in your AMP URLs, using the wp_head hook for placement and ‘is_amp_endpoint’ to ensure it runs on AMP URLs only. 

add_action('wp_head', 'mypopup_button');

/**
 * Add the button.
 */
function mypopup_button()
{
    if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
?>
   <div class="mypopup_button">
        <div on="tap:mypopup-lightbox" role="button" tabindex="0" >
            <svg width="41.000000pt" height="82.000000pt">
                <g transform="translate(5.000000,28.000000) scale(0.0350000,-0.035000)" fill="#fff" stroke="none">
                <path d="M169 242 c-86 -98 -155 -179 -154 -180 2 -2 61 21 131 52 70 31 133 56 140 56 6 0 48 -38 92 -85 l80 -85 175 193 c97 105 174 193 173 194 -1 2 -69 -33 -151 -77 -82 -44 -150 -80 -151 -80 -2 0 -25 24 -51 52 -26 29 -66 71 -88 94 l-40 42 -156 -176z"/>
                </g>
            </svg>
        </div>
    </div
        <?php
    }
}Code language: JavaScript (javascript)

Optional: You can change the SVG image that appears within the button with your own SVG.  

3. Add some CSS to style the button

Now that we’ve added the button we’ll want to style it. For best practice we’ll do this using the recommended WordPress way, by creating a CSS file and then enqueuing it. 

1. Create a new file with your favourite text editor
2. Add the following to this newly created file

.mypopup_button {
  position: fixed;
  bottom: 20px;
  width: 40px;
  height: 40px;
  right: 20px;
  border: 0px solid #d6d6d6;
  z-index: 99;
  background: linear-gradient(#CC3366, #0066ff);
  border-radius: 40px;
  display: grid;
  place-items: center;
  font-weight: bold;
  font-size: 18px;
  color: #d6d6d6;
}

.mypopup_lightbox {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 600px) {
  .mypopup_button{
    display:none;
  }
}Code language: CSS (css)

3. Save the file as mypopup.css. This file must be placed within your plugin folder.
4. In order to include this new CSS file as part of your plugin add the following to your mypopup.php file to enqueue this CSS file

/**
 * Load  CSS files.
 */
function mypopup_css() {
    wp_register_style( 'mypopup-style', plugin_dir_url( __FILE__ ) . 'mypopup.css', null, '0.1' );
    wp_enqueue_style( 'mypopup-style' );
}

add_action( 'wp_enqueue_scripts', 'mypopup_css' );Code language: PHP (php)

5. Save this update to your mypopup.php

Note you can also add some additional styling to the CSS file mentioned above. Some alterations you may prefer might include some rules to ensure the button only appears on desktop devices, or to position the button to the left. 

4. Create the Lightbox popup

So far so good. Next we’re going to create the content to appear within the popup window. We’re going to use the wp_head hook once more to insert this into our website:

1. Copy and paste the below code into your mypopup.php file. 

function mypopup_lightbox()
{
    if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
?>
       <div>
            <amp-lightbox id="mypopup-lightbox" layout="nodisplay">
                <div class="mypopup_lightbox" on="tap:mypopup-lightbox.close" role="button" tabindex="0">
                    <div class="inner" on="tap:mylightbox.open">
                        <amp-facebook-page width="300" height="500"
                            layout="fixed"
                            data-href="https://www.facebook.com/MiamiHeat"
                            data-adapt-container-width="true"
                            data-show-facepile="true"
                            data-hide-cover="false"
                            data-small-header="true"
                            data-tabs="messages"
                            data-width="300"
                            data-height="500">
                        </amp-facebook-page>
                    </div>
                </div>
            </amp-lightbox>
        </div>
        <?php
    }
}

add_action('wp_head', 'mypopup_lightbox');add_action( 'wp_head', 'mypopup_lightbox' );Code language: JavaScript (javascript)

2. Replace the MiamiHeat reference from the above code snippet with your own Facebook Page ID.
3. Save this update 

Note you don’t necessarily need to add a Facebook messenger window within your popup. If you prefer to add some static text or a YouTube video simply remove the amp-facebook-page markup from the above and include your own content. 

5. Upload your plugin

Now that you’ve created your mini plugin it’s time to upload and give it a test run. 

1. Compress the contents of your mypopup folder into a zip file, so it’s ready to be uploaded as a WordPress plugin. Title the zip file mypopup.zip 
2. Access your WordPress dashboard.
3. Upload and install as you would any other WordPress plugin.
4. Activate the plugin.
5. Visit any AMP URL on your site and test our how your plugin works

That’s it, you’re done! 

Congratulations, you’ve created a way for visitors to your AMP site to message your Facebook page directly. Not only that, you managed to create your own WordPress mini plugin while also making use of the amp-lightbox and amp-facebook-page components. 

Feel free to customize the above code snippets to suit your needs. If you manage to run into any problems simply deactivate the plugin from your WordPress admin dashboard, or alternatively you can rename the plugin  from mypopup to _mypopup to deactivate it manually. You’ll find the plugin within your WordPress install at wp-content/plugins/mypopup.

See some FAQ’s below in relation to this tutorial. And if you’re creating great things with the AMP plugin feel free to submit your site for inclusion in our website showcase listings.