Как вставить api в тильду

Импорт из Figma

Макет необходимо создавать на фрейме с шириной в 1200 px.

Импортировать макет лучше блоками, а не добавлять весь макет в один блок.

Любую группу можно импортировать картинкой, для этого в названии нужно указать image. Если указать svg, то будет svg формат.

Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня

Для импорта кнопки необходимо объединить шейп и текст в группу и добавить в название button, учитывается выравнивание текста, так что текст лучше делать шириной как шейп

Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.

Источник

Опыт интеграции с Tilda

По работе, наконец-то, моя сфера была четко определена и меня перекинули на внешние интеграции. И так уж получилось что мне досталась недоработанная версия интеграции с Tilda, но не напрямую, а через amoCRM (ранее, мы рассматривали опыт разработки дополнений для amoCRM).

Предыстория

Один из наших клиентов интегрировался с amoCRM, поэтому было решено разработать интеграция с этим продуктом, но как оказалось, в amoCRM не передается информация о статусе оплаты заказа, что было критично в нашем случае.

Интеграция по WebHook

2 недели) клиенты организовали скидки по промокодам, которые распространяются на весь заказ, и как выяснилось:

Этот прикол мы разруливали (юридические консультации, возврат заказов, пересчет цен позиций заказов, создание чеков прихода)

3 дня вперемешку с текущими задачами.

И под конец один из клиентов написал js скрипт индивидуальной скидки, это привело к тому, что цены позиций заказа и общая сумма заказа не совпадали. Клиент был предупрежден о невозможности поддержки не стандартизированных (сервисом Tilda или нами) фич и убрал сиё творение.

Разработка API для Tilda

Первым делом необходимо пройти авторизацию.

Авторизация

Идем по адресу /login/ и видим что исходящий запрос в заголовках отправляет куки вида:

При детальном поиске обнаруживаем что tildasid и tildauid используют одну и ту же функцию генерации generateUniqID :

Теперь повторяем примерно такое же на php :

А кука previousUrl у нас всегда имеет одно и тоже значение при авторизации.

Теперь пробуем авторизироваться через web-интерфейс и смотрим запросы.

При отсутсвии необходимости ввода капчи запрос авторизации отправляет следующие post данные:

Чтобы определить необходимость решения капчи нужно в коде страницы /login/ найти window.needcaptcha так:

А ключ window.keycaptcha для ReCaptcha находим так:

Теперь имея ключ капчи идем на сервис решения капчи rucaptcha.com, создаем акк, оплачиваем пару сотен рублей, и вызывая несколько API запросов этого сервиса получаем ключ решения капчи.

Имея ключ решения капчи пробуем авторизироваться добавив к post данным ключ g-recaptcha-response :

Получение заявок

Здесь уже намного проще. Заходим на страницу заявок проекта и смотрим запросы:

У последних двух запросов адреса и ответы немного соответствуют друг другу.

Смотря на опыт нескольких подключенных клиентов, на Tilda можно сделать прибыльный интернет-магазин, но назвать это полноценным интернет-магазином, сложно, это больше похоже на прототип.

В целом, интеграция с Tilda заняла около 2-х дней и оставила положиельные впечатления, как от программной работы, так и от работы с самим сервисом.

Источник

Настройка Tilda

Давайте пройдем весь этап настройки Tilda вместе!

Для того, чтобы начать настройку новой связи кликните «Создать связь»

Выберите систему в качестве Источника данных. В данном случае, необходимо указать Tilda.

Далее, необходимо указать действие, например, «Получить данные из форм».

Если нет подключенных логинов к системе кликните «Подключить аккаунт».

Укажите название Вашего аккаунта (если необходимо) и кликните «Сохранить».

После этого произойдет перезагрузка страницы с сохраненный аккаунт автоматически будет выбран.

Если этого не произошло, выберите созданный аккаунт в списке.

Скопируйте ссылку в поле «URL для приема данных» и перейдите в Ваш личный кабинет Tilda.

Перейдите к редактированию сайта.

Кликните «Настройки сайта».

Слева в меню кликните «Формы».

Пролистайте страницу вниз до раздела «Webhook» и перейдите к нему.

В поле «Webhook URL» вставьте ссылку, которую Вы ранее скопировали в системе ApiX-Drive.

Добавьте эти настройки для всех форм сайта, если это необходимо.

Опубликуйте изменения на все страницы сайта и перейдите к одной из форм.

Заполните тестовые данные в форму, по которой была подключена передача данных в ApiX-Drive и кликните «Отправить».

Теперь можно вернуться в систему ApiX-Drive для продолжения настройки.

Обратите внимание! Появилась новая функция «Фильтрация данных».

Если необходимо, Вы можете настроить Фильтр данных, либо кликнуть «Продолжить», чтобы пропустить этот шаг.

Для того, чтобы узнать как настраивается Фильтр данных перейдите по ссылке: https://apix-drive.com/ru/blog/filtr-dannyh

Теперь Вы можете увидеть тестовые данные.

Обратите внимание! После настройки, в нашей системе сразу не будет тестовых данных и списка полей, т.к. на новый URL еще ничего не пришло.

Нужно, обязательно совершить событие, например, заполнить форму на Вашем сайте или сделать тестовый заказ.

После этого, на этапе Проверить в Источнике данных отобразятся поля с данными.

Если этого не произошло, нажмите Загрузить тестовые данные из Tilda или повторите генерацию тестовых данных, или подождите некоторое время, данные приходят не сразу, а в течении 1 минуты.

Вы можете использовать полученные поля из Tilda по товару обычные или множественные. Если использоваться поля payment_products_0, payment_products_1, payment_products_2 и т.д., то в системе приема их нужно назначать в обычные текстовые поля. Если в системе Приема у вас есть множественное поле по товарам, то в него назначать нужно поля Payment-Produts: name, quantity, amount, price.

На этом вся настройка источника данных завершена! Видите как все просто!?

Теперь можете приступить к настройке системы приема данных.

Для этого проведите настройку самостоятельно или перейдите в раздел справки «Настройка сервисов», найдите необходимый Вам сервис в качестве приема данных и следуйте рекомендациям по настройке.

Источник

Интеграция с Tilda (Тильда)

Подключение за 5 минут, 14 дней на тесты, попробуйте.

События

Нажмите на название события, чтобы посмотреть доступные поля.

Документация по api — здесь.

1. Заявка с формы

Описание

Доступные поля

+ можно добавить свои поля, которые есть в вебхуке.

2. Платеж

Описание

Доступные поля

+ можно добавить свои поля, которые есть в вебхуке.

Действия

Нажмите на название действия, чтобы посмотреть доступные поля.

Документация по api — нет.

Посмотрите видео типовой настройки