Skip to main content
GenToonGenToon

Как встроить вебтун

Добавьте вебтун GenToon в свой блог или на сайт, и читатели смогут пролистать все кадры прямо там, не уходя с вашей страницы.

Как это выглядит

Это настоящий плеер для встраивания. Попробуйте пролистать кадры.

Как это сделать

  1. Нажмите «Встроить» в публикации

    Кнопка находится под публикацией с вебтуном, рядом с кнопкой «Поделиться».

  2. Выберите размер

    Выберите один из вариантов: Маленький, Обычный или Большой. Если колонка на странице узкая, включите «Адаптивный код». Выбранный вариант сразу видно в предпросмотре.

    В настройке «Способ чтения» можно выбрать «Листать по кадрам» (по умолчанию) или «Прокручивать вниз». При прокрутке вниз чтение всегда начинается с первого кадра.

  3. Нажмите «Копировать код» и вставьте его

    Вставьте его в HTML-редактор своего блога или сайта, и готово.

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

Куда вставить код

WordPress на собственном хостинге
Просто вставьте ссылку на публикацию, и плеер появится сам. Воспользуйтесь кнопкой «Копировать ссылку» в окне встраивания.
Блоги и сайты, где можно вставить HTML
Вставьте код, скопированный кнопкой «Копировать код», в HTML-редактор.
Поля, куда можно ввести только адрес
Если поле принимает только адрес, укажите адрес плеера. Он выглядит как строка ниже, а ID в конце совпадает с последней частью адреса публикации.
https://www.gentoon.ai/embed/post/<id-публикации>
Нажмите «Копировать ссылку для встраивания» в окне встраивания, чтобы скопировать этот адрес.

В остальных местах всё зависит от того, разрешает ли сайт сторонний HTML или iframe. Если нет, скопируйте ссылку кнопкой «Копировать ссылку» и поделитесь ею.

Полезно знать

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

Для разработчиков

Если ваш сервис поддерживает oEmbed, для показа плеера достаточно ссылки на публикацию.

Эндпоинт oEmbed

Передайте адрес публикации в параметре url. Форматы: json и xml, а maxwidth и maxheight уменьшают плеер с сохранением пропорций. На страницах публикаций есть теги link для обнаружения oEmbed.

https://www.gentoon.ai/api/oembed

GET https://www.gentoon.ai/api/oembed?url=https%3A%2F%2Fwww.gentoon.ai%2Fcommunity%2Fposts%2F9fa0016a-1192-4a72-afa8-d0ffad90c315&format=json
GET https://www.gentoon.ai/api/oembed?url=https%3A%2F%2Fwww.gentoon.ai%2Fcommunity%2Fposts%2F9fa0016a-1192-4a72-afa8-d0ffad90c315&format=xml

Коды ответа: 200 OK · 404 публикации не существует или это не адрес публикации GenToon · 401 публикация существует, но её нельзя встроить (например, закрытые публикации или доступные только в приложении) · 501 формат, отличный от json и xml.

<iframe src="https://www.gentoon.ai/embed/post/9fa0016a-1192-4a72-afa8-d0ffad90c315" width="400" height="644" title="Как встроить вебтун · GenToon" frameborder="0" scrolling="no" loading="lazy" allow="clipboard-write; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="border:0;max-width:100%"></iframe>

Адрес плеера и параметры

https://www.gentoon.ai/embed/post/9fa0016a-1192-4a72-afa8-d0ffad90c315?hl=en&theme=dark&start=2&layout=scroll
hl
Задаёт язык (например, en или ja). Без него плеер использует язык браузера читателя.
theme
Укажите dark, чтобы плеер был тёмным.
start
Начинает показ с кадра N (счёт с 1).
layout
Укажите scroll, чтобы читать кадры один за другим по вертикали. Без него читатель листает по одному кадру. Код для встраивания через oEmbed всегда показывает по одному кадру.

Кнопка полноэкранного режима появляется, только если у iframe есть allowfullscreen (в нашем коде для встраивания он есть). WordPress удаляет этот атрибут, а Safari на iPhone не поддерживает полноэкранный режим, поэтому там кнопки нет. Кнопка субтитров (CC) появляется, только если язык читателя отличается от языка диалогов, и при нажатии один раз загружает перевод.

Сообщения о высоте (postMessage)

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

Формат по умолчанию

{"type":"gentoon:embed:resize","postId":"9fa0016a-1192-4a72-afa8-d0ffad90c315","height":644}

Формат Embedly и Iframely

JSON.stringify({"src":"https://www.gentoon.ai/embed/post/9fa0016a-1192-4a72-afa8-d0ffad90c315","context":"iframe.resize","height":644,"domains":"all"})

Формат WordPress (если адрес заканчивается на #?secret=)

{"message":"height","value":644,"secret":"<secret>"}

Ответы плеера не устанавливают файлы cookie и помечены как noindex, поэтому поисковые системы их не индексируют.

Вопросы

Если встраивание не работает или вы хотите стать нашим партнёром, напишите нам на service@gentoon.ai.

Вернуться в раздел помощи