(NE) Add Facebook Chat Plugin

[Nathan Explosion]

 

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 November 24, 2021 by Nathan Explosion

[Schaken]

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!

[Nathan Explosion]

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

Enjoy.

[Joey_M]

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.

[Nathan Explosion]

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 November 26, 2021 by Nathan Explosion

[Joey_M]

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.

[Nathan Explosion]

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 November 26, 2021 by Nathan Explosion

[kmk]

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

 

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

[Nathan Explosion]

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.

[Joey_M]

Is there anything that can be done for dark themes?

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

[Nathan Explosion]

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 January 9, 2022 by Nathan Explosion

[Joey_M]

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.

[Nathan Explosion]

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.

 

[Nathan Explosion]

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

[Nathan Explosion]

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.