Якорь Top
...
...
Top
...
В этой статье предполагается, что код виджета уже размещен на сайте. Подробнее о том, как это сделать, можно узнать в ЭТОЙ статье.
| CSS Stylesheet |
|---|
.top-button { background-image: url(https://confluence.twin24.ai/download/thumbnails/23986188/baseline_keyboard_arrow_up_white_18dp.png) !important; background-position: center; background-color: #47a7f5 !important; background-repeat: no-repeat; box-shadow: -1px 1.5px 3px #999; color: #47a7f5 !important; border-radius:50px !important; position: fixed; bottom: 45px; left: 93.5%; width: 50px; height: 50px !important; font-size: 12px !important; padding: 14.5px !important; z-index: 2; } .top-button:hover{ background-color: #65b9ff !important; color: #65b9ff !important; } .page-header{ background-color: #232838; background-repeat: no-repeat; background-position: center; width: auto; height: 100px; background-image: url(https://confluence.twin24.ai/download/attachments/23986188/logo_twin-02.png); background-size: 10em; color: #fff; font-size: 20px; padding: 20px; } .page-footer{ background-color: #232838; background-image: url(https://confluence.twin24.ai/download/thumbnails/23986188/decorated-pattern-dark.png); width: auto; height: 10px; color: #fff; text-align: end; font: small-caption; padding-inline-end: 30px; padding-top: 200px; padding-bottom: 30px; } .page-headline{ background-image: url(https://confluence.twin24.ai/download/thumbnails/23986188/Solid256dot8_2changed.png); background-repeat: no-repeat; background-position-x: -227px; background-position-y: center; padding: 20px; background-color: #007bff; width: auto; height: 10px; color: #fff; text-align: center; font: caption; font-weight: 600; } .tabs-menu{ padding-left: 85% !important; } |
| Message Box | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
Ниже содержится информация В этой статье можно узнать о том, как добавить виджет на сайт в виде ссылки или кнопки, а не самого виджета и как открыть его "во весь экран"как скрыть значок виджета на странице, а также как отобразить виджет на весь экран.
Как открыть виджет
...
с помощью кнопки или по ссылке
Для кнопки необходимо Чтобы открыть виджет с помощью кнопки на странице, нужно добавить элемент "button" со значением параметра button с параметром onclick = "TwinClient.open(); return false;".
| Блок кода | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
<button onclick="TwinClient.open(); return false;">Open Chat</button> |
Для ссылки можно Чтобы открыть виджет с помощью ссылки, размещенной на странице, нужно использовать элемент "a" с href='#' onclick="TwinClient.open(); return false;"
| Блок кода | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
<a href='#' onclick="TwinClient.open(); return false;">Open Chat</a> |
Как
...
отобразить виджет на весь экран
Для того чтобы открыть Чтобы отобразить виджет на весь экран, нужно либо в файл стилей , либо или в конец html документа кода страницы страницы добавить следующие стили (пример для html с тегом <style>):
| Блок кода | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
<style> .twin-chat .twc-chat-full-wrapper { width: 100%; height: 100%; bottom: 0; right: 0; z-index: 1000000; } .twin-chat .twc-chat-full-wrapper .twc-chat-full { width: 100%; height: 100%; border-radius: 0; } </style> |
Как
...
скрыть значок виджета
...
на странице
Чтобы скрыть значок Для того чтобы убрать отображение значка виджета в правом нижнем углу экранастраницы, достаточно нужно добавить в следующий код фрагмент кода в стили страницы:
| Блок кода | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
.twin-chat .twc-button-type {
display: none;
} |
...
Как создать кнопку и ссылку для открытия виджета на весь экран
Кнопка и ссылка ниже откроют Чтобы создать кнопку и ссылку, при помощи которых можно открыть виджет на весь экран. , нужно добавить в блок инициализации виджета следующий фрагмент кода:
| HTML |
|---|
<div id="my-chat-container"></div>
<button onclick="TwinClient.open(); return false;">Open Chat</button>
<p><a href='#' onclick="TwinClient.open(); return false;">Open Chat</a></p>
<script>(function () {
const script = document.createElement("script");
script.async = true;
script.src = "https://tcl.twin24.ai/widget/v3/manual.umd.min.js";
document.head.appendChild(script);
script.onload = () => {
TChat.init("#my-chat-container", {
chatId: "f7e81be08eb533e5-767b9c91-444548ae-a13abb38-cae28473843fb02e359033b4"
}).then((client) => (window.TChatClient = client));
};
})();
</script>
<style>.twin-chat .twc-chat-full-wrapper {
width: 100%;
height: 100%;
bottom: 0;
right: 0;
z-index: 1000000;
}
.twin-chat .twc-chat-full-wrapper .twc-chat-full {
width: 100%;
height: 100%;
border-radius: 0;
}
.twin-chat .twc-button-type {
display: none;
}
</style>
</body> |
Button Hyperlink custom-icon top-button id top-button title . type standard class top-button url #Top