如何隐藏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策略，您无法对其进行任何样式更改。

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

#tidio-chat {
    display: none;
}