| Примечание |
|---|
|
В этой статье предполагается, что код виджета уже размещен на сайте. Подробнее о том, как это сделать, можно узнать в ЭТОЙ статье. |
В этой статье можно узнать о том, как добавить виджет на сайт в виде ссылки или кнопки, а не самого виджета и как открыть его "во весь экран".
Как открыть виджет через кнопку или по ссылке
Для кнопки необходимо добавить элемент "button" со значением параметра onclick = "TwinClient.open(); return false;"
| Блок кода |
|---|
| language | xml |
|---|
| theme | DJango |
|---|
| firstline | 1 |
|---|
| title | Кнопка |
|---|
| linenumbers | true |
|---|
|
<button onclick="TwinClient.open(); return false;">Open Chat</button> |
Для ссылки можно использовать элемент "a" с href='#' onclick="TwinClient.open(); return false;"
| Блок кода |
|---|
| language | xml |
|---|
| theme | DJango |
|---|
| firstline | 1 |
|---|
| title | Ссылка |
|---|
| linenumbers | true |
|---|
|
<a href='#' onclick="TwinClient.open(); return false;">Open Chat</a> |
Как открыть виджет на весь экран
Для того чтобы открыть виджет на весь экран, нужно либо в файл стилей, либо в конец html документа страницы добавить следующие стили (пример для html с тегом <style>):
| Блок кода |
|---|
| language | css |
|---|
| theme | DJango |
|---|
| firstline | 1 |
|---|
| title | НА ВЕСЬ ЭКРАН |
|---|
| linenumbers | true |
|---|
|
<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> |
Как убрать отображение виджета
Для того чтобы убрать отображение значка виджета в углу экрана, достаточно добавить в следующий код в стили страницы:
| Блок кода |
|---|
| language | css |
|---|
| theme | DJango |
|---|
| firstline | 1 |
|---|
| title | СКРЫТЬ ВИДЖЕТ |
|---|
| linenumbers | true |
|---|
|
.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: "f7e81be0-767b-4445-a13a-cae28473843f"
}).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> |