Как связать тильду и геткурс

Обновлено: 18.04.2024

Сегодня поговорим о Клубе Магии Геткурс. Это закрытый клуб для специалистов и администраторов Геткурса, в котором можно научиться действительно «магии» — превращать унылое оформление тренингов, уроков, виджетов и всего-всего остального на платформе в любое. Также за счёт огромной библиотеки готовых скриптов и css-кодов создавать такие возможности настроек, которых изначально просто не существует в Геткурсе. Вы научитесь делать то, чего не умеет большинство специалистов:

Менять оформление тренингов и уроков
Стилизовать боковое меню
Модифицировать страницу оплаты
Переделывать стандартное оформление блоков в уроках и лендингах
Добавлять визуальные «плюшки»
Научитесь базовым понятиям дизайна и верстки
и многое другое

Что внутри клуба?

Вцелом, тут секретного ничего нет. Это простые знания css/html/js, которые подстроили под getcourse. Всему этому можно научиться пройдя обычные курсы верстальщика, коих сейчас довольно много. Правда дополнительно придется еще ковыряться, чтобы это все подстроить под структуру платформы.

А можно воспользоваться более 200 уроками с готовыми кодами и не углубляться в программирование. Здесь же в клубе, кстати, есть и теоретические уроки, чтобы понимать базово код и при необходимости можно было самостоятельно менять предоставленные шаблоны, скрипты и css-коды для Геткурс.

Помимо уроков, вам станет доступен чат клуба, где преподаватели не оставят наедине с проблемами. Причем некоторые из них работали ранее непосредственно в ГК и создавали эту самую любимую нашу платформу.

Я с Геткурсом работаю с конца 2018 года, а в школе магии состою с декабря 2020 года - с момента его основания. И ни разу не пожалел.

На мой взгляд, это лучшее не базовое обучение по ГК. Если вы уже работаете с платформой, то здесь очень быстро прокачаете себе продвинутые навыки, что позволит решать куда более сложные задачи заказчиков, а значит и увеличить свою стоимость.

Можно связать Геткурс со своим сайтом на стороннем сервисе. Для этого используется виджет с формой. Внешний вид виджета можно настроить. Например, виджет может выглядеть вот так:

Установка виджета на ваш сайт позволяет собирать контакты с вашего сайта в Геткурс, и дальше можно делать рассылки по этим контактам прямо из Геткурса, вести заказы и принимать оплаты в Геткурсе — при этом доступ к материалам будет выдаваться автоматически.

Сама установка делается несложно. Достаточно скопировать код виджета и вставить его в нужное место на лендинге:

Добрый день.
Подскажите, мне нужно реализовать интеграцию с тильдой.
Путь должен выглядеть так: Человек добавляет курсы в корзину - заполняет корзину - редирект сразу на страницу оплаты геткурса - выдача доступов.
Как реализовать данную связку?

Здравствуйте, Дмитрий.
Использование функционала "Корзина" возможно только на страницах, которые созданы в вашем аккаунте: https://getcourse.ru/blog/275826 На данный момент не предусмотрено использование "Корзины" с виджетами на стороннем сайте.

В данном случае вы можете настроить переадресацию со стороннего сайта на страницу аккаунта, и только после этого, реализовать заполнение "Корзины" и оформление заказа.

здравствуйте! скажите, как студенту открывается курс - на вашем сайте или на моем? могу ли я сделать так, чтобы студент не покидал моего сайта?

Ирена, здравствуйте!
Раздел со списком тренингов/уроков размещается на платформе. Переместить его на сторонний сайт возможности нет. Вы можете разместить на стороннем сайте виджеты с формой регистрации/заказа, но для прохождения обучения пользователю потребуется перейти в ваш аккаунт на GetCourse.

Здравствуйте, Екатерина. Связка Геткурс с сайтами, размещенными на сторонних сервисах, в том числе на Тильда, с помощью виджетов доступна и на бесплатном ознакомительном периоде.

Здравствуйте! А в чем смысл создавать и формы и виджеты? Правильно я понимаю, что виджеты я привязываю на тильде в кнопки оплаты?
А робокассу и тинькофф интегрирую с витриной?
Как тогда будут оплаты проходить?

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

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

В разделе «Сайт» — «Виджеты» создайте новый виджет. Введите название виджета и нажмите кнопку «Создать».

На странице редактирования можно добавить три типа блоков:

Виджеты имеют широкий набор функций, например, можно:

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

Эти функции можно совмещать друг с другом и гибко настроить в зависимости от вашей задачи. Разберем три примера использования виджетов и как их настроить:

Как настроить подключение соц.сетей при регистрации?

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

Таким образом, будет настроена регистрация в 2 этапа — сначала пользователь вводит эл.адрес в форме виджета, а после произойдёт переадресация на страницу, где он сможет подключить удобную соц.сеть.

Как создать форму подписки или регистрации с переадресацией на страницу благодарности?

