如何隐藏可打印版本的 TidioChat 侧边栏？

Question

上下文

我有一个包含食物食谱的网站，其中包含由专用 CSS 设置样式的可打印视图。

<link rel="stylesheet" href="css/front/print-recipe.css" media="print">

show-recipe 视图还加载了一个 TidioChat 支持小部件，用于加载用户支持。

问题

加载可打印版本时，页面预览会加载包含聊天小部件的可打印布局，该小部件涵盖页面的部分内容（实际配方说明）。

尝试过的方法

• 我尝试过使用 javascript 以编程方式禁用小部件，但是这种方法变得非常棘手，需要在打印预览后重新启用它。我认为这有点肮脏，无论如何我都无法让它按预期工作。

• 我还尝试将自定义覆盖样式 (display:none) 添加到类 .sidebar-content。没有运气，仍在显示。 Screenshot

• 我还联系了 TidioChat 支持。他们的回答是没什么可做的：我已经和我们团队的开发人员谈过了，恐怕我们目前无能为力。这是因为页面的可打印版本主要取决于您使用的浏览器，而我们无法控制。对此我感到非常抱歉。但是，我相信必须有一种方法可以覆盖默认 CSS 并让它对 print 媒体隐藏。

额外信息

• 我已经使用 Google Chrome 和 Firefox 进行了这些试验，两者在侧边栏聊天小部件方面都有类似的行为。

链接到实际页面

这里是example real link with the actual problem。

---

感谢您提供任何可能的帮助/提示。我将根据需要更新此问题帖子，并使用所需的任何缺失信息。

Answer 1

.sidebar-content 位于 Tidio iframe 内，因此由于 same-origin 政策，您无法对其进行任何样式更改。

但是，您可以通过将以下内容添加到 print-recipe.css 来隐藏包含的 <div id="tidio-chat">，从而隐藏整个 Tidio iframe：

#tidio-chat {
    display: none;
}