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

Posted 2023-02-19

【中文标题】React Js 中的 Zoho 实时聊天小部件

【英文标题】：Zoho live chat widget in React Js

【发布时间】：2021-09-12 11:47:14

【问题描述】：

我正在尝试在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 中测试的正确方法，请提供帮助。

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