将.NET WebForm迁移至Angular 14时引入Zendesk脚本遇「Key缺失」错误

问题原因 #

原静态引入的脚本带有id="ze-snippet"属性，而你动态创建的脚本未设置该id。Zendesk的snippet.js会依赖这个特定id来识别并校验URL中的密钥参数，缺失id会导致密钥识别失败，触发"Key is missing"错误。

修复方案 #

在动态创建脚本时添加对应的id属性，与原静态脚本保持一致：

ngOnInit(): void 
{
    let chatScript = document.createElement("script");
    chatScript.id = "ze-snippet"; // 必须添加此id，匹配原静态脚本的标识
    chatScript.type = "text/javascript";
    chatScript.async = true;
    chatScript.src = 'https://static.zdassets.com/ekr/snippet.js?key=12345';
    document.body.appendChild(chatScript);
}

额外检查项 #

• 确认URL中的12345是有效的Zendesk密钥，避免因密钥本身错误导致的提示
• 建议在根组件（如AppComponent）的ngOnInit中加载脚本，确保全局仅加载一次，避免重复加载引发异常

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