Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

Якорь
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
iconnone
titleНа этой странице:
typegeneric

Оглавление

Ниже содержится информация В этой статье можно узнать о том, как добавить виджет на сайт в виде ссылки или кнопки, как скрыть значок виджета на странице, а не самого виджета и как открыть его "во также как отобразить виджет на весь экран"

Как открыть виджет

...

с помощью кнопки или по ссылке

Для кнопки необходимо Чтобы открыть виджет с помощью кнопки на странице, нужно добавить элемент "button" со значением параметра button с параметром onclick = "TwinClient.open(); return false;".

Блок кода
languagexmlpy
themeDJango
firstline1
titleКнопкаПример кода кнопки для открытия виджета
linenumberstrue
collapsetrue
<button onclick="TwinClient.open(); return false;">Open Chat</button>

Для ссылки можно Чтобы открыть виджет с помощью ссылки, размещенной на странице, нужно использовать элемент "a" с href='#' onclick="TwinClient.open(); return false;"

Блок кода
languagexmlpy
themeDJango
firstline1
titleСсылкаПример кода ссылки для открытия виджета
linenumberstrue
collapsetrue
<a href='#' onclick="TwinClient.open(); return false;">Open Chat</a>

Как

...

отобразить виджет на весь экран

Для того чтобы открыть Чтобы отобразить виджет на весь экран, нужно либо в файл стилей , либо или в конец html документа кода страницы страницы добавить следующие стили (пример для html с тегом <style>):

Блок кода
languagecsspy
themeDJango
firstline1
titleНА ВЕСЬ ЭКРАНПример кода для отображения виджета на весь экран
linenumberstrue
collapsetrue
<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>

Как

...

скрыть значок виджета

...

на странице

Чтобы скрыть значок Для того чтобы убрать отображение значка виджета в правом нижнем углу экранастраницы, достаточно нужно добавить в следующий код фрагмент кода в стили страницы:

Блок кода
languagecsspy
themeDJango
firstline1
titleСКРЫТЬ ВИДЖЕТПример кода для скрытия значка виджета
linenumberstrue
collapsetrue
.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-icontop-button
idtop-button
title.
typestandard
classtop-button
url#Top