How is it working now?
I do not fully understand how these files are connected to my project: assuming that you are using iframe implementation, it means that you are using the compiled version of the source code you found.
If you have a look to the iframe content (doing a GET on the URL), it looks like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MyBotId</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<link href="/css/adaptive/botchat.css" rel="stylesheet" />
<link href="/css/adaptive/botchat-fullwindow.css" rel="stylesheet" />
</head>
<body>
<div id="BotChatElement"></div>
<script src="/scripts/adaptive/botchat.js"></script>
<script>
var model = {
"userId": "demo1234",
"userName": "You",
"botId": "MyBotId",
"botIconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
"botName": "MyBotId",
"secret": "mySecret",
"iconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
"directLineUrl": "https://webchat.botframework.com/v3/directline",
"webSocketEnabled": "false"
};
</script>
<script>
BotChat.App({
directLine: {
secret: model.secret,
token: model.token,
domain: model.directLineUrl,
webSocket: false
},
user: { id: model.userId, name: model.userName },
bot: { id: model.botId, name: model.botName },
resize: 'window'
}, document.getElementById("BotChatElement"));
</script>
</body>
</html>
So as you can see, it is referencing a css file, the one compiled by the GitHub project.
How to add your custom css?
On your side, you can edit this css, edit it, and use the same implementation as above but replace the css link to yours.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
