Open thangdev opened 3 years ago
while wait for feedback you can try: https://levelup.gitconnected.com/integrating-facebook-customer-chat-into-a-react-js-app-5b7c21343048 :))
while wait for feedback you can try: https://levelup.gitconnected.com/integrating-facebook-customer-chat-into-a-react-js-app-5b7c21343048 :))
Hi @AnLuubk , Did you get the error like me ?
i got both 2 error you just created today and i just hotfix by the link i just comment previous. May be facebook have new update that package works incorrectly :(
@AnLuubk , Hi, thank you so much, I am follow this solution you mentioned above.
But I am stuck at import { ConfigContext } from '../hooks';
I don't understand this line. What is the ConfigContext ? and what is inside hooks file ?
Could you please send me the detail example your code ?
Thank you so much !!!
you dont need to do the same just create component like this:
import React from 'react';
import { fb } from '../../utils/thirdPartyAPi';
export default class MessengerCustomerChat extends React.PureComponent {
componentDidMount() {
this.timeout = setTimeout(() => {
fb(FB => this.timeout && FB.XFBML.parse());
}, 2000);
}
componentWillUnmount() {
clearTimeout(this.timeout);
delete this.timeout;
}
render() {
return <div className="fb-customerchat" attribution="setup_tool" page_id="YOUR_PAGE_ID"/>
}
}
@AnLuubk , Hi, thank you so much, I am follow this solution you mentioned above. But I am stuck at
import { ConfigContext } from '../hooks';
I don't understand this line. What is the ConfigContext ? and what is inside hooks folder ? Could you please send me the detail example your code ? Thank you so much !!!
The ConfigContext just think it is a place to get your PageID and AppID constant, he manage those information using React context
@AnLuubk , Hi, thank you so much, I am follow this solution you mentioned above. But I am stuck at
import { ConfigContext } from '../hooks';
I don't understand this line. What is the ConfigContext ? and what is inside hooks folder ? Could you please send me the detail example your code ? Thank you so much !!!The ConfigContext just think it is a place to get your PageID and AppID constant, he manage those information using React context
yes! for hiding data :)
Hi, @AnLuubk , @khaphannm I am implementing it but now I got an error like this: I think the reason is window.config.facebook is null, how can I fix this ? And do we really need a facebook appId variable here ? Thank you!
Hi, @AnLuubk , @khaphannm I am implementing it but now I got an error like this: I think the reason is window.config.facebook is null, how can I fix this ? And do we really need a facebook appId variable here ? Thank you!
you just put appId to direct value or empty string: "". facebook chat plugin does not need appId (i think)
window.FB.init({
appId: 'YOUR_APP_ID_OR_EMPTY_STRING',
autoLogAppEvents: true,
status: true,
cookie: true,
xfbml: false,
version: 'v10.0',
});
Hi @thangdev I feel the approach in the link is not quite convenient, so you can copy the source file as yours https://github.com/Yoctol/react-messenger-customer-chat/blob/master/src/MessengerCustomerChat.js
Then just modify a bit like this (Add window.FB.XFBML.parse()
)
window.fbAsyncInit = () => {
window.FB.init({
appId,
autoLogAppEvents,
xfbml,
version: `v${version}`,
});
this.setState({ fbLoaded: true });
// Add this line
window.FB.XFBML.parse();
};
Hi @khaphannm, Thanks for your support. Yesterday, I tried set the appId to empty string as @AnLuubk said and it works well now :))
@khaphannm The only problem now is the messenger doesn't hide when I click to navigate to other page, it's still there. I load this component only at specific child component but It still appears in all pages
Yes, you can choose which approach is easier for you, because this library is more convenient for controlling the props, when you need to custom your plugin.
You can have a look this example, my component, and everything is just in one place, to set up your own plugin
<MessengerCustomerChat
pageId={process.env.GATSBY_PAGE_ID}
appId={process.env.GATSBY_APP_ID}
version={process.env.GATSBY_MESSENGER_PLUGIN_VERSION}
loggedInGreeting={process.env.GATSBY_MESSENGER_MSG_IN}
loggedOutGreeting={process.env.GATSBY_MESSENGER_MSG_OUT}
htmlRef={window.location.pathname}
themeColor={secondaryMain}
language="vi_VN"
greetingDialogDisplay="show"
greetingDialogDelay={parseInt(process.env.GATSBY_MESSENGER_PLUGIN_DELAY)}
shouldShowDialog
/>
@AnLuubk The only problem now is the messenger doesn't hide when I click to navigate to other page, it's still there. I load this component only at specific child component but It still appears in all pages
you can check the pathname if this is the route you want to render Messenger
Or you can try method show and hide like this: https://stackoverflow.com/a/64451277
Yes, you can choose which approach is easier for you, because this library is more convenient for controlling the props, when you need to custom your plugin.
You can have a look this example, my component, and everything is just in one place, to set up your own plugin
<MessengerCustomerChat pageId={process.env.GATSBY_PAGE_ID} appId={process.env.GATSBY_APP_ID} version={process.env.GATSBY_MESSENGER_PLUGIN_VERSION} loggedInGreeting={process.env.GATSBY_MESSENGER_MSG_IN} loggedOutGreeting={process.env.GATSBY_MESSENGER_MSG_OUT} htmlRef={window.location.pathname} themeColor={secondaryMain} language="vi_VN" greetingDialogDisplay="show" greetingDialogDelay={parseInt(process.env.GATSBY_MESSENGER_PLUGIN_DELAY)} shouldShowDialog />
this is better code but im not sure how the code deal with server render, it may crash before come to client. if it work can you explain more?? :)
Yes, you can choose which approach is easier for you, because this library is more convenient for controlling the props, when you need to custom your plugin. You can have a look this example, my component, and everything is just in one place, to set up your own plugin
<MessengerCustomerChat pageId={process.env.GATSBY_PAGE_ID} appId={process.env.GATSBY_APP_ID} version={process.env.GATSBY_MESSENGER_PLUGIN_VERSION} loggedInGreeting={process.env.GATSBY_MESSENGER_MSG_IN} loggedOutGreeting={process.env.GATSBY_MESSENGER_MSG_OUT} htmlRef={window.location.pathname} themeColor={secondaryMain} language="vi_VN" greetingDialogDisplay="show" greetingDialogDelay={parseInt(process.env.GATSBY_MESSENGER_PLUGIN_DELAY)} shouldShowDialog />
this is better code but im not sure how the code deal with server render, it may crash before come to client. if it work can you explain more?? :)
Server side rendering will return all needed content for u when receiving request, then cannot crash If one of the props is need to get from server, you need further checking the existence of it before render MessengerCustomerChat component
sure i think i still have to check if it is client render for script to load. Thank you for your help. I will refactor my code later!
System Information OS: Ubuntu 20.04 LTS Browser: Chrome Version 89.0.4389.82
Context Plugin was implemented in Reactjs v16.13.1 I set the appId="" (blank string) and the module still works well
Steps to replicate When the page is loaded, the messenger work well but when I click go back button on browser to navigate to the previous page of my web, it crashes my web