Примечание | ||
---|---|---|
| ||
В этой статье предполагается, что код виджета уже размещен на сайте. Подробнее о том, как это сделать, можно узнать в ЭТОЙ статье. |
В этой статье можно узнать о том, как добавить виджет на сайт в виде ссылки или кнопки, а не самого виджета и как открыть его "во весь экран".
Как открыть виджет через кнопку или по ссылке
Для кнопки необходимо добавить элемент button со значением параметра onclick = "TwinClient.open(); return false;"
Блок кода | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<button onclick="TwinClient.open(); return false;">Open Chat</button> |
Для ссылки
HTML |
---|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Виджет</title> </head> <body> <div id="my-chat-container"></div> <button onclick="TwinClient.open(); return false;">Open Chat</button> <p></p> <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: "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> </html> |
...