用于消息传递的 Zendesk Web Widget 在消息编辑器底部包含一个“Built by Zendesk”徽标。这与我的网络应用程序的品牌不一致。如何在无需升级到企业级计划的情况下摆脱这个问题?
Zendesk Web Widget 在 iframe 内部呈现,您可以通过注入一些 CSS 来隐藏 Zendesk 品牌。以下是一些代码,您可以将其包含在网页中的
<script>
标记内,就在您粘贴安装代码片段的位置下方。
代码监听小部件打开事件,并在那时注入必要的CSS。请注意,品牌元素没有可预测的 id,因此我们必须使用复杂的 css 选择器才能找到它:
[role|="presentation"]>[role|="presentation"]>:last-child:has(svg):has(a)
。此选择器查找主小部件 div 的最后一个直接子元素,确保它同时包含 svg
和 a
标签作为子元素。如果 Zendesk 要更改小部件 UI 的结构,此选择器可能会损坏并需要更新。
(() => {
let styleInjected = false;
zE("messenger:on", "open", function () {
if (!styleInjected) {
getIframe((iframe) => hideLogo(iframe))
}
})
let tries = 0;
function getIframe(cb) {
const iframe = document.querySelector('[title="Messaging window"]');
if (iframe) {
return hideLogo(iframe.contentDocument);
}
// messenger:on is sometimes invoked before the iframe is rendered
// check again every 100ms, max of 50 tries
if (tries < 50) {
tries++;
setTimeout(() => getIframe(cb), 100)
}
}
function hideLogo(iframeDoc) {
const style = iframeDoc.createElement('style');
style.type = 'text/css';
style.appendChild(iframeDoc.createTextNode('[role|="presentation"]>[role|="presentation"]>:last-child:has(svg):has(a) { display: none; }'));
iframeDoc.head.appendChild(style);
styleInjected = true;
}
})()