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文件中声明小部件访问代码。