Jump to content

[FREE] Messenger chat for your PrestaShop store

Krystian Podemski

By Krystian Podemski ,
in Free Modules & Themes

 Share Followers 24

Recommended Posts

Krystian Podemski

Krystian Podemski 290

Posted
Posted

Hello everyone,

as Facebook just released their "chat plugin" based on Messenger i've created a simple free module which allows you to implement it into your PrestaShop store

Module should work just fine both on PrestaShop 1.7 and PrestaShop 1.6

The module and its source code is on GitHub:

https://github.com/kpodemski/phfbchat

  • Like 1
  • Thanks 5

Share this post

Link to post
Share on other sites
  • 3 weeks later...
  • 2 weeks later...
  • 2 weeks later...
  • 1 month later...
  • 3 weeks later...
  • 1 month later...
Endri

Endri 0

Posted
Posted (edited)
7 hours ago, Interlink said:

I have done all steps but still not working on my site please help!!!

 

The AP ID is located at the top of the page while trying to setup an APP, by mistake I copied at first the token (middle page).

Edited by Endri (see edit history)

Share this post

Link to post
Share on other sites
  • 3 weeks later...
  • 2 weeks later...
AFRIT

AFRIT 0

Posted
Posted
Le 6/2/2018 à 6:34 PM, Greg a dit :

Hi

Not working on 1.7.3.3. Nothing is displayed :/

worked fine on presta 1.7.3.3 + custom theme (pixel module is enabled)

Share this post

Link to post
Share on other sites
  • 2 weeks later...
Bogdans

Bogdans 1

Posted
Posted

Hello, please if you can tell me where to enter in the source code of prestashop the code generated by facebook.

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(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/ro_RO/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="376296163454514"
  theme_color="#0084ff"
  logged_in_greeting="Hello"
  logged_out_greeting="Hello">
</div>

Share this post

Link to post
Share on other sites
  • 3 weeks later...
yybeautyonline

yybeautyonline 0

Posted
Posted

Is there a way to edit the custom message and to have it popped-up? Currently, it does not pop-up the message that "Hi, how can we help you" on the bubble. Still, you need to click the FB button first. I know on the FB Settings we can customize the color of the button and add the custom message, can we do that here or where can we paste the html code? Thanks!

Share this post

Link to post
Share on other sites
DMT

DMT 0

Posted
Posted

Hi! Thanks for great module.

It works at my store 1.6.1.12 but only on main page!

On category pages,product pages etc messenger bubble doesn't pop up....

How can I repair this ?

Share this post

Link to post
Share on other sites
  • 2 weeks later...
  • 1 month later...
Sgarbo

Sgarbo 0

Posted
Posted
On 10/1/2018 at 3:33 PM, Krystian Podemski said:

Hello everyone,

as Facebook just released their "chat plugin" based on Messenger i've created a simple free module which allows you to implement it into your PrestaShop store

Module should work just fine both on PrestaShop 1.7 and PrestaShop 1.6

The module and its source code is on GitHub:

https://github.com/kpodemski/phfbchat

Thank you for great module! But i have a trouble with it! If i visit the website with computer, everything is ok. But if i visit it on the phone, the messenger button doesn't appear...

Why?

 

Thank you!

Share this post

Link to post
Share on other sites
  • 1 month later...
matt923

matt923 0

Posted
Posted
On 11/21/2018 at 8:11 AM, Krystian Podemski said:

Module has been updated to v1.1.0, new version covers some additional options for plugin and replace SDK URL to the newest one provided by Facebook.

More information and link to download, here: https://github.com/kpodemski/phfbchat

 

Hi, I installed module, and I dont have any files, module installed but he is gone.

I have presta 1.6.1.23 and PHP 7.3

Share this post

Link to post
Share on other sites
  • 3 weeks later...
  • 3 weeks later...
Trendy

Trendy 0

Posted
Posted
On 12/18/2018 at 1:17 AM, Caito103 said:

Hello! I have prestashop 1.7.2.1, i isntalled the module, i added all the info and cleared the cache but nothing happened, the messenger icon doesnt show up.

Same problem for me

Share this post

Link to post
Share on other sites
DIVINCII

DIVINCII 0

Posted
Posted

There was an update on the 9th january 2019 :

switch js.src = "https://connect.facebook.net/fr_FR/sdk.js";

to

js.src = "https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js";

Share this post

Link to post
Share on other sites
SIMUnlock

SIMUnlock 0

Posted
Posted (edited)

Hi, if you Chat box not show, this worked for me:

Note: Dont forget add the domain to white list in facebook messenger. In your Page go to Configuration > Messenger Platform > Supported domains and add your Domains

1. In your file hosting edit this .tpl ( public_html/themes/yourtheme/header.tpl )

2. When the tag <body> he open. Like this:  

<body{if isset($page_name)} itemscope itemtype="http://schema.org/WebPage" id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} show-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}">

