如何解决自定义Dialogflow Messenger集成聊天小部件的高度
我正在使用Dialogflow的新网站集成“ Dialogflow Messenger”。一切正常,但是当我单击聊天窗口小部件时,聊天窗口的高度超过了浏览器窗口的大小,如附件快照中所示。
我已经阅读了官方的documentation来定制此聊天小部件的CSS,但找不到任何有用的方法来处理此问题。我曾尝试使用不同的浏览器,例如firefox,chrome,safari等。但问题仍然相同。该文档仅提供以下CSS变量,对您的帮助不大。
如果有人可以提供解决方案,我会鼓励。谢谢
解决方法
这对我有用:
$(document).ready(function() {
// YOUR CODE (NOT RELATED TO DIALOGFLOW MESSENGER)
window.addEventListener('dfMessengerLoaded',function (event) {
$r1 = document.querySelector("df-messenger");
$r2 = $r1.shadowRoot.querySelector("df-messenger-chat");
$r3 = $r2.shadowRoot.querySelector("df-messenger-user-input"); //for other mods
var sheet = new CSSStyleSheet;
sheet.replaceSync( `div.chat-wrapper[opened="true"] { height: 400px }`);
$r2.shadowRoot.adoptedStyleSheets = [ sheet ];
// MORE OF YOUR DIALOGFLOW MESSENGER CODE
});
});
您还可以更改其他详细信息,但要小心! Shadow DOM可能很棘手。
,以下解决方案对我有用。 将代码放在索引页的头部
<style>
df-messenger {
margin: 0;
padding: 0;
position: fixed;
right: 0;
transform: translateX(50%) translateY(50%);
bottom: -90px;
}
</style>
,
您可以尝试使用CSS调整显示小部件聊天的容器的高度
使用CSS,您可以定义HTML元素的height,max-height and min-height,例如:
df-messenger {
height: 300px;
max-height: 90%;
min-height: 30%;
}
另外,请嵌入meta tag to allow responsivenes:
<meta name="viewport" content="width-device-width,initial-scale=1">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。