Создавайте интерактивные сайты в таблицах. Каждая строка таблицы содержит в себе путь к ответу, сам ответ, до трех кнопок на следующие варианты, поле для особых свойств, поле для подключения дополнительных функций в ответ и поле для подключения стори-виджета.
Скачать пример
Открыть пример в Гугл Таблицах
Структура таблицы равна структуре конечного диалога и располагает следующим набором столбцов:
branch, question, answer, k1, s1, k2, s2, k3, s3, input, service, output.
Разберем каждый столбец:
branch - ветка диалога. Этот элемент не виден пользователям квика и используется для уникализации варианта ответа.
question - вопрос. Это видимая часть навигации диалога. Вместе с branch они образуют уникальный идентификатор.
answer - содержимое блока. Answer поддерживает основные теги HTML-языка. Если вы не знакомы с базовыми тегами HTML, с помощью которых обозначается жирный текст, рекомендуем изучить, чтобы создавать красивые интерактивы.
k-1, 2, 3 - это видимая часть вопросов. То, что появляется в качестве текста на кнопках.
s-1, 2, 3 - это ветки вопросов, образующие вместе с k-1, 2, 3 уникальные идентификаторы для навигации пользователя по диалогу.
input - используется для особых свойств диалога.
service - вызывает в варианте ответа дополнительный функционал. Например, если добавить в service команду "keyboard", то вызовется форма обратной связи.
output - дополнительное поле, схожее по своим возможностям с полем answer. Введенный в поле output контент появляется в дополнительном блоке (блок слева в десктоп-версии сайта) и блок по клику на аватарке в варианте ответа в мобильной версии сайта.
На скриншоте выше указана логика навигации. В первой строке ветка НАЧАЛО и вопрос ТОЛЬКО НАТУРАЛЬНЫЕ КОМПОНЕНТЫ при клике отправят на соответствующую реплику у которой branch также равен НАЧАЛО а QUESTION равен ТОЛЬКО НАТУРАЛЬНЫЕ КОМПОНЕНТЫ. Для удобства другие связанные варианты размечены цветом. Например, во второй строке зеленый и фиолетовые варианты приведут к соответствующимс зеленым и фиолетовой реплике. А в третьей строке мы видим вариант, отмеченный черным, ведущий к варианту, имеющему соответствующий на скриншоте цвет.
А вот живой пример. То что сделано в таблице и то, что мы видим при загрузке таблицы в интерактив.
Ветки необходимы для уникализации одноименных вопросов. Например, вы можете использовать клавиатуру "Подробнее" сразу в нескольких местах таблицы.
Ссылка на первый вопрос может иметь следующие параметры: s1 = начало k1 = подробнее. и соответственно, ответ запроса будет иметь вид branch = начало, question = подробнее.
Если вы снова хотите использовать конструкцию "Подробнее", или любую другую, что использовалась ранее, обозначьте новую ветку.
Например - s1 = продукт, k2 = подробнее, и ответ запроса branch = продукт, quiestion = подробнее.
В одной итерации диалога вы можете использовать до трех вариантов ответа (k1-3, s1-3), или не использовать ни один из них, есди например, вариант диалог завел на сервисную часть,
где вы не хотите давать пользователю свободы действий.
| branch | question | answer | k1 | s1 | k2 | s2 | k3 | s3 | input | service | output |
|---|---|---|---|---|---|---|---|---|---|---|---|
| начало | начать | Дом в посёлке Чистые Росы (Косулино) за 2,8 млн.руб. В стоимость включён участок земли! Добрый день, представляюсь, Евгения Сапегина, директор компании и эксперт по загородной недвижимости Инвестиционно Строительной компании PRODOM. Я подготовила для вас ознакомительную информацию о нашей профессиональной команде и домах которые мы строим для вас. |
Продолжайте | начало | Свяжитесь со мной | начало | Продолжайте | начало | Как купить дом от А до Я. Все вопросы вы можете задать мне лично или ведущим специалистам нашей компании. | Дома уже готовы? | начало | Свяжитесь со мной | начало | Свяжитесь со мной | начало | Оставьте свой номер телефона. | Вернуться в начало |
Скачать пример
Открыть пример в Гугл Таблицах
Для сборки интерактивов в таблицах рекомендуем использовать бесплатный редактор Google Таблицы, который уже есть у вас в браузере.
После сборки своего интерактива, выберите ФАЙЛ -> СКАЧАТЬ -> CSV ФАЙЛ.
Сохраненный файл загрузите в ваш кабинет.
Мы работаем над тем, чтобы сборка интерактивов с помощью таблиц была максимально простой и комфортной.
Например, чтобы вставить слайдер, или картинку в вариант ответа, вам не обязательно использовать соответствующий HTML-тег, достаточно вставить ссылку на изображение, имеющие формат JPG или PNG. Сервис автоматически преобразует ссылку в изображение, а если ссылок на изображение несколько, то создаст на их основе слайдер.
Собираем интерактив в Гугл Таблицах за 10 минут.