Paste the following after the body tag: 

	<!-- Load Facebook SDK for JavaScript -->

<div id="fb-root"></div>
<style>
body #fb-root { display: block; }
.fb_dialog, .fb-customerchat iframe:not([class*=mobile]) { margin-bottom: 0px; margin-right: 0px; }

</style>
<script>
(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/'+(navigator.language || navigator.userLanguage).replace('-', '_')+'/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat"
	page_id="1720923411485820" 	<!-- YOUR PAGE ID HERE -->
	theme_color="#0084ff"
	logged_in_greeting="Hola, ¿En qué podemos ayudarle?" 	<!-- YOUR MESSAGE -->
	logged_out_greeting="Hola, ¿En qué podemos ayudarle?"> <!-- YOUR MESSAGE -->
</div>

3. Save and test.

Proof

https://i.imgur.com/fbjZvEm.png

 

 

fbjZvEm.png

Edited by SIMUnlock (see edit history)

Share this post

Link to post
Share on other sites
  • 3 weeks later...
banan_44

banan_44 3

Posted
Posted

Hi. Is there a way to move the Messenger button to the left side? It covers the "go up" button. I found a code on one website that moves the chat window to the left, bo the Messenger logo is still on the right side.

image.png.8b6046e93e787b80d5d621baf46e6a3b.png

Here's the code I have found: 

<style>
  #fb-root > div.fb_dialog.fb_dialog_advanced.fb_shrink_active {
     right: initial !important;
     left: 18pt;
     z-index: 9999999 !important;
  }
  .fb-customerchat.fb_invisible_flow.fb_iframe_widget iframe {
     right: initial !important;
     left: 18pt !important;
  }
</style>

 

Share this post

Link to post
Share on other sites
Krystian Podemski

Krystian Podemski 290

Posted
Posted

Hello guys,

unfortunately there are a lot of issues with Facebook Messenger, customer.sdk is not compatible with other SDKs etc

i've released one update to change sdk to the new one and add few options but it's not really working with all available scenarios

Share this post

Link to post
Share on other sites
  • 2 weeks later...
  • 4 weeks later...
ramsharan

ramsharan 3

Posted
Posted

hi,

I am using this plugin in my prestashop site 1.6.1.16,did as per instruction,

it doesnt display in front office.

website url is  https://singmasters.com

pls advise.

thanks

 

Share this post

Link to post
Share on other sites
  • 2 weeks later...
Super Gift

Super Gift 2

Posted
Posted

Hi, Thank you for the plugin. It is working on my website.

However, I have one question. 

Is it possible to have a close button on the pop up if my customer is not log into messenger?

Currently have the pop up but I am not able to close it. 

Any solution for that?

mesenger.PNG.0d70c892b641d6fbc1f85582bb170950.PNG

Thank you.

 

  • Like 1

Share this post

Link to post
Share on other sites
Plika1988

