我正在尝试将即时聊天功能集成到我的 React 网站中。我尝试过 npm 包 react-messenger-chat-plugin但它不起作用。我尝试使用元商务套装来执行此操作,它为我提供了以下代码:
<!-- Messenger Chat Plugin Code -->
<div id="fb-root"></div>
<!-- Your Chat Plugin code -->
<div id="fb-customer-chat" class="fb-customerchat">
</div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "106619385564023");
chatbox.setAttribute("attribution", "biz_inbox");
</script>
<!-- Your SDK code -->
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v15.0'
});
};
(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/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
但我不知道如何将它添加到我的代码中。我创建了以下函数:
const MsngrLiveChat=()=>{
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "106619385564023");
chatbox.setAttribute("attribution", "biz_inbox");
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v15.0'
});
};
(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/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
return(
<>
<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat">
</div>
</>
);
}
并尝试在reactdom.render中调用它。这是行不通的。我该如何解决这个问题?
最佳答案
感谢 Nazanaza 的回答,我已经完成了这个组件。希望对您有帮助
const ChatBot = () => {
const MessengerRef = useRef();
useEffect(() => {
MessengerRef.current.setAttribute('page_id', 'your_page_id');
MessengerRef.current.setAttribute('attribution', 'biz_inbox');
window.fbAsyncInit = function () {
window.FB.init({
xfbml: true,
version: 'v16.0',
});
};
(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/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
}, []);
return (
<>
<div id="fb-root"></div>
<div ref={MessengerRef} id="fb-customer-chat" className="fb-customerchat"></div>
</>
);
};
export default ChatBot;
关于reactjs - 如何在 React 中集成 Messenger 聊天插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73998514/