如何更改google Dialogflow Messenger的样式
如何更改google Dialogflow Messenger的样式
提问于 2020-04-16 17:57:33
我正在尝试在google Dialogflow Messenger上做一些自定义样式，但由于#shadow-root下面是我可以更改的几个值的列表，所以无法做到这一点，但我需要更多的样式。
--df-messenger-bot-message: #fff;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: #000;
--df-messenger-send-icon: #00adff;
--df-messenger-user-message: #0041C2;
--df-messenger-chip-border-color:#0041C2;
<div class="container">
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger intent="WELCOME" chat-title="test" agent-id="" language-code="en" chat-icon="vest.jpg">
<style>
.container {
background-image: url("img.png");
background-repeat: no-repeat;
min-height: 940px;
height: 100%;
margin: 10px 30px;
}
df-messenger {
--df-messenger-bot-message: #fff;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: #000;
--df-messenger-send-icon: #00adff;
--df-messenger-user-message: #0041C2;
--df-messenger-chip-border-color:#0041C2;
}
</style>
</df-messenger>
</div>回答 3
Stack Overflow用户
发布于 2021-07-30 09:04:35
您可以将脚本文件下载到本地并使用，转到第一个链接并下载脚本，您可以看到此脚本导入了另一个脚本它们的链接也提供了全部下载并将其保留在本地
https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1
https://www.gstatic.com/dialogflow-console/fast/messenger/messenger-internal.min.js?v=4
如果您转到第二个链接，您可以看到给定所有样式的位置有点拥挤，但如果您确实需要进行更多更改，那么可以在此脚本中进行更改
Stack Overflow用户
发布于 2020-05-27 21:27:38
Just try placing style tag in your HTML head. This is something working for me.
<html>
<head>
<title>Student helpdesk - Demo</title>
<meta name="viewport" content="width-device-width, initial-scale=1">
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #df9b56;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
</head>
<body>
...Stack Overflow用户
发布于 2021-07-28 01:20:38
下面的解决方案对我很有效。你也可以定制你的机器人。将代码放在索引页面的head标签中
<style>
df-messenger {
margin: 0;
padding: 0;
position: fixed;
right: 0;
transform: translateX(50%) translateY(50%);
bottom: -90px;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61247463
复制相关文章
相似问题
腾讯云开发者
