React Js中的Zoho实时聊天小部件

Question

我正在尝试在react js中测试Zoho实时聊天小部件代码，下面是示例代码

<a href={void(0)} onClick={()=>window.$zoho.salesiq.floatwindow.visible("show")}>LIVE CHAT</a> 

window.$zoho = window.$zoho || {};window.$zoho.salesiq = window.$zoho.salesiq || {widgetcode:"XXXXXXXXXX", values:{},ready:function(){}};
let  d= document;
let s = d.createElement("script");
s.type ="text/javascript";
s.id ="zsiqscript";
s.defer = true;
s.src = "https://salesiq.zoho.eu/widget";
let t = d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(s,t);
d.write("<div id='zsiqwidget'></div>");
window.$zoho.salesiq.ready = function()
{
window.$zoho.salesiq.floatwindow.visible("show");
}

上面是编写的代码，点击实时聊天，一个链接应该会显示实时聊天小部件。现在我没有得到任何错误或没有显示Zoho按钮。如果这是在react js中测试的正确方法，请提供帮助。

Answer 1

这对我有效：

import React from "react";
// Zoho Sales IQ widget code
export default function ZohoSalesIQ(props) {
window.$zoho = window.$zoho || {};
window.$zoho.salesiq = window.$zoho.salesiq || {
widgetcode: process.env.REACT_APP_ZOHO_SALESIQ_CODE,
values: {},
ready: function () {},
};
const d = document;
let s;
s = d.createElement('script');
s.type = 'text/javascript';
s.id = 'zsiqscript';
s.defer = true;
s.src = 'https://salesiq.zoho.com/widget';
let t;
t = d.getElementsByTagName('script')[0];
t.parentNode.insertBefore(s, t);
return (
<React.Fragment>
<div id='zsiqwidget'></div>
</React.Fragment>
);
}

请确保在.env文件中声明小部件访问代码。

Answer 2

import React，{useEffect}from"反应"；；

函数UserSupport((｛

useEffect(() => {
const url = 'https://salesiq.zoho.com/widget';
const widgetCode = 'a4af5eb95281904723549d6ff5177dc61fb4b3c5a9944856ba17f7c864fa';
const script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("id", "scriptid");
let code = `var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || {widgetcode: "${widgetCode}", values:{},ready:function(){}};var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;s.src="${url}";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);d.innerHTML = "<div id='zsiqwidget'></div>";`
script.appendChild(document.createTextNode(code));
document.body.appendChild(script);
return () => {
document.getElementById('scriptid').remove();
document.getElementById('zsiqscript').remove();
}
},[])
const showChat = () => {
document.getElementById('zsiq_float').classList.remove('d-none');
document.getElementById('zsiq_agtpic').click();
}
return (
<>
<style>{`
.zsiq_theme1.zsiq_floatmain {opacity: 0 !important; pointer-events :none; display:none !important;}
.siqanim{
transform: scale(1)!important;
}
`}
</style>
<div className="col-md-3" onClick={showChat} role="button">
<h2 className="fs-5 fw-bold pt-3">Live Chat</h2>
</div>
</>
)

}

导出默认UserSupport