Plika1988 3

Posted
Posted (edited)

I've got the module installed and it's showing up on the website after adding the website to the whitelist. The problem I'm having is that when I try to login, the little login pop-up screen just returns a 1 but doesn't actually fully login (see screenshot). Does anybody know how to fix this?

 

Thanks in advance.

EDIT:

Never Mind it was an addon in firefox that was causing the problem. It works perfectly now.

 

Edited by Plika1988
solved (see edit history)

Share this post

Link to post
Share on other sites
  • 4 weeks later...
Agriselect

Agriselect 0

Posted
Posted

Hi,

 

I want the pop up  to be activated after , let's say,  5 minutes (300 sec).

Before that I want only the little blue FB-Messenger logo in the right bottom corner of my website.

 

I find it very irritating if someone directly asks me if he/she can help me.
When someone is (searching) for a longer time on my website I want to help them and want to ask them in a popup if the needed help.

Without any reaction of the customer this popup may disappear again after let's say 5 seconds.

Is there a way to make this happen?

 

 

Share this post

Link to post
Share on other sites
  • 2 weeks later...
cometemarketing

cometemarketing 0

Posted
Posted

it is not working for me on 1.6.1.24 - 

Uncaught b {message: "invalid version specified", innerError: undefined}innerError: undefinedmessage: "invalid version specified"__proto__: cconstructor: ƒ b(b,c)stackTraceLimit: 10__superConstructor__: ƒ c()arguments: (...)caller: (...)length: 2name: "b"prototype: cconstructor: ƒ b(b,c)__proto__: Error__proto__: ƒ ()[[FunctionLocation]]: xfbml.customerchat.js:92[[Scopes]]: Scopes[5]__proto__: Error

i have whitelist my domain on facebook group chat settings both for https and http, page id is correct and the error is like above. i also tried to add the code in my themes header.tpl file rigt after the body tag and also tried on footer.tpl  before ending body tag. error is the same. covering the script with {literal}<script></script>{/literal} also doesn't help.

Share this post

Link to post
Share on other sites
  • 1 month later...
  • 1 month later...
  • 8 months later...
  • 4 weeks later...
koke2020

koke2020 0

Posted
Posted (edited)

Genial el módulo, solo tengo un problema, se puede ver en toda mi web menos en el índice (página de inicio).

Da más posibilidades de contestación que whatsapp de 1 solo numero, asi que lo dejo habilitado de todos los modos.

Si alguien puede ayudarme por favor, mi web es www.mangas.cl

Tengo prestashop 1.7.6.1

Mil gracias de ante mano.

Edited by koke2020 (see edit history)

Share this post

Link to post
Share on other sites
  • 4 weeks later...
espanola

espanola 0

Posted
Posted

Thank you for great module. It work very well on my PS 1.6.

Until I install the Facebook Connect v1.2.0 - by HiPresta, the messenger icon does not show anymore.

If I disable the FB SDK Js in Facebook Connect settings, the Messenger Icon show and work again.

I guess there is confliction between FB SDK Js of this module and Facebook Connect.

Could you show me how to fix?

Thank you!

Share this post

Link to post
Share on other sites
Roy Denver

Roy Denver 0

Posted
Posted

For those who have issues on displaying the fbchat plugin.

You have to remove or comment out the "display: none" css property if you are not using the default theme.
public_html > themes > transformer > css > global.css
#fb-root {
/* display: none; */
}

Share this post

Link to post
Share on other sites
  • 1 month later...
  • 2 weeks later...
mr_absinthe

mr_absinthe 4

Posted
Posted (edited)

Hi, thanks for the module, it works almost fine. The only big issue I have is that it will greatly change the page performance according to PageSpeed Insights. I tested several times and the difference is quite big. Mobile score without module average 67. Mobile score with the module average 40. Perhaps you can have a look at it to find out how to optimize it...?
Also, it looks like the dialog delay is not working, at least not on 1.7.6.1