Добавьте форму в виджет и отредактируйте ее: поменяйте заголовок, измените текст кнопки, добавьте или удалите поля формы, но обязательным для заполнения должны остаться поля «E-mail» или «Телефон».

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

Пользователи будут заполнять форму, регистрироваться в аккаунте GetCourse и переходить на страницу благодарности после заполнения формы.

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

Как создать форму оплаты в виджете?

В настройках формы добавьте обработчик «Создать заявку/заказ», перейдите к выбору предложения и в открывшемся списке выберите предложение, по которому должен формироваться заказ:

Обратите внимание , что варианты опции «Место открытия формы оплаты»: «Открывать страницу оплаты в новом окне» и «Оплата в оверлее без перехода на страницу оплаты» не поддерживается в виджетах. Если они выбраны, то страница оплаты будет открываться все равно в текущем окне.

Пользователи будут заполнять форму, регистрироваться в аккаунте GetCourse и переходить на страницу оплаты, после заполнения формы.

Как вставить виджет на страницу стороннего сайта и на ресурсы: Tilda, Платформа LP, Wix?

Для вставки виджета на сайт нажмите «Настройки и код виджета», скопируйте код и добавьте его на ваш сайт.

В окне с кодом предложено два варианта для вставки:

Обратите внимание: если добавить несколько одинаковых виджетов на одну страницу сайта, то необходимы дополнительные настройки, описанные в 7 пункте статьи.

Дополнительные возможности виджетов (передача меток и параметров, HTML код)

Виджеты передают UTM-метки страницы, партнерские ссылки и т.п.

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

Как использовать несколько одинаковых виджетов на одной странице?

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

Где &rand=случайный_набор_букв и &rand=другой_случайный_набор_букв — параметры, которые нужно добавить к виджетам. (Вместо значений параметров из примера нужно использовать свои).

Как создать и добавить на сайт форму обратной связи?

Способ создания и добавления формы обратной связи на сайт рассмотрен в статье блога.

Здравствуйте! Как я могу провести интеграцию сайта, созданного на wordpress, с геткурс? Также через виджеты?

Здравствуйте, а если добавлять виджет на свой сайт, как в статье, для покупки курса, то как проходит оплата? Если у нас в аккаунте геткурса не настроена платежная интеграция, она настроена у сайта с банком. Т.е. нам нужно при добавлении виджета от Геткурса на сайт-сначала нужно настроить платежную интеграцию, правильно понимаю?

Здравствуйте, Дарья.
Да, верно. Настройки платёжных систем на самом сайте на имеют значения.
Виджет позволяет связать сторонний сайт с вашим аккаунтом GetCourse. После заполнения формы виджета для оформления заказа, сам заказ создаётся именно в аккаунте и для оплаты могут быть использованы те платёжные системы, которые подключены в аккаунте.

Подскажите пожалуйста. Я правильно понимаю что после заполнения этого виджета (я его вставлю на сайт в тильде), данные автоматически попадут в базу пользователей на геткурс? А как этих пользователей отдельно потом распознать, найти среди тех, что уже в базе ? Не будут ли им открыт доступ к платформе ? Цель созданного виджета только для сбора контактов, не для регистрации.

В этой статье разберем интеграцию Тильды и Геткурса. Это выполнимо и делается просто — на страницах достаточно заменить формы Тильды на геткурсовские. То есть весь смысл в том, что на сайте открываются формы Геткурса, и все данные сразу уходят в него. И данный способ, кстати, поможет соединить ГК с любыми другими сервисами. Для этого, собственно, виджеты (подгружаемые формы) и создавались.

Я понимаю, что встроенный конструктор лендингов у Геткурса имеет весьма простой функционал, дизайн и требует более сложной работы с ним. Поэтому зачастую сайты собираются на сторонних платформах-конструкторах. Но вы теряете в таком случае его функционал. К тому же, браузеры ужесточают свои политики безопасности, поэтому в виджетах не всегда может срабатывать авторизация пользователей.

Интеграция Тильда и Геткурс

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

Размещение gc-виджета на странице

В данном варианте мы хотим интегрировать форму захвата Геткурса прямо на странице, между блоками Тильды. Для этого просто добавляем в нужном месте блок T123:

После этого переходим по красной кнопке «контент».

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

Всё! Сохраняем изменения и нужная форма показывается на странице Тильды.

Размещение виджета во всплывающем окне

Придерживаемся вышеописанной стратегии в пункте 1 с незначительными изменениями.

Теперь мы добавляем другой блок — T868:

Переходим по кнопке «контент» и вставляем код.

Здесь есть один момент — у нас появилось дополнительное поле «ссылка на popup». Я очень рекомендую менять значение, которое там установлено по умолчанию.

Дело в том, что зачастую всплывающих попапов планируется несколько. И у каждого должна быть своя «ссылка». Если забудете и оставите как есть, то всплывающие окна не заработают как надо.

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

