How To Add Facebook Chat To Your Church's Website

Have you ever wondered how to add Facebook chat to your website so that users can chat with your church? In this post, we're going to walk through how to add Facebook chat to your church's website all for free!

Reasons for adding Facebook Chat

Having a quick and easy way for website visitors to send messages to your church is an important feature that every website should have. To add chat to your site, there are a few options.

1. Intercom - Pricing starts at $59 per month for a single seat.
2. Drift - Drift has a free plan, but you'll need to reach out to their team for custom pricing to get more features.
3. Facebook Messenger - Free but Facebook-branded.

A few benefits of using the Facebook Messenger chat plugin are:

• Users are familiar with the user interface and "trust" Facebook
• Users can respond to replies through Facebook and in the Messenger app rather than just on your site or through email
• There are established bot companies such as ManyChat that make creating automation and Facebook Messenger bots easy
• You get access to the user's name, photo, location, and more  

Let's Get Started

First, navigate to Facebook's Business Manager and make sure you have your church's business account and your Facebook page selected.

Next select "Chat Plugin" from the left sidebar menu.

Great! Now click "Set Up." First, you'll be asked your language. Once you've made a selection, press "Save & Continue." Now you'll need to add your domain name.

Once you've added your domain name, press "Save & Continue." Now press "Copy Code."

Your code should look something like this (with {PAGE_ID} being your page's ID):

<div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v10.0'
      });
    };

    (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/xfbml.customerchat.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

  <!-- Your Chat Plugin code -->
  <div class="fb-customerchat"
    attribution="biz_inbox"
    page_id="{PAGE_ID}">
  </div>

Now you're going to want to paste your code into the body of your website. Here are a few common site providers and how to add code to the body. To see Facebook's instructions for adding code, visit this help doc.

WordPress

Facebook has created a WordPress plugin to simplify the process of adding code. Simply download and install a plugin called The Official Facebook Chat Plugin by Facebook on your WordPress site. Once installed, head over to the "Customer Chat" page in your WP dashboard and follow the installation instructions.

The Church Co

To add Facebook Chat to your church's The Church Co site, it's as simple as configuring the built-in integration.  The first step is to navigate to the Addons page.  

Next, select the "Facebook Messenger" integration. You will then be prompted for your Facebook Page's ID. Your page's ID can be found towards the end of the code or by going to a site called findmyfbid.com. After saving your changes, you should be good to go!

Squarespace

In your Squarespace admin panel, head over to Settings > Advanced > Code Injection.

Once in the Code Injection panel, paste your code from Facebook into the Footer section and press "Save" in the upper left corner to update your site.  

Webflow

To add Facebook Chat to your Webflow beside first go to your Project Settings. Click "Custom Code" and paste your code from Facebook into your site's Footer. Then, press "Save Changes." That's all!

Other Website Tool

If your website is custom coded or built using another tool, you will need to add the chat code into your website's body. If your website builder supports custom code, it shouldn't be too difficult, and when in doubt, reach out to their support or help documentation.

Further Customization

Facebook offers a few other customization options to help modify the Messenger plugin on your site.

The Welcome Message

When a user sees your church website's chat, you can show them a welcome option. It's considered a best practice to prompt users with what you can answer or help them with. On the same "Chat Plugin" page we got our code from earlier, you can find the option to add a welcome message.

Chat Behavior

Further down the Chat Plugin page, you'll find the "Customize Your Chat Plugin" section. In this section, you can customize many aspects of the chat plugin, including:

• The text used to prompt users to start a chat
• Whether to allow users to start a chat without being signed into Facebook
• The color of the icon used to open up the chat
• Whether you want the icon to be positioned in the lower left or lower rights
• The spacing of the icon from the bottom of your website's viewport and the side closest to the icon
• If the chat should automatically open, prompting users to start a chat or stay closed until a user clicks the icon (I recommend the former)

Wrap Up

There you have it! Top to bottom guide and tutorial for configuring the Facebook Messenger Chat Plugin in your website. If you have any questions or noticed any issues, please reach out! If you found this post valuable, I'd like to invite you to subscribe to our site so that you get email updates when we post new content. It's free and easy!