Edited by mr_absinthe (see edit history)

Share this post

Link to post
Share on other sites
Krystian Podemski

Krystian Podemski 290

Posted
Posted

For the performance, tbh if you want your page to be fast, you should use tawk.to or some other script with better performance, because facebook simply doesn't care :)

I have some ideas for improving performance, i'll update this topic if something could be done in this topic.

About dialog delay, same story, i think that option is properly implemented, but Facebook has some cache things etc. and sometimes they decide if show or not popup based on some customer behavior, i don't have a full control over it, sorry.

Share this post

Link to post
Share on other sites
SIMUnlock

SIMUnlock 0

Posted
Posted

@Krystian Podemski Awesome async implementation of the FB Messenger Plugin ❤️ 

I pass from 40 - 50 points of PageSpeed Insights to 80 - 89 points in Mobile

Thank you very much.

NOTE: I only made minor changes in the wait time from 1000 to 2000, its works for me for better performance

 

 

fbmplugin.PNG

Share this post

Link to post
Share on other sites
mr_absinthe

mr_absinthe 4

Posted
Posted (edited)

@Krystian Podemski first of all big thanks for taking time to improve your FREE module! There are so many developers that don't give a s**t about their paid modules not to mention free ones! 👏👏👏

I did several tests making sure the conditions are same, cache cleared, same time delay, tested on home page. First one was tawk.to, second was your phfbchat and third one was also your phfbchat where I changed 1000 to 2000 in \views\templates\hook\footer.tpl file (i hope it's the correct one 😄). The sheet is quite clear, best numbers in green same as totals.

I would like to ask you whether it is possible to add one small feature, it would be absolutely awesome. In tawk, I can disable the chat on some pages, such as checkout or basket as it may be distracting especially on mobile. Do you think it's possible?

There are couple of small typos in phfbchat.php - word messanger 😉

@SIMUnlock nice speed results!

MESSENGER-SPEED-TEST.png

Edited by mr_absinthe (see edit history)
  • Like 1

Share this post

Link to post
Share on other sites
SIMUnlock

SIMUnlock 0

Posted
Posted
51 minutes ago, mr_absinthe said:

@Krystian Podemski first of all big thanks for taking time to improve your FREE module! There are so many developers that don't give a s**t about their paid modules not to mention free ones! 👏👏👏

I did several tests making sure the conditions are same, cache cleared, same time delay, tested on home page. First one was tawk.to, second was your phfbchat and third one was also your phfbchat where I changed 1000 to 2000 in \views\templates\hook\footer.tpl file (i hope it's the correct one 😄). The sheet is quite clear, best numbers in green same as totals.

I would like to ask you whether it is possible to add one small feature, it would be absolutely awesome. In tawk, I can disable the chat on some pages, such as checkout or basket as it may be distracting especially on mobile. Do you think it's possible?

There are couple of small typos in phfbchat.php - word messanger 😉

@SIMUnlock nice speed results!

MESSENGER-SPEED-TEST.png

@mr_absinthe Thank you. 

I think that its possible disable to specific page. 

It comes to mind, do the following

  1. Check the names of the pages that you want disabled
    1. For this, I have the var named "$page_name", you can paste the follow code to view the name of your pages
    2. For example in header paste {$page_name|escape:'html':'UTF-8'}, this code we should you the name of the page ( index, product, cart, module-x)
  2. Once having the names of the pages, you can go to  \views\templates\hook\footer.tpl and add a simple if sentence with or's. For example: 
  3. {if $page_name !='excluedPage' || $page_name !='excluedPage2'}
    {if $phfbchat_init}
    <div id="fb-root"></div>
    {/if}
    <style>fscript {ldelim}display: none;{rdelim}</style>
    <script data-keepinline="true">
    var _thirdPartyScriptsLoaded = false;
    var _head = document.getElementsByTagName('head')[0] || document.documentElement;
    function _handleThirdPartyScripts() {ldelim}
        var fscripts = document.querySelectorAll('fscript');
        [].forEach.call(fscripts, function(fscript) {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            if (fscript.hasAttributes()) {ldelim}
                for (var attributeKey in fscript.attributes) {ldelim}
                    if (fscript.attributes.hasOwnProperty(attributeKey)) {ldelim}
                        script[ fscript.attributes[ attributeKey ].name ] = fscript.attributes[ attributeKey ].value || true;
                    {rdelim}
                {rdelim}
            {rdelim} else {ldelim}
                script.appendChild( document.createTextNode( fscript.innerHTML ) );
            {rdelim}
            _head.insertBefore( script, _head.firstChild );
        {rdelim});
    {rdelim}
    function loadThirdPartyAssets() {ldelim}
        if (_thirdPartyScriptsLoaded) {
            return;
        }
        _thirdPartyScriptsLoaded = true;
        setTimeout(function() {ldelim}
            if ('requestIdleCallback' in window) {ldelim}
                requestIdleCallback(_handleThirdPartyScripts, {ldelim} timeout: 1500 {rdelim});
            {rdelim} else {ldelim}
                _handleThirdPartyScripts();
            {rdelim}
        {rdelim}, 1500);
    {rdelim}
    window.addEventListener('scroll', function() {
        loadThirdPartyAssets();
    }, false);
    document.onclick = function() {
        loadThirdPartyAssets();
    };
    window.fbAsyncInit = window.fbAsyncInit || function() {
        FB.init({
          autoLogAppEvents : true,
          xfbml            : true,
          version          : 'v8.0'
        });
    };
    </script>
    <fscript id="facebook-jssdk" src="//connect.facebook.net/{$phfbchat_locale}/sdk/xfbml.customerchat.js"></fscript>
    <div class="fb-customerchat"
    page_id="{$phfbchat_page_id}"
    {if $phfbchat_logged_in}
    logged_in_greeting="{$phfbchat_logged_in}"
    {/if}
    {if $phfbchat_logged_out}
    logged_out_greeting="{$phfbchat_logged_out}"
    {/if}
    {if $phfbchat_theme_color}
    theme_color="{$phfbchat_theme_color}"
    {/if}
    {if $phfbchat_greeting_dialog_delay}
    greeting_dialog_delay="{$phfbchat_greeting_dialog_delay}"
    {/if}
    ></div>
{/if}

    Where the first if, contains the pages that you want ignore, you have to replace $page_name !='excluedPage' to your page  $page_name !='products'

  4. Maybe this is garbage or something very seedy, it's not the most elegant solution, but theoretically it should work

  5. Good Luck

Share this post

Link to post
Share on other sites
Krystian Podemski

Krystian Podemski 290

Posted
Posted

Thank your your kind messages y'all :)

@mr_absinthe you can exclude module from displaying by going to Design -> Positions (or Modules -> Positions on 1.6), search for the "displayFooter" hook, click edit button from Messenger Chat and then you can select on which pages you want to disable module from displaying :)

Here's more about this feature:

http://doc.prestashop.com/display/PS17/Positions#Positions-Editinganattachedmodule

i'll increase a threshold to 2s :)

Share this post

Link to post
Share on other sites
mr_absinthe

mr_absinthe 4

Posted
Posted (edited)

Hi, not sure if it's related to the module or Facebook, but I noticed two unpleasant issues. First one you can see on the attached screenshot - notification that there is no connection - despite the fact that the Internet Connection was working with no issues whatsoever. The second issue is that the chat window was impossible to close using the button in top-right corner. It did nothing when clicked. This was also reported by one of our visitors, therefore it is not just me: "This box won't condense and the page is frozen under it so I can't read it. Thus, I will be going somewhere else."

I decided to record the "freeze" for you, so here it is.

chat.png

Edited by mr_absinthe (see edit history)
  • Like 1

Share this post

Link to post
Share on other sites
Krystian Podemski

Krystian Podemski 290

Posted
Posted

I have 1.7 locally, no issues there too. I think this might be a conflict with some other Facebook plugin, if you have one (like slide box, like button, fb login) or just "Facebook things" :) unfortunately Messenger is very problematic recently and this has nothing to do with PrestaShop etc.

Share this post

Link to post
Share on other sites
mr_absinthe

mr_absinthe 4

Posted
Posted

just to let you know, I had to disable it, too many people reported the same issue, these are just examples: "how do i close this chat window....it is covering the text on your web page", "This box won't condense and the page is frozen under it so I can't read it. Thus, I will be going somewhere else.", "I cannot see the page, box is frozen", "I cant scroll the web because of this window. I am leaving.."
I know this may not be your fault, but it is happening so you better know about it. It is difficult to replicate, I managed just once but if you have it on a website where is some traffic, I'm sure you'll get the same issues. I'm going to test something else, so I'll be most likely able to tel whether it is your module or not.

Share this post

Link to post
Share on other sites
  • 1 month later...
Yuriy_Sol

Yuriy_Sol 2

Posted
Posted

Hi Krystian. Thank you for your module, it works perfectly. However, there is one feature that I and my website visitors will appreciate very much. Is it possible to integrate "greeting_dialog_display" attribute into admin interface to enable/disable automatic appearing pop-up chat window??? Alternatively, is it possible to manually change the locally installed module text to set the attribute on "hide" value? Thank you in advance. Yuriy

 

  • Like 1

Share this post

Link to post
Share on other sites
  • 2 weeks later...
PCLINE

PCLINE 1

Posted
Posted

Thank you for the module you provided, better than some of the paid modules.


But there is a problem which is that the chat icon does not appear in Firefox
This problem appeared after I changed "Dialog delay:"


I also want to ask you: How can I change the size and location of the chat icon


Thanks again

Share this post

Link to post
Share on other sites
Yuriy_Sol

Yuriy_Sol 2

Posted
Posted

Hi PCLINE, I also needed to resolve the position issue.

A friend of mine helped me.

Here is the way.

1. Find the file style_global.css and add the following text to the end:

/* Facebook Chat Button position adjusment */
.fb_dialog_content iframe {
  right: -4px !important;
  bottom: 75px !important;
}

/* Facebook Chat Pop-up window position adjusment */
.fb_iframe_widget iframe {
     right: 0px !important;
     bottom: 136px !important;
}

 

2. Change numbers or alignment based on what you actually need.

 

  • Like 1

Share this post

Link to post
Share on other sites
PCLINE

PCLINE 1

Posted
Posted (edited)

 

Thank you very much Yuriy_Sol, I benefited from your post

Regarding the file "style_global.css", it is not present on the server, but I found the correct file to modify it which is "theme.css" on the path: themes/"your theme"/assets/css

 

After observation and experimentation, I found the valid code to change the icon size as well: 

transform: scale (1);

Where 1 = 100% , to change the size of the icon to 75% you type 0.75 

transform: scale(0.75);

 

The complete code CSS to change the location and size of the icon and the chat window: 

/* Facebook Chat Button position adjusment */
.fb_dialog_content iframe {
	transform: scale(0.75);
	right: 0px !important;
	bottom: 50px !important;
 }

/* Facebook Chat Pop-up window position adjusment */
.fb_iframe_widget iframe {
	transform: scale(1);
	right: 0px !important;
	bottom: 100px !important;
}

 


 

Edited by PCLINE (see edit history)
  • Like 1

Share this post

Link to post
Share on other sites
  • 3 months later...
nikoz

nikoz 5

Posted
Posted

Hi, I use P.S 1.7.6. In mobile view it doesn't appear. Do I have to do anything else apart from installing it ?

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Followers 24
Go to topic listing
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More

  I accept