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

Ключ

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

Якорь
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

...

Давайте в качестве примера использовать следующие значения:

  • Имя клиента – Иван Петров
  • Адрес электронной почты – client@mail.ru
  • Номер телефона – 79111234567
  • Название диалога при переводе в личный кабинет оператора – черная пятница

...

Блок кода
languagejs
linenumberstrue
 		  sessionDefaults: {
                name: 'Черная пятница',
                clientEmail: 'client@mail.ru',
                clientPhone: '79111234567',
                clientName: 'Иван Петров',
                clientExternalId: 'Mzk3NQ==',
            },

Image AddedImage Removed

Раскрыть
titleПолный фрагмент кода инициализации виджета


Блок кода
languagejs
linenumberstrue
<!DOCTYPE html>
<html>
<body>
<div id="twin-chat-container"></div> 
<script> 
  (function () { 
    const script = document.createElement('script'); 
    script.async = true; 
    script.src = 'https://modern-v3.twin24.ai/manual.umd.min.js'; 
    document.head.appendChild(script); 
    script.onload = () => { 
      TwinChat.init('#twin-chat-container', { 
        chatId: 'febb3685-2cbc-4815-ba13-96199f9b8beb',
		  sessionDefaults: {
                name: 'Черная пятница',
                clientEmail: 'client@mail.ru',
                clientPhone: '79111234567',
                clientName: 'Иван Петров',
                clientExternalId: 'Mzk3NQ==',
            },
      }).then(client => window.TwinClient = client); 
    }; 
  })(); 
</script>

</body>
</html>


...

Предупреждение

При работе с предустановленными переменными в блоке sessionDefaults необходимо помнить следующее:

  • Можно изменять значения существующих переменных
  • Нельзя изменять имена предустановленных переменных
  • Можнообъявлять новые переменные

Например, вместо clientName: 'Иван Петров' можно написать clientName: 'Иванов Сергей' или clientName: 'Наталья', но нельзя изменить имя переменной, написав, например, clientName2: 'Иванов Сергей' или natalya: 'Наталья'.

...

Добавьте названия переменных в соответствующие блоки текст соответствующих блоков Вопрос скрипта. Помните о том, что названия переменных необходимо указывать в фигурных скобках.

Подсказка

Переменные также можно использовать в тексте блока Информация.

Ниже приводятся примеры добавления имен переменных в скрипт и отображение их значений в диалоге:

  • Вместо имени переменной clientName в диалоге используется ее значение: имя клиента.

 Image Added

Image Removed 

  • Вместо имен переменных clientPhone и clientEmail в диалоге используются их значения: номер телефона и адрес электронной почты клиента.

Image Added

Image Removed

Image Added

Image Removed

Якорь
variables2
variables2

...

Примечание

Добавьте имена переменных в соответствующие блоки Вопрос в сценарии. Имена переменных нужно указывать в фигурных скобках.

Ниже приводятся примеры. Вместо имен переменных orderNumber, address и finalDate в диалогах используются их значения: номер заказа, адрес пункта выдачи и конечная дата резерва. При вводе имен переменных в блоке скрипта нужно указывать имя объекта clientMetadata ({clientMetadata.orderNumber}, {clientMetadata.address}, {clientMetadata.finalDate}).

  Image Added

Image Removed



Якорь
variables3
variables3

...