如何更改Google Dialogflow Messenger的样式 [英] How to change styling of google Dialogflow Messenger
本文介绍了如何更改Google Dialogflow Messenger的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在Google Dialogflow Messenger上进行一些自定义样式，但由于#shadow-root而无法做到这一点 以下是一些我可以更改的值的列表，但我需要对其进行更多样式设置.
i am trying to do some custom styling on google Dialogflow Messenger but not able to do that due to #shadow-root Below are the list of few value i can change but i need to style it more.
--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>
推荐答案
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>
...
这篇关于如何更改Google Dialogflow Messenger的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
