fix(sendsay-docs) fix integration-with-tilda (#341)

docs/forms/signup-forms.md

@@ -82,3 +82,10 @@ import formTypes from "/img/forms/signup-forms/form-types.png";
   - `https://sendsay.ru`
 :::
 </ol>
+
+У сайтов на Tilda есть собственный конструктор для создания форм. Чтобы получать и использовать данные из таких форм, их нужно связать с Sendsay.
+
+[Как связать форму Sendsay с формой Tilda](https://docs.sendsay.ru/integrations/integration-with-tilda#как-связать-форму-sendsay-с-формой-tilda)
+
+**Читайте также:**<br/>
+[Интеграция с Tilda](https://docs.sendsay.ru/integrations/integration-with-tilda)

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) <br/>
 
-## 2. Выберите настройки интеграции и получите ссылку
+### 2. Выберите настройки интеграции и получите ссылку
 
 У интеграции всего три настройки:
 
@@ -32,7 +38,7 @@ import howToPublushTildaForm from '/img/integrations/integration-with-tilda/how-
      <img src={tildaLink} alt="Tilda link" />
    </p>
 
-## 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) <br/>
 
-## 4. Настройте название формы
+### 4. Настройте название формы
 
 Откройте настройки блока с формой — название указывается под шириной и отступом. В названиях полей и формы можно использовать любые символы.
 
@@ -62,7 +68,7 @@ import howToPublushTildaForm from '/img/integrations/integration-with-tilda/how-
   <img src={howToPublushTildaForm} alt="How to publish Tilda form" />
 </p>
 
-## 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) <br/>
 
-**Читайте также:** [Как использовать данные из 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 полей формы:
+
+<Tabs>
+<TabItem value="key1" label="Через интерфейс" default>
+
+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)
+
+</TabItem>
+<TabItem value="key2" label="Через API-консоль">
+
+Чтобы узнать 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)
+
+</TabItem>
+</Tabs>
+
+Полученные 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.
+
+**Читайте также:** <br/>
+[Как использовать данные из Tilda в рассылках и сегментах](https://docs.sendsay.ru/email-campaigns/personalization/how-to-use-tilda-data-in-campaigns) <br/>
+[Формы сбора подписчиков](https://docs.sendsay.ru/forms/signup-forms/) <br/>
+[Анкеты и работа с данными](https://docs.sendsay.ru/subscribers/subscriber-data/data-groups/)