Skip to Content

Facebook Customer Chat Plugin

Integrate the Facebook Messenger chat onto the website so users can communicate in real-time.

February 10, 2018

Demo


<div class="fb-customerchat"
	<?php if ( nebula()->get_option('facebook_app_id') ): ?>
		messenger_app_id="<?php echo nebula()->get_option('facebook_app_id'); ?>"
	<?php endif; ?>

	page_id="<?php echo nebula()->get_option('facebook_page_id'); ?>"
	theme_color="<?php echo get_theme_mod('nebula_primary_color', nebula()->sass_color('primary')); ?>"
	logged_in_greeting="Get in touch now! We're ready to chat with you."
	logged_out_greeting="Get in touch now! We're ready to chat with you.">
</div>

Additional Notes

What you’ll need

  • Add your Facebook URL and Page ID to Nebula Options (on the Metadata tab)
    • To get your Page ID, navigate to your page on Facebook, click the About tab, and scroll down to the bottom
  • Whitelist your hostname
    • From your Facebook Page, click Settings (at the top) then Messenger Platform (left).
    • Although it says “Domain”, it really needs the entire basedomain (so including the protocol and subdirectories or subdomains). For example: https://nebula.gearside.com/
  • Paste in the snippet from the Facebook documentation or use the example snippet from the demo which automatically uses the correct data.
    • Place it in the footer to appear on every page, or have it appear only on specific pages.
  • Nebula automatically calls the Facebook SDK when needed, but if not using that method, you’ll need to make sure the Facebook SDK gets called.
  • (Optional) Tie it into your Facebook App by adding your App ID (from your Facebook Developers page) to the Nebula Options (in the APIs tab). Doing this will provide data about the user for personalization, remarketing, or other uses.

Nebula Tips

  • The greeting is limited to 77 characters before it cuts off into an ellipsis…
  • Be careful using quotes and double-quotes in your greeting (especially if doing anything tricky with PHP) because they are stored in an HTML attribute and may cause it to close.
  • Use Nebula’s data to your advantage! Customize the greeting to the user if you know their first name, company, or industry (for example).
    • You could use the business hours Nebula Options to control when the chat even appears.
  • Use WordPress data, too. Maybe the greeting references the page being viewed- perhaps its a product where you can mention it in the greeting (or a feature)?
  • Maybe the customer chat remains minimized for the first pages of the session and later remove the minimized = true attribute to show the greeting?
    • If you detect the visitor is stuck, viewing repeat pages, or maybe they experience an error (404 page or validation issues on a form for example), consider showing the greeting (with a customized message).
  • Consider randomizing the greeting for some variety. Use PHP to your advantage and create an array of greetings to show if a targeted one is not available.
  • As of February 2018, the Facebook Customer Chat plugin usage can not be detected for reporting in Google Analytics.
    • Beyond usage tracking, it’d be nice to know that the user interacted with the greeting (to know not to show it on subsequent pageviews).
  • When a user uses this chat, the Facebook Connect API (which Nebula already listens for) can be utilized for further website enhancements.

Facebook Documentation