如何在Zoho SalesIQ聊天组件中用JavaScript读取meta标签配置值

需求背景 #

• 需要为WordPress站点的每个网页指定对应的Zoho聊天接待部门，无单独配置的页面使用域名下的默认聊天部门
• 站点预装Zoho SalesIQ官方插件且无法禁用，初期只能修改插件设置内的聊天组件JavaScript代码实现逻辑，无法通过PHP输出动态配置
• 已在页面head区域插入存储对应配置的自定义meta标签，需要将meta标签中的值动态注入到Zoho JS代码的widgetcode、部门配置两个位置
• 初期通过硬编码多组if条件判断实现了基础功能，但代码冗余、可维护性极差，需要更简洁的实现方案

初始待完善代码（含待替换占位符） #

<meta name='my_zoho_widgetcode' content='123456789' />
<meta name='my_zoho_deptcode' content='deptA' />

<script id="zsiqchat">
    var $zoho=$zoho || {};
    $zoho.salesiq = $zoho.salesiq || {
        widgetcode: "GET-WIDGETCODE-FROM-META-TAG", 
        values:{},
        ready:function(){}
    };
    var d=document;
    s=d.createElement("script");
    s.type="text/javascript";
    s.id="zsiqscript";
    s.defer=true;
    s.src="https://salesiq.zoho.com/widget?plugin_source=wordpress";
    t=d.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(s,t);
    $zoho.salesiq.ready=function() {
        $zoho.salesiq.chat.department("GET-DEPT-FROM-META-TAG"); 
    };
</script>

原有冗余实现（硬编码if判断） #

<script type="text/javascript" id="zsiqchat">
    var zoho_meta_widgetcode = document.querySelector('meta[name="zoho_widgetcode"]').content;
    var zoho_meta_deptcode = document.querySelector('meta[name="zoho_deptcode"]').content;
    var $zoho=$zoho || {};
    if (zoho_meta_widgetcode === '123456789') {
        $zoho.salesiq = $zoho.salesiq || {
        widgetcode:"123456789",
        values:{},ready:function(){}
        };
    }
    if (zoho_meta_widgetcode === '') {
        $zoho.salesiq = $zoho.salesiq || {
        widgetcode:"000000000",
        values:{},ready:function(){}
        };
    }
    var d=document;
    s=d.createElement("script");
    s.type="text/javascript";
    s.id="zsiqscript";
    s.defer=true;
    s.src="https://salesiq.zoho.com/widget?plugin_source=wordpress";
    t=d.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(s,t);
    $zoho.salesiq.ready=function()
    {
        if (zoho_meta_deptcode === 'deptA') {
            $zoho.salesiq.chat.department(["deptA"]); 
        }
        if (zoho_meta_deptcode === '') {
            $zoho.salesiq.chat.department(["Default"]); 
        }
    };
</script>

不需要硬编码所有可能的配置值做判断，直接读取meta标签内容，搭配默认值兜底即可，代码精简且后续新增部门/调整widgetcode不需要修改JS逻辑。

优化后代码 #

<meta name='my_zoho_widgetcode' content='123456789' />
<meta name='my_zoho_deptcode' content='deptA' />

<script id="zsiqchat">
    // 读取meta配置，配置为空/标签不存在时自动使用默认兜底值
    const widgetCodeEl = document.querySelector('meta[name="my_zoho_widgetcode"]');
    const deptCodeEl = document.querySelector('meta[name="my_zoho_deptcode"]');
    // 请将下方两个默认值替换为自己站点的默认配置
    const defaultWidgetCode = '000000000';
    const defaultDept = 'Default';

    const widgetCode = widgetCodeEl?.content?.trim() || defaultWidgetCode;
    const deptCode = deptCodeEl?.content?.trim() || defaultDept;

    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 = "https://salesiq.zoho.com/widget?plugin_source=wordpress";
    t = d.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(s, t);
    
    $zoho.salesiq.ready = function() {
        $zoho.salesiq.chat.department(deptCode); 
    };
</script>

代码说明 #

• 统一读取meta标签配置，通过空值合并逻辑自动fallback到默认值，无需为每个可能的配置值单独写if判断
• 增加了可选链?.兼容，避免meta标签被意外删除/属性为空时JS抛出错误阻断组件加载
• 增加了.trim()处理，避免meta标签content里的多余空格导致配置匹配失败
• 如果需要兼容IE等不支持可选链的老旧浏览器，可将配置读取部分替换为如下写法：

var widgetCode = defaultWidgetCode;
if (widgetCodeEl && widgetCodeEl.content && widgetCodeEl.content.trim()) {
    widgetCode = widgetCodeEl.content.trim();
}
var deptCode = defaultDept;
if (deptCodeEl && deptCodeEl.content && deptCodeEl.content.trim()) {
    deptCode = deptCodeEl.content.trim();
}

最终调整 #

实际调试过程中发现Zoho SalesIQ官方WordPress插件对可修改的代码范围限制较多，调试成本过高，最终选择直接禁用官方插件，通过自研插件插入上述自定义聊天组件代码，完全规避官方插件的限制，逻辑可控性更强。 #

内容的提问来源于stack exchange，提问作者KSechrist