Подключение Zapier к вашему сайту
Zapier — это сервис, который может выступать посредником между контактной формой на сайте и сторонним приложением.
Настройка автоматизации осуществляется с помощью Zap-ов, которые начинаются с Trigger — события, которое запускает весь ваш рабочий процесс. После того, как происходит триггерное событие, срабатывает Action — действие, которое нужно выполнить в таком случае.
Так, вы можете создать Zap, в котором события с вашей контактной формы на сайте будут перенаправляться в стороннее приложение (Google Таблицы, Slack и прочее). В таком случае вам необходимо будет настроить заполнение контактной формы на сайте как Trigger, а другой сервис, куда должны попадать данные с формы, как Action.
Однако это не единственное удобство, которое вы можете получить, используя Zapier на своем сайте с Weblium! Вы также можете отслеживать производительность вашего магазина и вести учет заказов, которые вы получаете.
Содержание:
Интеграция Zapier c контактной формой
Интеграция Zapier c Вашим Магазином
Важно: эти опции доступны только для сайтов с платными подписками.
Чтобы включить интеграцию с Zapier на своём сайте, зайдите в настройки сайта, откройте раздел Управление формами (1) и перейдите на вкладку Интеграции (2):

Затем нажмите на поле Zapier, а затем - на кнопку Новый сервис:

Скопируйте сгенерированный ID сайта и Секретный ключ:

Зарегистрируйтесь или войдите в уже существующий аккаунт на Zapier.
Для начала вам нужно будет добавить свой сайт в аккаунт на Zapier. Для этого откройте эту ссылку с приглашением и нажмите Accept Invite & Build a Zap внизу страницы, которая перенаправит вас на главную панель управления вашим аккаунтом на Zapier:

Нажмите Create — New Zap в правом верхнем углу, чтобы начать создавать ваш Zap:

В новом окне дайте отличительное название для вашей Zap-автоматизации:

На этом этапе выберите Trigger, введите в поле поиска Form Submission и выберите Sitebuilder Form (1.0.3):

Потом выберите Form Submission в списке Trigger Event:

Далее нажмите Sign in, чтобы продолжить создание Zap-а:

В новом окне введите полученные ID сайта и Секретный ключ из настроек вашего сайта, а затем нажмите Yes, continue, чтобы подключить свой сайт к этому Zap-у:

Так, вы успешно присоединили свой сайт к этому Zap-у. Нажмите Continue, чтобы продолжить:

В выпадающем списке, выберите нужную вам контактную форму на подключенном сайте и нажмите Continue:

Подсказка: название формы на стороне Zapier соответствует её названию в редакторе. Мы рекомендуем изменить имена форм, чтобы лучше их различать. Для этого обратитесь к статье Изменение названия контактной формы.
На этом шаге вам будет предложено протестировать установленное событие. Мы рекомендуем вам пройти этот тест, чтобы убедиться, что вы правильно подключили нужный сайт к Zap-у и верно настроили этот Trigger:

Если всё настроено корректно, вы увидите следующее сообщение. Нажмите Continue with selected record, чтобы продолжить настраивать связи между двумя приложениями:

Теперь выберите приложение, с которым вы будете работать, и настройте Action — какое событие будет происходить после отправки формы на стороне этого приложения. Более детальную информацию о настройке Zap-ов вы можете найти в инструкции по их созданию от Zapier.
Когда вы дойдёте до этапа тестирования действия вашего Zap-а, оставьте эту вкладку на несколько минут и вернитесь в свой аккаунт на Weblium. В редакторе сайта, откройте вкладку Интеграции в настройках формы и включите Zapier, а также выберите соответствующий идентификатор подключения в раскрывающемся списке:

После этого, опубликуйте ваш сайт.
Вернитесь в аккаунт Zapier и нажмите Test Step:

Просмотрите результат теста, чтобы увидеть как отработало действие Create Spreadsheet Row в Google таблицах:

