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”.
 * Plugin Name: AMP Popup
 * Description: My AMP Popup
 * Author: Joe Bloggs
 **/Code language: HTML, XML (xml)
  1. Save the file as mypopup.php within the new folder you just created.
  2. 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"/>
}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) {
}Code language: CSS (css)
  1. Save the file as mypopup.css. This file must be placed within your plugin folder.
  2. 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)
  1. 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()) {
            <amp-lightbox id="mypopup-lightbox" layout="nodisplay">
                <div class="mypopup_lightbox" on="tap:mypopup-lightbox.close" role="button" tabindex="0">
                    <div class="inner" on="">
                        <amp-facebook-page width="300" height="500"

add_action('wp_head', 'mypopup_lightbox');add_action( 'wp_head', 'mypopup_lightbox' );Code language: JavaScript (javascript)
  1. Replace the MiamiHeat reference from the above code snippet with your own Facebook Page ID.
  2. 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 
  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.

I don’t feel comfortable creating this mini plugin, but I really want this feature.

Fear not, we’ve created a working plugin for you. Simply download the mini plugin here.

You can modify to suit your needs. Please ensure you change the “MiamiHeat” reference with your own Facebook Page ID, preferably before uploading and installing. 

But it’s not working, what can I do?

If you find the plugin is not working as intended check the following:

  • Is the plugin activated? After installing the plugin did you activate the plugin?
  • Are you viewing an AMP URL? The popup is intended to feature on AMP URLs only. You can use the AMP validator Chrome extension or the plugins toolbar to ensure you are visiting an AMP URL. 
  • Are you checking from a desktop device? The popup by default will appear on desktop devices only. To have it appear on mobile devices also you can remove the media query section in the last few lines of the mypopup.css file.  

Be aware that this tutorial should preferably be followed on a staging site, it’s a demonstration of manually adding features to your AMP website. While we don’t provide support for this in the WordPress support forums you can seek assistance using standard channels as listed on the “Support” page. 

Can I view a demo?

Sure, click on the button on the bottom right of this page. Alternatively download, install and active the mini plugin yourself and try it out. Be sure you check an AMP URL after installing.