...
Ниже содержится информация о том, как добавить виджет на сайт в виде ссылки или кнопки, как скрыть значок виджета на странице, а также как открыть отобразить виджет на весь экран.
Как открыть виджет с помощью кнопки или по ссылке
Чтобы открыть виджет с помощью кнопки на странице, нужно добавить элемент "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 с тегом <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> |
...
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: "8eb533e5-9c91-48ae-bb38-b02e359033b4" }).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