Если все сработало корректно, нажмите Publish, чтобы активировать автоматизацию:

Готово! Теперь контактная форма на сайте будет отправлять информацию в Google таблицы, которое вы настроили через Zapier.
Перейдите в Google таблицы и добавьте два новых столбца «Date» и «Correct date» (потом можете переименовать их по собственному желанию):

Вернитесь в ваш Zap и перейдите к редактированию события Отправки контактной формы. К новому полю «Date» добавьте триггер {{zap_meta_utc_iso}}:

На этом этапе дата и время будет передаваться в формате UTC +0 в столбец «Date». Для того, чтобы передавать время в соответствии с вашим часовым поясом, в первую строку столбца «Correct date» нужно добавить следующую формулу: =ARRAYFORMULA(IF(F2:F="", "", TEXT(F2:F + TIME(2,0,0), "yyyy-mm-dd hh:mm:ss"))):

Замените F2:F на нужный столбец, например J2:J, если данные находятся в другом месте. Чтобы учесть часовой пояс, настройте функцию TIME:
Для UTC+2: TIME(2,0,0)
Для UTC-5: -TIME(5,0,0)
Для минутного смещения (например, UTC-5:30): -TIME(5,30,0).
После этого столбец «Date» можно скрыть, чтобы отображать только правильное время в поле «Correct date». Теперь контактная формы на вашем сайте будет дополнительно отправлять дату и время отправки в Google таблицы:

Создайте новый документ Excel Spreadsheet на своем Google Диске. Если же шаблон документа куда будут заноситься данные уже готов, переходите к Шагу 2 .
Назовите лист с таблицей (необязательно) и создайте заголовки столбцов в электронной таблице.
Зарегистрируйтесь или войдите в свою существующую учетную запись Zapier. Далее все картинки будут на английском, т.к. интерфейс Zapier имеет только такую локализацию, но не волнуйтесь — все будет доступно расписано, а картинки будут лишь для визуализации.
Перейдя на панель управления Zap-ами, нажмите Create Zap в верхнем правом углу:

В открывшемся окне, назовите свой Zap:

Найдите Webhook и выберите его:

Примечание: использование опции Webhook — это платная услуга в Zapier, но у вас будет возможность попробовать ее в течение недели, прежде чем опредилиться с переходом на платную подписку.
Выберите событие Catch Hook для триггера:

И дважды нажмите Continue, чтобы продолжить создание Zap-а:

Теперь скопируйте свой индивидуальный URL-адрес веб-хука — он вам скоро понадобится. Нажмите Continue:

Дойдя до окна тестирования, оставьте его на некоторое время — вы вернетесь к нему через несколько минут. Вместо этого, перейдите в настройку уведомлений Вашего Магазина, вставьте URL-адрес пользовательского веб-хука, который вы только что скопировали, в предоставленное поле, чтобы добавить интеграцию Zapier, и нажмите Connect:

Вернитесь на вкладку своей учетной записи Zapier и проверьте свой триггер — нажмите кнопку Test trigger, а затем нажмите Continue with selected record. Если ошибок нет — поздравляем! Вы только что настроили триггер своего веб-хука:


Самый удобный способ хранить и анализировать ваши данные — использовать Google Таблицы, поэтому мы тоже воспользуемся этим вариантом:

Среди вариантов Action event, выберите Create Spreadsheet Row и нажмите Continue:

Выберите свою учетную запись Google, в которой находится электронная таблица, в которую вы собираетесь добавлять записи о заказах:

После этого, вы увидите заголовки полей, которые вы добавили в свою таблицу, и сможете указать, какие данные должны отображаться в каждом поле вашей таблицы. Когда все будет готово, жмите Continue.

Вам будет предложено пройти еще один тест - на проверку корректности настройки действия для вашего Zap-а. Пройдите его, нажав Test step:

После прохождения теста вам будет предложено включить Zap — сделайте это. Вы можете активировать ваш Zap, нажав соответствующую кнопку Publish:

Готово! Теперь Ваш Магазин будет отправлять с вашего сайта данные в выбранную электронную таблицу, которую вы настроили на Zapier, и у вас в документе на Google Диске будут хранится все записи ваших дальнейших заказов:

По умолчанию вебхук Order Customer Fields Value передает информацию в следующем формате: Customer Name,Email,+380501234567,Customer's comment. В приведенном выше примере эта информация передается в поле E. Для того, чтобы соответствующие частичные значения были отправлены в следующие столбцы (F-G-H-I), вам нужно будет использовать следующие формулы к первым строкам столбцов F-I:
F столбец ( Имя покупателя): =ARRAYFORMULA(IF(E2:E="", "", LEFT(E2:E, FIND(",", E2:E) - 1)))
G столбец ( Email): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E) + 1, FIND(",", E2:E, FIND(",", E2:E) + 1) - FIND(",", E2:E) - 1)))
H столбец ( Номер): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1, FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1) - FIND(",", E2:E, FIND(",", E2:E) + 1) - 1)))
I столбец ( Комментарий): =ARRAYFORMULA(IF(E2:E="", "", RIGHT(E2:E, LEN(E2:E) - FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1))))

Note: Замените буквы столбцов в формулах на нужные столбцы, если данные находятся в другом месте. Также вы можете посмотреть, как правильно отправлять дату и время в разделе Отправка даты и времени в Google Sheets.
Подсказка: дальнейшую информацию о том, как вы можете управлять своими Zap-ами, вы сможете найти в Справочном центре Zapier.
Настройка автоматизации осуществляется с помощью Zap-ов, которые начинаются с Trigger — события, которое запускает весь ваш рабочий процесс. После того, как происходит триггерное событие, срабатывает Action — действие, которое нужно выполнить в таком случае.
Так, вы можете создать Zap, в котором события с вашей контактной формы на сайте будут перенаправляться в стороннее приложение (Google Таблицы, Slack и прочее). В таком случае вам необходимо будет настроить заполнение контактной формы на сайте как Trigger, а другой сервис, куда должны попадать данные с формы, как Action.
Однако это не единственное удобство, которое вы можете получить, используя Zapier на своем сайте с Weblium! Вы также можете отслеживать производительность вашего магазина и вести учет заказов, которые вы получаете.
Содержание:
Интеграция Zapier c контактной формой
Интеграция Zapier c Вашим Магазином
Важно: эти опции доступны только для сайтов с платными подписками.
Интеграция Zapier c контактной формой
Шаг 1. Доступ к ID сайта и Секретному ключу
Чтобы включить интеграцию с Zapier на своём сайте, зайдите в настройки сайта, откройте раздел Управление формами (1) и перейдите на вкладку Интеграции (2):

Затем нажмите на поле Zapier, а затем - на кнопку Новый сервис:

Скопируйте сгенерированный ID сайта и Секретный ключ:

Шаг 2. Вход в ваш Zapier аккаунт
Зарегистрируйтесь или войдите в уже существующий аккаунт на Zapier.
Для начала вам нужно будет добавить свой сайт в аккаунт на Zapier. Для этого откройте эту ссылку с приглашением и нажмите Accept Invite & Build a Zap внизу страницы, которая перенаправит вас на главную панель управления вашим аккаунтом на Zapier:

Шаг 3. Создание обработчика события для вашего Zap-а
Нажмите Create — New Zap в правом верхнем углу, чтобы начать создавать ваш Zap:

В новом окне дайте отличительное название для вашей Zap-автоматизации:

На этом этапе выберите Trigger, введите в поле поиска Form Submission и выберите Sitebuilder Form (1.0.3):

Потом выберите Form Submission в списке Trigger Event:

Далее нажмите Sign in, чтобы продолжить создание Zap-а:

В новом окне введите полученные ID сайта и Секретный ключ из настроек вашего сайта, а затем нажмите Yes, continue, чтобы подключить свой сайт к этому Zap-у:

Так, вы успешно присоединили свой сайт к этому Zap-у. Нажмите Continue, чтобы продолжить:

В выпадающем списке, выберите нужную вам контактную форму на подключенном сайте и нажмите Continue:

Подсказка: название формы на стороне Zapier соответствует её названию в редакторе. Мы рекомендуем изменить имена форм, чтобы лучше их различать. Для этого обратитесь к статье Изменение названия контактной формы.
На этом шаге вам будет предложено протестировать установленное событие. Мы рекомендуем вам пройти этот тест, чтобы убедиться, что вы правильно подключили нужный сайт к Zap-у и верно настроили этот Trigger:

Если всё настроено корректно, вы увидите следующее сообщение. Нажмите Continue with selected record, чтобы продолжить настраивать связи между двумя приложениями:

Шаг 4. Назначение действия для обработчика события вашего Zap-а
Теперь выберите приложение, с которым вы будете работать, и настройте Action — какое событие будет происходить после отправки формы на стороне этого приложения. Более детальную информацию о настройке Zap-ов вы можете найти в инструкции по их созданию от Zapier.
Когда вы дойдёте до этапа тестирования действия вашего Zap-а, оставьте эту вкладку на несколько минут и вернитесь в свой аккаунт на Weblium. В редакторе сайта, откройте вкладку Интеграции в настройках формы и включите Zapier, а также выберите соответствующий идентификатор подключения в раскрывающемся списке:

После этого, опубликуйте ваш сайт.
Вернитесь в аккаунт Zapier и нажмите Test Step:

Просмотрите результат теста, чтобы увидеть как отработало действие Create Spreadsheet Row в Google таблицах:

Если все сработало корректно, нажмите Publish, чтобы активировать автоматизацию:

Готово! Теперь контактная форма на сайте будет отправлять информацию в Google таблицы, которое вы настроили через Zapier.
Отправка даты и времени в Google Sheets
Перейдите в Google таблицы и добавьте два новых столбца «Date» и «Correct date» (потом можете переименовать их по собственному желанию):

Вернитесь в ваш Zap и перейдите к редактированию события Отправки контактной формы. К новому полю «Date» добавьте триггер {{zap_meta_utc_iso}}:

Форматирование даты и времени в Google таблицах.
На этом этапе дата и время будет передаваться в формате UTC +0 в столбец «Date». Для того, чтобы передавать время в соответствии с вашим часовым поясом, в первую строку столбца «Correct date» нужно добавить следующую формулу: =ARRAYFORMULA(IF(F2:F="", "", TEXT(F2:F + TIME(2,0,0), "yyyy-mm-dd hh:mm:ss"))):

Замените F2:F на нужный столбец, например J2:J, если данные находятся в другом месте. Чтобы учесть часовой пояс, настройте функцию TIME:
Для UTC+2: TIME(2,0,0)
Для UTC-5: -TIME(5,0,0)
Для минутного смещения (например, UTC-5:30): -TIME(5,30,0).
После этого столбец «Date» можно скрыть, чтобы отображать только правильное время в поле «Correct date». Теперь контактная формы на вашем сайте будет дополнительно отправлять дату и время отправки в Google таблицы:

Интеграция Zapier c Вашим Магазином
Шаг 1. Подготовка
Создайте новый документ Excel Spreadsheet на своем Google Диске. Если же шаблон документа куда будут заноситься данные уже готов, переходите к Шагу 2 .
Назовите лист с таблицей (необязательно) и создайте заголовки столбцов в электронной таблице.
Зарегистрируйтесь или войдите в свою существующую учетную запись Zapier. Далее все картинки будут на английском, т.к. интерфейс Zapier имеет только такую локализацию, но не волнуйтесь — все будет доступно расписано, а картинки будут лишь для визуализации.
Шаг 2. Настройка триггера вашего Zap-а
Перейдя на панель управления Zap-ами, нажмите Create Zap в верхнем правом углу:

В открывшемся окне, назовите свой Zap:

Найдите Webhook и выберите его:

Примечание: использование опции Webhook — это платная услуга в Zapier, но у вас будет возможность попробовать ее в течение недели, прежде чем опредилиться с переходом на платную подписку.
Выберите событие Catch Hook для триггера:

И дважды нажмите Continue, чтобы продолжить создание Zap-а:

Теперь скопируйте свой индивидуальный URL-адрес веб-хука — он вам скоро понадобится. Нажмите Continue:

Дойдя до окна тестирования, оставьте его на некоторое время — вы вернетесь к нему через несколько минут. Вместо этого, перейдите в настройку уведомлений Вашего Магазина, вставьте URL-адрес пользовательского веб-хука, который вы только что скопировали, в предоставленное поле, чтобы добавить интеграцию Zapier, и нажмите Connect:

Вернитесь на вкладку своей учетной записи Zapier и проверьте свой триггер — нажмите кнопку Test trigger, а затем нажмите Continue with selected record. Если ошибок нет — поздравляем! Вы только что настроили триггер своего веб-хука:


Шаг 3. Настройка действия вашего Zap-а.
Самый удобный способ хранить и анализировать ваши данные — использовать Google Таблицы, поэтому мы тоже воспользуемся этим вариантом:

Среди вариантов Action event, выберите Create Spreadsheet Row и нажмите Continue:

Выберите свою учетную запись Google, в которой находится электронная таблица, в которую вы собираетесь добавлять записи о заказах:

После этого, вы увидите заголовки полей, которые вы добавили в свою таблицу, и сможете указать, какие данные должны отображаться в каждом поле вашей таблицы. Когда все будет готово, жмите Continue.

Вам будет предложено пройти еще один тест - на проверку корректности настройки действия для вашего Zap-а. Пройдите его, нажав Test step:

После прохождения теста вам будет предложено включить Zap — сделайте это. Вы можете активировать ваш Zap, нажав соответствующую кнопку Publish:

Готово! Теперь Ваш Магазин будет отправлять с вашего сайта данные в выбранную электронную таблицу, которую вы настроили на Zapier, и у вас в документе на Google Диске будут хранится все записи ваших дальнейших заказов:

Шаг 4. Парсинг данных с вебхука "Order Customer Fields Value"
По умолчанию вебхук Order Customer Fields Value передает информацию в следующем формате: Customer Name,Email,+380501234567,Customer's comment. В приведенном выше примере эта информация передается в поле E. Для того, чтобы соответствующие частичные значения были отправлены в следующие столбцы (F-G-H-I), вам нужно будет использовать следующие формулы к первым строкам столбцов F-I:
F столбец ( Имя покупателя): =ARRAYFORMULA(IF(E2:E="", "", LEFT(E2:E, FIND(",", E2:E) - 1)))
G столбец ( Email): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E) + 1, FIND(",", E2:E, FIND(",", E2:E) + 1) - FIND(",", E2:E) - 1)))
H столбец ( Номер): =ARRAYFORMULA(IF(E2:E="", "", MID(E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1, FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1) - FIND(",", E2:E, FIND(",", E2:E) + 1) - 1)))
I столбец ( Комментарий): =ARRAYFORMULA(IF(E2:E="", "", RIGHT(E2:E, LEN(E2:E) - FIND(",", E2:E, FIND(",", E2:E, FIND(",", E2:E) + 1) + 1))))

Note: Замените буквы столбцов в формулах на нужные столбцы, если данные находятся в другом месте. Также вы можете посмотреть, как правильно отправлять дату и время в разделе Отправка даты и времени в Google Sheets.
Подсказка: дальнейшую информацию о том, как вы можете управлять своими Zap-ами, вы сможете найти в Справочном центре Zapier.
Последнее изменение: 04/12/2024
Спасибо!