Facebook Messenger Chat

Hi there, here’s a tip for you.

You can add Facebook Messenger to your Webflow website, it’s in beta but works.

5 Likes

Fantastic, I have been looking for something like this.
Thanks!

1 Like

Hey @jorn

Maby a video idea for Youtube?

looking forward to it :wink:

You mean like a mini tutorial how to add Messenger chat? Yeah maybe, you gotta start sometime with video tutorials :smiley:

3 Likes

Awesome. I have be testing bot building platforms, but they are a bit hard core for SME purposes.

But… the cross chat platform / integration is more sensible. It probably constitutes poor user experience having Facebook account dependant chat?

1 Like

Hey @MichaelS I didn’t do a video, yet, but here’s a simple tutorial anyway: http://customer-chat.webflow.io

Screenshots are in Swedish but maybe you can get something out of it anyway? It’s pretty straightforward, kudos to the Facebook team here.

:smiley:

2 Likes

@jorn

Looks promising, definitely gonna do this later!

Much appreciated!

1 Like

It’s to easy to use this in android phone and in pc.

@jorn Did they disable it? I cannot seem to set it up at all. Check out my screenshot!

Hmm… I’ll have to revisit and check, i don’t use it anymore. I’ll se if I can do during the day.

Oh ok, that’s no problem @jorn! Thank you so much.

I finally got this working and would like to share the steps I took to make it work.

Prerequisites (on facebook.com):

  1. You have to have an app Id (Meta App Development - Documentation - Meta for Developers)

  2. You have to set up the plugin using the setup tool or whitelist your domain on facebook.com (i.e. you have to tell Facebook that the domain you are trying to run messenger on is allowed to run messenger). The setup tool asks for the domains or you can simply whitelist the domains from the facebook page settings.

Steps (on webflow):

Step 1. Your domain has to be using SSL (i.e. this requires you setup SSL on a custom domain or you use webflow hosting with SSL turned on and setup correctly).

Step 2. The code below has to be added to your site on the pages you want the messenger to show up on using a custom code embed (i.e. it has to be added in the body).

In the code below replace ‘YOUR APP ID’ and “YOUR PAGE ID” with your credentials.

<!-- Load Facebook SDK for JavaScript –>
<div id=“fb-root”></div>
<script>

window.fbAsyncInit = function() {
FB.init({
appId : ‘YOUR APP ID’,
autoLogAppEvents : true,
xfbml : true,
version : ‘v3.2’
});
FB.CustomerChat.showDialog();
};

(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 customer chat code –>
<div
attribution=setup_tool
page_id=“YOUR PAGE ID”>
</div>

Step 3. Publish the site and verify the messenger chat is working.

If this doesn’t work, I’d review all of the detailed instructions from facebook here: Chat Plugin - Messenger Platform - Documentation - Meta for Developers

Please let me know if this is helpful or if you have any additional questions.

Cody

4 Likes

Hi Cody,

I tried your tutorial and the messenger chat does not appear on my website.

I followed all instructions but still can’t find out the problem.

Here is my shared link : Webflow - Happywebacademy

Hi Cody,

Interesting tutorial, but doesn’t work either on my end.

Hi,
Same with me, can´t get it to work. I see that you have got it working on your site now.
Can you please share how you did it?

Hi @Emil,

Yes sure, the solution was to add some code

First add a Embed and give it a class name “fb-customerchat”.
Then add your page ID on code below.
Paste it and you’re good to go :slight_smile:

The code :

    <!-- Load Facebook SDK for JavaScript -->
    <script>
     window.fbAsyncInit = function() {
    FB.init({
      appId            :  '',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
      };
      
    (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/fr_FR/sdk/xfbml.customerchat.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>

    <!-- Your customer chat code -->
    <div class="fb-customerchat"
      attribution=setup_tool
      page_id="-------------------">
    </div>

Thank you @palombokevin! This worked for me on desktop. However, it does not show up when i am on ipad or on iPhone. But I see that it is showing up on your site. What did you do for it to work on iPad & iPhone? (i copied your example exactly)

Can someone help us with a video tutorial on this. It seems too tricky but it’s cool for live chat stiffs

Hi @Emil, it should work without issues on mobile too. No additional manipulation needed. I don’t know what can be the problem…

I’m clear with adding the APP ID, but then I’m lost with the “page ID”, how do I get this?