Всё! Сохраняем изменения и проверяем кнопку.

Распространенная ошибка

При установке одинаковых виджетов на одной странице, они могут не показываться устройствах apple. Например, добавили форму регистрации в начале и конце лендинга. И причина тому некорректное отображение на iOS. Решение следующее — добавить к коду виджета параметр с произвольным значением — &rand=случайный_набор_букв .

У каждого виджета (которые повторяются) на странице должен быть уникальный параметр.

После создания виджета в GetCourse его можно разместить несколькими способами на странице сервиса Tilda.

Рассмотрим основные варианты:

1. Вставка виджета в HTML-блок

Как объединить сайт на Тильде и GetCourse

Скопируйте код созданного виджета:

На странице Tilda добавьте блок из раздела «Другое» T123 — «HTML-код»:

Кликните по кнопке «Контент»:

В появившемся окне вставьте скопированный код виджета и сохраните изменения по кнопке «Сохранить и закрыть»:

Чтобы виджет отобразился на странице, её необходимо опубликовать:

2. Вставка «старого виджета» в HTML-блок

После создания «старого виджета» по ссылке ваш_аккаунт/cms/control/xdget/new (например, виджета с формой обратной связи), можно скопировать его код:

и вставить в блок T123 — «HTML-код» аналогичным образом:

При необходимости блок с виджетом можно отцентрировать, выставив отступы в «Настройках»:

3. Вставка виджета через HTML-код формы в HTML-блок

Для вставки виджета через HTML-код формы в HTML-блок необходимо скопировать его код:

Добавить на странице Tilda блок T123 — «HTML-код»:

и вставить код в «Контент» блока:

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

4. Вставка виджета в PopUp

Рассмотрим, как настроить открытие виджета GetCourse во всплывающем окне при клике на кнопку. Для этого на странице Tilda нужно будет вставить два блока. Первым вставьте блок из раздела «Другое» T868 — «HTML-код в попапе»:

Кликните по кнопке «Контент»:

В появившемся окне нужно вставить код виджета, скопированный со страницы «Настройки и код виджета» в аккаунте:

Скопируйте ссылку на PopUp, чтобы далее использовать ее в следующем блоке:

Добавьте блок с кнопкой, при нажатии на которую будет всплывать форма виджета:

Вставить кнопку можно блоком из раздела «Форма и кнопка» — BF101 «Кнопка»:

Кликнув по кнопке «Контент» вставьте скопированную ссылку на PopUp:

Опубликуйте изменения на странице:

Аналогичным образом можно настроить показ PopUp не только при клике на кнопку, но и для блоков с триггерами (T183, T188, T723):

В меню «Контент» каждого такого блока также нужно будет прописать ссылку на PopUp:

Если в виджете много полей и форма полностью не помещается по высоте окна браузера, то нужно задать высоту в настройках блока с кодом виджета:

До и после задания высоты блоку с кодом виджета:

5. Вставка «старого виджета» в PopUp

Для отображения «старого виджета» в PopUp блоке T868 — «HTML-код в попапе» необходимо вставить его код:

и добавить к нему для задания высоты всплывающего окна, например, такую строчку кода:

Значение height (высоту блока в пикселях) вы можете отрегулировать по своему усмотрению.

Далее настроить показ PopUp при клике на кнопку или для блоков с триггерами.

В меню «Контент» указанных блоков вставьте скопированную ссылку на PopUp:

6. Вставка виджета через HTML-код формы в PopUp

Для вставки HTML-кода формы в PopUp блоке T868 — «HTML-код в попапе» необходимо добавить его код в «Контент» блока:

Затем настроить показ PopUp при клике на кнопку или для блоков с триггерами (аналогично описанному алгоритму выше).

Здравствуйте! При отправке данных через виджет, привязанный к кнопке на Тильде, поп-ап виджета не закрывается. Можно настроить его автоматическое закрытие или, ещё лучше, кастомизировать, чтобы посетитель видел что-то вроде "Спасибо за ваш заказ, подписывайтесь на наш канал"?

Добрый день! Подскажите, а как можно сделать переадресацию на страницу Спасибо, если на Тильду вставлен виджет Геткурс? В обработчике формы есть создание заказа и добавление в группу. Потом перекидывает на оплату сразу. А куда вставлять ссылку на страницу Спасибо?

Здравствуйте! Подскажите, можно ли как-то переместить этот текст в красной рамке ниже, сделать его над кнопкой? Может, какой-то css код есть, чтобы переместить его? Когда человек регистрируется, например, с телефона, этот текст не сразу виден на экране. Нужно отлистать вверх, чтобы увидеть его. А человек может подумать, что он зарегистрировался и закрыть страницу

Тильда связана с Геткурсом через форму регистрации на тренинг. Как в таком случае быть с оплатой курса? Человек получает ссылку на регистрацию на Геткурсе, регестрируется. Как ему оплатить курс для того, чтобы стали доступны уроки?

Читайте также: