如何在消息传递 Web Widget 中隐藏“Built with Zendesk”徽标？

Question

用于消息传递的 Zendesk Web Widget 在消息编辑器底部包含一个“Built by Zendesk”徽标。这与我的网络应用程序的品牌不一致。如何在无需升级到企业级计划的情况下摆脱这个问题？

Answer 1

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;
  }
})()