diff --git a/docs/forms/signup-forms.md b/docs/forms/signup-forms.md index a0dc528e..feead2c4 100644 --- a/docs/forms/signup-forms.md +++ b/docs/forms/signup-forms.md @@ -82,3 +82,10 @@ import formTypes from "/img/forms/signup-forms/form-types.png"; - `https://sendsay.ru` ::: + +У сайтов на Tilda есть собственный конструктор для создания форм. Чтобы получать и использовать данные из таких форм, их нужно связать с Sendsay. + +[Как связать форму Sendsay с формой Tilda](https://docs.sendsay.ru/integrations/integration-with-tilda#как-связать-форму-sendsay-с-формой-tilda) + +**Читайте также:**
+[Интеграция с Tilda](https://docs.sendsay.ru/integrations/integration-with-tilda) diff --git a/docs/integrations/integration-with-tilda.mdx b/docs/integrations/integration-with-tilda.mdx index 0c309549..6ec12211 100644 --- a/docs/integrations/integration-with-tilda.mdx +++ b/docs/integrations/integration-with-tilda.mdx @@ -4,19 +4,25 @@ sidebar_position: 2 import tildaLink from '/img/integrations/integration-with-tilda/tilda-link.png'; import howToPublushTildaForm from '/img/integrations/integration-with-tilda/how-to-publish-tilda-form.png'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; # Интеграция с Tilda -В Sendsay можно настроить автоматический импорт данных, которые посетители сайтов на Tilda оставляют в формах. Это можно сделать в шесть шагов: +У сайтов на Tilda есть собственный конструктор для создания форм сбора подписчиков. Данные из таких форм можно автоматически импортировать в Sendsay, сохранять в анкетах и использовать в работе с рассылками. -## 1. Создайте интеграцию в Sendsay +## Как настроить автоматический импорт данных + +В Sendsay можно настроить автоматический импорт данных, которые посетители сайтов на Tilda оставляют в формах. Это можно сделать в пять шагов: + +### 1. Создайте интеграцию в Sendsay 1. Перейдите в предыдущий интерфейс [по ссылке](https://sendsay.ru/account/#dashboard), либо откройте меню аккаунта в правом верхнем углу и выберите пункт **Предыдущий интерфейс**. 2. Откройте раздел **Подписчики → Интеграции** и выберите пункт **Tilda**. ![How to create integration with Tilda](/img/integrations/integration-with-tilda/how-to-create-integration-with-tilda.gif)
-## 2. Выберите настройки интеграции и получите ссылку +### 2. Выберите настройки интеграции и получите ссылку У интеграции всего три настройки: @@ -32,7 +38,7 @@ import howToPublushTildaForm from '/img/integrations/integration-with-tilda/how- Tilda link

-## 3. Вставьте ссылку в настройках формы +### 3. Вставьте ссылку в настройках формы 1. Войдите в аккаунт на Tilda и откройте сайт, откуда вы хотите импортировать подписчиков. 2. Откройте настройки сайта и перейдите в раздел «Формы». В блоке «Другое» выберите пункт Webhook. @@ -46,7 +52,7 @@ import howToPublushTildaForm from '/img/integrations/integration-with-tilda/how- ![Connect Sendsay link to Tilda](/img/integrations\integration-with-tilda/connect-sendsay-link-to-tilda.gif)
-## 4. Настройте название формы +### 4. Настройте название формы Откройте настройки блока с формой — название указывается под шириной и отступом. В названиях полей и формы можно использовать любые символы. @@ -62,7 +68,7 @@ import howToPublushTildaForm from '/img/integrations/integration-with-tilda/how- How to publish Tilda form

-## 5. Протестируйте, всё ли работает +### 5. Протестируйте, всё ли работает Заполните форму на сайте и нажмите «Отправить». Затем в Sendsay откройте список, куда добавляются контакты из формы — там должен появиться ваш адрес. @@ -73,4 +79,113 @@ import howToPublushTildaForm from '/img/integrations/integration-with-tilda/how- ![How to test Tilda integration](/img/integrations\integration-with-tilda/how-to-test-tilda-integration.gif)
-**Читайте также:** [Как использовать данные из Tilda в рассылках и сегментах](https://docs.sendsay.ru/email-campaigns/personalization/how-to-use-tilda-data-in-campaigns) +## Как связать форму Sendsay с формой Tilda + +Одну или несколько форм Tilda можно связать с формой Sendsay. Это полезно, если вы хотите: + +- использовать заполнение формы как событие в [сценариях](https://docs.sendsay.ru/automations/automation-with-workflows/workflow-creation) или триггерах, +- собирать данные из нескольких форм в одну [анкету](https://docs.sendsay.ru/subscribers/subscriber-data/data-groups), +- подтверждать подписчиков и их данные, отправляя письма подтверждения, +- отслеживать статистику заполнения форм. + +Связать формы можно за 4 шага: + +### 1. Создайте форму на Tilda + +Войдите в аккаунт на Tilda и откройте сайт, на котором будет находиться форма. Создайте блок с формой. + +![How to make a tilda form](/img/integrations/integration-with-tilda/how-to-make-a-tilda-form.gif) + +Перейдите в настройки формы и задайте название. Рекомендуем использовать латинские символы, цифры, точки, минусы и знаки подчёркивания. Пробелы, знаки препинания и другие нераспознанные символы система заменит на знаки подчёркивания. + +![How to create tilda form](/img/integrations/integration-with-tilda/how-to-create-tilda-form.gif) + +### 2. Создайте и активируйте форму в Sendsay + +В Sendsay создайте новую форму и назовите её в формате: `tilda_<название формы Tilda>`. + +![How to create sendsay form](/img/integrations/integration-with-tilda/how-to-create-sendsay-form.gif) + +[Как создать форму](https://docs.sendsay.ru/forms/signup-forms/#как-создать-форму) + +Поля в форме должны дублировать поля формы Tilda. + +[Как настроить дизайн формы в редакторе](https://docs.sendsay.ru/forms/signup-forms/#как-настроить-дизайн-формы-в-редакторе) + +Для того, чтобы данные из Tilda сохранялись в поля анкеты, подписчик должен будет перейти по ссылке из письма подтверждения — так он подтвердит форму Sendsay. + +Завершив настройку формы, активируйте её, нажав на кнопку в правом верхнем углу страницы. + +### 3. Настройте форму на Tilda + +Чтобы данные из Tilda передавались в нужные поля формы Sendsay, необходимо связать их друг с другом. Для этого понадобятся id полей формы Sendsay. + +Есть два способа узнать id полей формы: + + + + +1. Перейдите в раздел [**Подписчики → Анкеты**](https://app.sendsay.ru/subscribers/schemas). +2. Откройте анкету, поля из которой вы добавляли в форму. + ![How to open questionnaire](/img/integrations/integration-with-tilda/how-to-open-questionnaire.gif) + +3. Напротив каждого поля анкеты есть команда подстановки, в которой указан id поля. + ![Field if in questionnaire](/img/integrations/integration-with-tilda/field-id-in-questionnaire.png) + + + + +Чтобы узнать id полей формы, необходимо сначала узнать id анкеты, куда будут сохраняться данные. + +Откройте форму и скопируйте её id. + +![New form field id](/img/integrations/integration-with-tilda/new-form-field-id.png) + +Перейдите в [API-консоль](https://app.sendsay.ru/api) и выполните запрос: + +``` +{ + "action": "form.get", + "id": "id формы" +} +``` + +Скопируйте данные из поля `anketa`, вернувшиеся в ответе. + +![New form anketa id](/img/integrations/integration-with-tilda/new-form-anketa-id.png) + +Теперь можно узнать id полей в форме. Для этого выполните в [API-консоль](https://app.sendsay.ru/api) запрос: + +``` +{ + "action": "anketa.get", + "id": "id анкеты" //укажите здесь данные из поля anketa, вернувшиеся после предыдущего запроса +} +``` + +![Api form field id](/img/integrations/integration-with-tilda/api-form-field-id.png) + + + + +Полученные id полей формы Sendsay нужно указать в настройках соответствующих полей в Tilda. + +Для этого в Tilda перейдите в меню «Контент» формы, откройте вкладку «Поля для ввода» и добавьте id из Sendsay в настройку «Имя переменной» нужного поля. + +![How to insert field id on tilda](/img/integrations/integration-with-tilda/how-to-insert-field-id-on-tilda.gif) + +### 4. Получите и активируйте вебхук для формы Tilda + +Чтобы завершить настройку передачи данных из форм Tilda, необходимо получить ссылку для [вебхука](https://docs.sendsay.ru/getting-started/glossary/#в) и активировать её в настройках формы. + +Чтобы получить ссылку: + +1. В [предыдущем интерфейсе](https://sendsay.ru/account/#dashboard) перейдите в раздел [**Подписчики → Интеграции**](https://sendsay.ru/account/#subscribers/integrations) и выберите пункт **Tilda**. +2. [Заполните необходимые](#2-выберите-настройки-интеграции-и-получите-ссылку) параметры и нажмите «Получить ссылку для Tilda». + +Для активации вебхука вставьте [полученную ссылку](#3-вставьте-ссылку-в-настройках-формы) в настройках формы Tilda. + +**Читайте также:**
+[Как использовать данные из Tilda в рассылках и сегментах](https://docs.sendsay.ru/email-campaigns/personalization/how-to-use-tilda-data-in-campaigns)
+[Формы сбора подписчиков](https://docs.sendsay.ru/forms/signup-forms/)
+[Анкеты и работа с данными](https://docs.sendsay.ru/subscribers/subscriber-data/data-groups/) diff --git a/static/img/integrations/integration-with-tilda/api-form-field-id.png b/static/img/integrations/integration-with-tilda/api-form-field-id.png new file mode 100644 index 00000000..ec6494f1 Binary files /dev/null and b/static/img/integrations/integration-with-tilda/api-form-field-id.png differ diff --git a/static/img/integrations/integration-with-tilda/field-id-in-questionnaire.png b/static/img/integrations/integration-with-tilda/field-id-in-questionnaire.png new file mode 100644 index 00000000..6fa74b8f Binary files /dev/null and b/static/img/integrations/integration-with-tilda/field-id-in-questionnaire.png differ diff --git a/static/img/integrations/integration-with-tilda/how-to-create-sendsay-form.gif b/static/img/integrations/integration-with-tilda/how-to-create-sendsay-form.gif new file mode 100644 index 00000000..54701a51 Binary files /dev/null and b/static/img/integrations/integration-with-tilda/how-to-create-sendsay-form.gif differ diff --git a/static/img/integrations/integration-with-tilda/how-to-create-tilda-form.gif b/static/img/integrations/integration-with-tilda/how-to-create-tilda-form.gif new file mode 100644 index 00000000..6c833c4a Binary files /dev/null and b/static/img/integrations/integration-with-tilda/how-to-create-tilda-form.gif differ diff --git a/static/img/integrations/integration-with-tilda/how-to-insert-field-id-on-tilda.gif b/static/img/integrations/integration-with-tilda/how-to-insert-field-id-on-tilda.gif new file mode 100644 index 00000000..8262bb95 Binary files /dev/null and b/static/img/integrations/integration-with-tilda/how-to-insert-field-id-on-tilda.gif differ diff --git a/static/img/integrations/integration-with-tilda/how-to-make-a-tilda-form.gif b/static/img/integrations/integration-with-tilda/how-to-make-a-tilda-form.gif new file mode 100644 index 00000000..71807232 Binary files /dev/null and b/static/img/integrations/integration-with-tilda/how-to-make-a-tilda-form.gif differ diff --git a/static/img/integrations/integration-with-tilda/how-to-open-questionnaire.gif b/static/img/integrations/integration-with-tilda/how-to-open-questionnaire.gif new file mode 100644 index 00000000..ce8e861b Binary files /dev/null and b/static/img/integrations/integration-with-tilda/how-to-open-questionnaire.gif differ diff --git a/static/img/integrations/integration-with-tilda/new-form-anketa-id.png b/static/img/integrations/integration-with-tilda/new-form-anketa-id.png new file mode 100644 index 00000000..ae24d8e5 Binary files /dev/null and b/static/img/integrations/integration-with-tilda/new-form-anketa-id.png differ diff --git a/static/img/integrations/integration-with-tilda/new-form-field-id.png b/static/img/integrations/integration-with-tilda/new-form-field-id.png new file mode 100644 index 00000000..62cc22ea Binary files /dev/null and b/static/img/integrations/integration-with-tilda/new-form-field-id.png differ