---
title: "Поделиться пеном и встроить его на свой сайт"
description: "В редакторе появилась кнопка «Поделиться»: ссылка на пен и код для вставки на любую страницу. Встроенный пен остаётся живым — код в нём можно править и запускать."
url: https://penlab.space/blog/ru/share-and-embed
language: ru
section: "Обновления"
published: 2026-10-02T10:00:00Z
updated: 2026-10-02T10:00:00Z
translation: https://penlab.space/blog/share-and-embed
---

# Поделиться пеном и встроить его на свой сайт

В редакторе появилась кнопка «Поделиться»: ссылка на пен и код для вставки на любую страницу. Встроенный пен остаётся живым — код в нём можно править и запускать.

Пен обычно пишут не для себя: его показывают коллеге, прикладывают к статье, вставляют в урок. Раньше для этого был один способ — скопировать адрес из строки браузера. Теперь в шапке редактора есть кнопка **«Поделиться»** (Share), и способов два.

Кнопка работает у сохранённого пена. Пока пен новый и адреса у него нет, она неактивна — сначала его нужно сохранить.

## Ссылка

Первая вкладка — адрес пена и кнопка «Скопировать». По ссылке пен откроется у любого человека, аккаунт для этого не нужен: он увидит код, превью и консоль. Эта вкладка есть у всех, в том числе на чужом пене.

## Встраивание

Вторая вкладка — «Встроить» — есть у автора пена. В ней мы собираем блок, который будет показан на другом сайте:

- **Панели.** Пять переключателей: HTML, CSS, JS, Result и Console. Для статьи про CSS-анимацию хватит CSS и Result, для разбора алгоритма — JS и Console.
- **Высота** блока — от 200 до 1200 пикселей.
- **Предпросмотр.** Ниже сразу виден блок в том виде, в каком он появится на странице.

Остаётся нажать «Скопировать код» и вставить его в свою страницу. Код выглядит так:

```html
<iframe src="https://…/embed/42?show=css,result" title="Мой пен — Penlab"
  width="100%" height="420" loading="lazy" style="border:0"></iframe>
```

## Что увидит читатель

Встроенный пен — не картинка и не запись экрана. Это тот же редактор в миниатюре: код можно править, результат обновляется, в консоль можно ввести выражение. Читатель статьи меняет число в примере и сразу видит, что получилось.

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

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

## Нюансы

- По ссылке и во встроенном блоке открывается **последняя сохранённая версия**. Если в редакторе есть несохранённые правки, диалог об этом напомнит.
- Выбор панелей нигде не хранится — он записан в адресе внутри кода. Один и тот же пен можно встроить в двух местах с разными панелями.
- Просмотры из встроенного блока в счётчик пена не идут: считаются только открытия самого пена.
- Если автор удалит пен, на чужой странице вместо него появится «Пен не найден».

Попробовать можно на любом своём пене из [профиля](https://penlab.space/profile) или сначала собрать [новый](https://penlab.space/new).