Создание интерактивов с помощью таблиц

Создавайте интерактивные сайты в таблицах. Каждая строка таблицы содержит в себе путь к ответу, сам ответ, до трех кнопок на следующие варианты, поле для особых свойств, поле для подключения дополнительных функций в ответ и поле для подключения стори-виджета.

Скачать пример

Открыть пример в Гугл Таблицах

Наименования столбцов и логика таблицы

Структура таблицы равна структуре конечного диалога и располагает следующим набором столбцов: 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 минут.