Jump to content

(NE) Add Facebook Chat Plugin

Featured Replies

Posted

 

What is it

This adds Facebook's "Chat plugin" functionality to your site, allowing your configured visitors to initiate Facebook Chats with your Facebook page.

How?

Simple - it adds the code provided by Facebook to your theme without the need to edit the theme itself. All you have to do is provide your Facebook Page ID to the plugin's settings.

But how do I do that?

Well, first you do the following (correct at the time of posting this, and will be updated as and when Facebook change their instructions):

  • Go to your Facebook page
  • In the 'Manage Page' column, locate and click 'Settings'
  • In the 'Page settings' column, click 'Messaging'
  • Scroll to the 'Add Messenger to your website' section, and click 'Get Stared'
  • On the resulting page, you should be in the 'Chat plugin' section.
  • Click 'Set up' and then follow the prompts to:
  • Set your language
  • Add your site domain
  • Copy the code (you'll need this soon)
  • Paste the code (just pretend you've done it, click 'Finish')
  • You can configure the chat plugin further, if you wish, via the 'Customise your Chat plugin' section
  • Then you look at that copied code, find the line that contains the 'page_id'
chatbox.setAttribute("page_id", "123445523342432376");
  • The series of numbers in there is, surprise surprise, your Facebook Page ID: 123445523342432376
  • So copy it and add it in the relevant field in the plugin settings in the ACP.

 

Edited by Nathan Explosion

Hello! you have a wonderful product here. It would not show up until I cleared my cache. I hope this was ok to do manually. Thank you!

  • Author

No problem - no issue at all there with clearing the cache, it's sometimes a necessary evil with theme hooks.

Enjoy.

Would it be possible to only show the chat on a certain page?

I think it would be useful to have this on my site store, so that potential customers can ask direct questions. Yet, I don't need it to be shown anywhere else.

  • Author
24 minutes ago, Joey_M said:

Would it be possible to only show the chat on a certain page?

Probably, yep.

Clarification - a certain page ONLY, or all pages within the Store (therefore at the application level)?

Edited by Nathan Explosion

13 minutes ago, Nathan Explosion said:

Probably, yep.

Clarification - a certain page ONLY, or all pages within the Store (therefore at the application level)?

All pages within the store, sorry.

  • Author

OK - nice idea, I'll add it in.

v1.1.0 is pending approval:

  • NEW
    • Added a setting to control display of the chat plugin in specific applications only (defaults to all applications, and includes 3rd-party apps)
  • FIXES
    • None
  • CHANGES
    • None

Edited by Nathan Explosion

Hi, this app can be improved more like the attached image describing? IMG_20211127_145727.thumb.jpg.ea61e439f9cb58741e8286b5a4f75c9c.jpg

 

Another question is, is possible for you release similar app but for Wechat? 

  • Author
20 minutes ago, kmk said:

Hi, this app can be improved more like the attached image describing? 

Send your request to Facebook.

 

20 minutes ago, kmk said:

Another question is, is possible for you release similar app but for Wechat? 

Nope.

  • 1 month later...

Is there anything that can be done for dark themes?

The icon has a white bubble showing above it on my theme.

qjswBJD.png

  • Author

The style of the icon is controlled by Facebook settings, not the plugin:

On 11/24/2021 at 9:18 AM, Nathan Explosion said:

You can configure the chat plugin further, if you wish, via the 'Customise your Chat plugin' section

I am happy to take a look if you provide a link to your site here, to see if there is something that can be added to your css to override it, but there are. No guarantees it will work though.

Edited by Nathan Explosion

On 1/9/2022 at 9:20 PM, Nathan Explosion said:

The style of the icon is controlled by Facebook settings, not the plugin:

I am happy to take a look if you provide a link to your site here, to see if there is something that can be added to your css to override it, but there are. No guarantees it will work though.

I understand, I'll PM you my site address.

Thanks for taking a look and for creating this.

  • 1 month later...
  • Author

v1.3.0 is pending approval

  • NEW
    • Added a new setting to allow easy modification of the version number for the Facebook code, as and when FB release a new version.

 

  • 3 months later...
  • Author

v1.3.1 is currently pending approval

NEW

  • Tested & compatible with IPS 4.7

CHANGES

  • Changed default value of 'Facebook code version' inline with current version display in Facebook's configuration code
  • Added tabs to settings to separate items

FIXES

  • None
  • 10 months later...
  • Author

v2.0.0 is currently pending approval

NEW

  • Plugin has been converted to an application.
    • settings from plugin will be migrated over into the application.
    • plugin version will be uninstalled via the background queue.

CHANGES

  • Enforced usage of v16.0 of the Facebook functionality.
    • future releases of this resource will upgrade this setting as and when required.

FIXES

  • Fixed an issue where the "Where to show?" setting wouldn't display the configured chosen value, defaulting to 'Everywhere' each time.
  • Fixed an issue where JS errors were visible in the browser developer console if the resource wasn't configured with a Facebook Page ID.

Recently Browsing 0

  • No registered users viewing this page.