Заголовок и кнопка в окне чата

Ejara · July 15

Добрый день, есть кнопка на странице по нажатию на которую открывается окно чата.

Когда добавляю хедер, он отображается не в окне чата, а на главной странице. Помогите заставить его появиться в окне чата.

Цитата

<!DOCTYPE html>
<html>

<head>
<title>Бот-оператор</title>

<style>
html,
body {
height: 100%;
}

body {
margin: 0;
}

h1 {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 20px;
}

/*
#heading {
background-color: gray;
height: 50px;
}
*/
.main {
margin: 18px;
border-radius: 4px;
}

div[rol="form"] {
background-color: white;
}

#webchat {
position: fixed;
height: calc(100% - 100px);
width: 40%;
right: 65px;
top: 50px;
overflow: hidden;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px 0 #a8b8dda8;
border-radius: 5px;
}

/*@media only screen and (max-width : 600px) {
#webchat {
width: 98%;
}
*/
}

/*
.open-chat {
position: fixed;
right: 50px;
bottom: 50px;
height: 80px;
width: 80px;
border-radius: 50px;
font-size: 13px;
text-align: center;
border: 0 solid;
}
*/
</style>

</head>

<body>


<div class="small_top_panel open-chat" style="
background-color: rgb(26, 83, 198);
height: 64px;
width: 60px;
transition: all 200ms ease-out 0s;
position: fixed;
box-shadow: rgba(6, 25, 56, 0.25) 0px 25px 50px -12px;
bottom: 20px;
right: 0px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
cursor: pointer;
z-index: 2147483645;
">

<div style="
max-width: 40px;
min-width: 40px;
min-height: 40px;
max-height: 40px;
margin: 10px;
">
<img src="https://files.salebot.pro/uploads/online_chat/icon_file/490/png-transparent-call-centre-help-desk-customer-service-computer-icons-services-telephone-call-service-people.png" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover" />

</div>
</div>

<div id="rt-chat" style="display: none">
<div id="heading">


</div>
<div id="webchat" role="main"></div>
</div>

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
const styleOptions = {
// Add styleOptions to customize Web Chat canvas
hideUploadButton: true,
bubbleBackground: "#F0F8FF", //фон сообщений бота
bubbleFromUserBackground: "#F5F5DC", //фон сообщений пользователя
bubbleBorderRadius: 15,
bubbleFromUserBorderRadius: 15,
botAvatarInitials: 'КЦ',
//accent: '#00809d',
botAvatarBackgroundColor: "#FFFFFF", //фон иконки бота
botAvatarImage: 'https://yoli.co.il/wp-content/uploads/2019/03/boticon.png', //иконка бота
userAvatarInitials: 'Я',
userAvatarBackgroundColor: "#FFFFFF",
userAvatarImage: 'https://findicons.com/files/icons/977/rrze/48/user_other.png', //иконка пользователя
//sendBoxBorderTop: 10,
//поле отправки
sendBoxBackground: 'White',
sendBoxButtonColor: undefined, // defaults to subtle
sendBoxButtonColorOnDisabled: '#CCC',
sendBoxButtonColorOnFocus: '#333',
sendBoxButtonColorOnHover: '#333',
sendBoxDisabledTextColor: undefined, // defaults to subtle
sendBoxHeight: 40,
sendBoxMaxHeight: 200,
sendBoxTextColor: 'Black',
sendBoxBorderBottom: '',
sendBoxBorderLeft: '',
sendBoxBorderRight: '',
sendBoxBorderTop: 'solid 1px #000000',
sendBoxPlaceholderColor: undefined, // defaults to subtle
sendBoxTextWrap: false,
//кнопки действий
suggestedActionBackground: 'Beige',
suggestedActionBorder: undefined, // split into 3, null
suggestedActionBorderColor: undefined, // defaults to accent
suggestedActionBorderStyle: 'dashed',
suggestedActionBoarderWidth: 3,
suggestedActionBorderRadius: 10,
suggestedActionImageHeight: 20,
suggestedActionTextColor: null,
suggestedActionDisabledBackground: undefined, // defaults to suggestedActionBackground
suggestedActionDisabledBorder: null,
suggestedActionDisabledBorderColor: '#E6E6E6',
suggestedActionDisabledBorderStyle: 'solid',
suggestedActionDisabledBorderWidth: 2,
suggestedActionDisabledTextColor: undefined, // defaults to subtle
suggestedActionHeight: 40,
paddingWide: 5
};
// Add your BOT ID below
var BOT_ID = "BotID";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
const store = window.WebChat.createStore({},
({
dispatch
}) => next => action => {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
//Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
name: 'startConversation',
type: "event"
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
);
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
store: store,
styleOptions: styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>

<script>
let chatIsOpen = false // чат открыт ?
let button = document.querySelector(".open-chat") // по клику на какой элемент показывать чат
let chat = document.getElementById("rt-chat") // ID чата
button.addEventListener("click", () => {
if (!chatIsOpen) {
// показать чат
chat.style.display = "block"
chatIsOpen = true
} else {
// скрыть чат
chat.style.display = "none"
chatIsOpen = false
}
})
</script>

</body>

</html>

Sign In

Заголовок и кнопка в окне чата

Question

Ejara

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information