Messenger-Mysite

Facebook Messenger on your website

Version

0.0.1

This is a tiny package that lets you add Facebook Messenger to your website for chat functionality with almost zero installation. The chat icon opens a chat window with you from messenger.com (m.me). This can be done with Pages and personal accounts. It will also direct them to a chat with you in Messenger if they're on iOS as well. I haven't tested this with Android yet.

This is still in the early stages so contributing to the project is greatly appreciated! Maybe some more icon templates?

Getting Started

Upload all the things to the root of your site, or just the CSS and JS assuming your site is already built.
Include this on your pages. Balloon.css is recommended so people know what the button does.

<link href="css/balloon.min.css" rel="stylesheet"> <!-- optional tooltips -->
<link href="css/messenger-mysite.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <!-- if needed -->
<script src="js/messenger-mysite.min.js"></script>

Paste this somewhere on your pages like the footer with your Facebook username included in the URL.

<!-- left messenger -->
<a class="popup" href="https://m.me/[your Facebook username]">
  <div id="m-ios">
    <div class="messenger-ios hvr-grow" data-balloon="Chat with us!" data-balloon-pos="right"></div>
  </div>
</a>

<!-- right messenger -->
<a class="popup" href="https://m.me/[your Facebook username]">
  <div id="m-android">
    <div class="messenger-android hvr-float" data-balloon="Chat with us!" data-balloon-pos="left"></div>
  </div>
</a>

Lastly, initialize it with some settings. More settings can be found in /js/struck-messenger.js

<script type="text/javascript"> 
  $('.popup').popupWindow({ 
    height:500, 
    width:640, 
    centerScreen:1
  }); 
</script>

That's it!

PSD files are included in the /img directory (with a demo logo by Freepik from Flaticon) for your chat icons. Make sure you read the Facebook Messenger Branding Guidelines before you make one.

License

MIT

derekbtw / messenger-mysite Goto Github PK