https://github.com/derekbtw/messenger-mysite

Facebook Messenger on your website
https://github.com/derekbtw/messenger-mysite

css diy facebook facebook-messenger js messenger website

Last synced: about 1 month ago
JSON representation

Facebook Messenger on your website

• Host: GitHub
• URL: https://github.com/derekbtw/messenger-mysite
• Owner: derekbtw
• License: mit
• Created: 2016-04-08T16:39:05.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-12T16:55:45.000Z (over 6 years ago)
• Last Synced: 2024-09-18T15:44:00.470Z (4 months ago)
• Topics: css, diy, facebook, facebook-messenger, js, messenger, website
• Language: CSS
• Homepage:
• Size: 1.37 MB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

```html

 

```

```html

 

```

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

```html   



  


    


  






  


    


  




```


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

```html

 

  $('.popup').popupWindow({ 

    height:500, 

    width:640, 

    centerScreen:1

  }); 

```

* 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

   [Getting Started]: 

   [Balloon.css]: 

   [Facebook Messenger Branding Guidelines]: 

   [Freepik]: 

   [Flaticon]: