Встраивание EdCommerce на внешние веб-сайты

Last updated: October 16, 2026

Объединённое руководство по встраиванию контента EdCommerce на внешние веб-сайты и целевые страницы, охватывающее три метода. (1) Встраивание лид-форм: скопируйте iframe лид-формы EdCommerce в разделе Settings > Ecommerce > Forms — либо для каждого офиса через меню с тремя точками, либо одну форму для всех офисов с помощью кнопки «Copy Iframe for Lead Form» в верхнем меню — и вставьте HTML-код на любой внешний веб-сайт или в CMS, например WordPress/Elementor, Shopify или Wix; настройте форму, отредактировав URL iframe и добавив код языка (EN, PT, ES, ES_MX, PT_BR, DE, IT, TR, FR, JA, KO) или HEX-код для установки цвета кнопки «Отправить». Только лид-формы можно встраивать на внешние сайты — формы бронирования доступны только в EdCommerce — а отправленные лиды синхронизируются с Edvisor, автоматически назначаются нужному консультанту в соответствии с правилами вашего бизнеса и попадают в правильную воронку и этап. (2) Встраивание виджетов программ: создайте виджет в EdCommerce Settings > Widgets, настройте его внешний вид и вставьте сгенерированный фрагмент кода в HTML-блок; доступны пошаговые инструкции для WordPress (Elementor и Visual Composer), Wix и Squarespace, а также примеры использования. (3) Добавление EdCommerce в WordPress: добавьте ссылку на сайт EdCommerce в навигационное меню WordPress через Appearance > Menus, используя Custom Link и URL вашего EdCommerce (найти его можно в Settings > EdCommerce > EdCommerce Details); желательно настроить открытие ссылки в новой вкладке.

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

Встраивание форм EdCommerce

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

Здесь мы покажем, как встроить лид-формы на другие страницы вашего веб-сайта, чтобы собирать лиды не только из вашего интернет-магазина, но и с любой веб-страницы.

\Затем эти лиды будут синхронизированы с вашей учётной записью Edvisor, автоматически назначены нужным консультантам и добавлены в соответствующую воронку и этап.*

*Если вы ещё не настроили свои формы, вернитесь к этой статье, чтобы узнать, как настроить и персонализировать формы на вашем сайте EdCommerce.

**Обратите внимание, что только лид-формы можно встраивать на ваш веб-сайт. Формы бронирования предназначены исключительно для EdCommerce.

Как встроить формы EdCommerce на любую целевую страницу или веб-сайт

  • Перейдите в раздел: Settings > Ecommerce > Forms.

Затем нажмите на значок с тремя точками рядом с каждым офисом и выберите «Copy Iframe for Lead Form», если хотите встроить форму, созданную для конкретного офиса.

Или просто нажмите кнопку «Copy Iframe for Lead Form» в верхнем меню, чтобы встроить единую форму (для всех ваших офисов).

Вы получите HTML-код, который нужно скопировать и вставить на свой веб-сайт.

Если вы используете CMS, например WordPress (с конструктором сайтов, таким как Elementor или Visual Composer), Shopify или Wix, обычно они предлагают простой способ встраивания элементов с помощью фрагментов HTML-кода.

Обычно это виджет или элемент в панели инструментов, который можно просто перетащить.

Например, если вы используете конструктор сайтов, такой как Elementor, вы можете добавить его с помощью HTML-виджета.

Как настроить язык вашей формы

Если вы хотите указать язык лид-формы, добавьте код языка в конец URL внутри HTML-кода:

Пример:

src="https://dev-virtual.edvisor.io/edvisor/ecommerce-campaign/lead-form-iframe/en"

Здесь вы можете увидеть коды языков для различных доступных языков:

  • EN = английский
  • PT = португальский
  • ES = испанский
  • ES_MX = латиноамериканский испанский
  • PT_BR = бразильский португальский
  • DE = немецкий
  • IT = итальянский
  • TR = турецкий
  • FR = французский
  • JA = японский
  • KO = корейский

Как настроить цвет кнопки формы

Вы также можете персонализировать цвет кнопки «Отправить» во встроенных лид-формах, чтобы он соответствовал вашему бренду. Это просто:

  1. Найдите HEX-код цвета вашего бренда (пример: #4EB2F4).
  2. Добавьте этот HEX-код в URL формы, которую хотите встроить.

Например, если вы хотите использовать цвет с HEX-кодом #4EB2F4, ваш URL будет выглядеть примерно так:

<iframe title="Lead Form"
    src="https://virtual.edvisor.io/nuevalengua/cotizador/lead-form-iframe/en/4EB2F4/9447"
    width="500"
    height="900"
    frameborder="0"
    allowfullscreen="true">
</iframe>

Просто замените #4EB2F4 на свой пользовательский HEX-код цвета и увидите результат!

После того как студент заполняет одну из этих форм, лид будет назначен соответствующему консультанту на основе бизнес-правил, установленных в настройках вашего Эдкоммерса. Эти лиды также синхронизируются с вашей учетной записью Edvisor и добавляются в правильную воронку и этап.

Встраивание программ Эдкоммерса

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

Это означает, что вы получаете лучшее из двух миров — функциональность вашего текущего веб-сайта и мощные функции Эдкоммерса.

Вы можете сделать это, создав и встроив виджет. Давайте посмотрим, как это сделать.

Как создать виджет EdCommerce

  1. Откройте настройки EdCommerce: Войдите в свою учетную запись EdCommerce и перейдите в раздел «Настройки».
  2. Создайте виджет: В меню слева выберите «Виджеты», затем «Создать новый виджет».
  3. Заполните данные виджета: Заполните форму, указав название виджета, предпочитаемый язык, валюту и национальность студента.
  4. Выберите содержимое: Выберите программы или поставщиков образовательных услуг, которые будут отображаться в вашем виджете. Просто нажмите «Программы» или «Поставщики» и выберите из списка справа те, которые хотите отображать.
  5. Настройте внешний вид: Настройте внешний вид виджета, изменив стиль шрифта, цвет фона и тень блока в соответствии с дизайном вашего сайта. Вы также можете изменить внутренние отступы для более точного соответствия, нажав на квадратный значок внутри предварительного просмотра виджета.
  6. Сохраните виджет: После того как вы будете удовлетворены настройками, нажмите «Сохранить».

После сохранения виджета вы получите фрагмент кода.

Этот код необходимо добавить на ваш сайт, продолжайте читать, чтобы узнать, как это сделать.

Как добавить виджет EdCommerce на свой сайт

Просто откройте страницу на своем сайте, где хотите разместить этот виджет, и вставьте HTML-блок с кодом.

В зависимости от CMS вашего сайта (например, WordPress или Wix) способ добавления этого кода может отличаться. Как правило, все редакторы сайтов позволяют перетаскивать HTML-блок.

Вот несколько примеров:

WordPress (с Elementor):

  • Откройте страницу, которую хотите редактировать, с помощью Elementor.
  • Перетащите виджет «HTML» с панели слева на страницу туда, где вы хотите разместить виджет.
  • Вставьте фрагмент кода EdCommerce в поле HTML-кода.
  • Нажмите «Обновить», чтобы сохранить изменения.

WordPress (с Visual Composer):

  • Отредактируйте страницу, на которую хотите добавить виджет.
  • Нажмите кнопку «+», чтобы добавить новый элемент.
  • Выберите «Необработанный HTML» или «Пользовательский HTML» среди элементов содержимого.
  • Вставьте фрагмент кода EdCommerce в текстовое поле.
  • Сохраните изменения, нажав «Обновить» на странице.

Wix:

  • Перейдите в редакторе Wix на страницу, которую хотите редактировать.
  • Нажмите «Добавить» (+) в левой части редактора и выберите «Еще».
  • Выберите «HTML iframe» в раскрывающемся меню.
  • Нажмите «Ввести код», а затем вставьте фрагмент кода EdCommerce в поле «Настройки HTML».
  • Нажмите «Применить», чтобы сохранить изменения и увидеть виджет на своей странице.

Squarespace:

  • Перейдите на страницу, куда хотите добавить виджет.
  • Нажмите «+Добавить блок» и выберите «Код» в меню.
  • Вставьте фрагмент кода EdCommerce в блок кода и нажмите «Применить».

Если вы не можете найти HTML-модуль в своем редакторе, попробуйте сделать это, отредактировав код модуля «форматированный текст».

Варианты использования

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

Вот несколько примеров того, как виджеты Эдкоммерс можно творчески использовать на вашем сайте:

Улучшение записей в блоге:

Если вы пишете запись в блоге об обучении в определённом месте, например в Сиднее, разместите виджет в конце записи. Представьте 3 лучшие программы или специальные акции в Сиднее, чтобы побудить читателей изучить эти варианты. Это может значительно увеличить количество конверсий благодаря прямой связи содержимого с релевантными программами.

Страницы мероприятий:

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

Страницы, посвящённые конкретным местам:

Если на вашем сайте есть страницы, посвящённые определённым направлениям или странам обучения, встроите виджет на эти страницы, чтобы отображать программы, доступные в этих местах. Это отличный способ предложить релевантные варианты пользователям, которые уже заинтересованы в этих направлениях.

Страницы благодарности после подписки на рассылку:

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

Во время рекламных кампаний:

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

Добавление Эдкоммерс в WordPress

Обратите внимание, что следующие инструкции предназначены специально для пользователей, которые используют WordPress в качестве конструктора веб-сайтов. Если вы используете другую платформу или конструктор веб-сайтов, эти шаги могут быть неприменимы.

Шаг 1

Откройте панель администратора WordPress, перейдите в раздел «Внешний вид» и нажмите «Меню».

Шаг 2

В разделе «Меню» перейдите к пункту «Произвольные ссылки», введите URL своей платформы Эдкоммерс и текст CTA, который вы хотите разместить в меню своего веб-сайта.

Затем нажмите «Добавить в меню», чтобы включить этот новый пункт в главное меню.

Чтобы найти URL Эдкоммерс, перейдите в раздел настроек на своей платформе, нажмите «Эдкоммерс», а затем «Сведения об Эдкоммерс».

Полезный совет! Чтобы пользователи не покидали вашу страницу, настройте меню так, чтобы ссылка открывалась в новой вкладке.