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 |
---|
icon | none |
---|
title | На этой странице: |
---|
type | generic |
---|
|
|
Ниже содержится информация о том, как добавить виджет на сайт в виде ссылки или кнопки, как скрыть значок виджета на странице, а также как отобразить виджет на весь экран.
Как открыть виджет с помощью кнопки или по ссылке
Чтобы открыть виджет с помощью кнопки на странице, нужно добавить элемент button с параметром onclick = "TwinClient.open(); return false;".
Блок кода |
---|
language | py |
---|
theme | DJango |
---|
firstline | 1 |
---|
title | Пример кода кнопки для открытия виджета |
---|
linenumbers | true |
---|
collapse | true |
---|
|
<button onclick="TwinClient.open(); return false;">Open Chat</button> |
Чтобы открыть виджет с помощью ссылки, размещенной на странице, нужно использовать элемент a с href='#' onclick="TwinClient.open(); return false;"
Блок кода |
---|
language | py |
---|
theme | DJango |
---|
firstline | 1 |
---|
title | Пример кода ссылки для открытия виджета |
---|
linenumbers | true |
---|
collapse | true |
---|
|
<a href='#' onclick="TwinClient.open(); return false;">Open Chat</a> |
Как отобразить виджет на весь экран
Чтобы отобразить виджет на весь экран, нужно в файл стилей или в конец кода страницы страницы добавить следующие стили (пример для html с тегом <style>):
Блок кода |
---|
language | py |
---|
theme | DJango |
---|
firstline | 1 |
---|
title | Пример кода для отображения виджета на весь экран |
---|
linenumbers | true |
---|
collapse | true |
---|
|
<style>
|
HTML |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Виджет</title>
<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 | py |
---|
theme | DJango |
---|
firstline | 1 |
---|
title | Пример кода для скрытия значка виджета |
---|
linenumbers | true |
---|
collapse | true |
---|
|
.twin-chat .twc-button-type {
display: none;
} */</style>
</head>
<body>
<div |
Как создать кнопку и ссылку для открытия виджета на весь экран
Чтобы создать кнопку и ссылку, при помощи которых можно открыть виджет на весь экран, нужно добавить в блок инициализации виджета следующий фрагмент кода:
HTML |
---|
<div id="my-chat-container"></div>
<button onclick="TwinClient.open(); return false;">Open Chat</button>
<a <p><a href='#' onclick="TwinClient.open(); return false;">Open Chat</a></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;
</body>
</html> }
.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 |
---|
|