Встраивание на другие сайты

Как показать конструктор «Багетка» прямо на странице вашего сайта — с вашими цветами и нужным набором кнопок.

Задача

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

Впервые встраиваете что-то на сайт? Есть подробная пошаговая инструкция со скриншотами — для Tilda, WordPress, Wix и обычных HTML-сайтов: сразу к вставке кода.
Самое короткое решение

Откройте страницу «Встроить конструктор», выберите размер и оформление, нажмите «Скопировать код» и вставьте его в нужное место на своём сайте. Занимает две-три минуты, регистрация не нужна.

Что получится

Как встроить: по шагам

  1. Откройте страницу «Встроить конструктор на свой сайт».
  2. Слева выберите ширину и высоту окна. Справа сразу виден предпросмотр — так конструктор будет выглядеть у вас.
  3. Отметьте, что убрать из окна: части интерфейса (заголовок, меню, панель инструментов, кнопки проекта, нижнюю строку), левую или правую колонку целиком либо отдельные блоки настроек в них.
  4. Выберите язык и оформление.
  5. Под предпросмотром нажмите «Скопировать код».
  6. Вставьте код на своём сайте в блок «HTML-код» (в Tilda — «Т123», в WordPress — «Произвольный HTML», в Wix — «Встроить HTML») и опубликуйте страницу.

Готовый код выглядит так (адрес и размеры подставляются автоматически):

<iframe src="https://artsnet.store/frame/app.html?embed=1&amp;hide=title,chat&amp;lang=ru"
        title="Конструктор рамок и паспарту «Багетка»"
        style="border:0;width:100%;max-width:100%;height:760px;"
        allow="camera; fullscreen; clipboard-write"
        loading="lazy"></iframe>

Параметры адреса (для продвинутых)

Окном управляют параметры после знака «?» в адресе https://artsnet.store/frame/app.html. Обычно их подставляет страница «Встроить конструктор», но можно менять вручную.

ПараметрЗначенияЧто делает
embed=1обязателенВключает режим встраивания: без установки приложения и без нашей аналитики.
hideЧерез запятую. Интерфейс: title, menu, toolbar, project, footer. Левая колонка: left (вся) или frames, baguette, photo, passepartout, params3d. Правая колонка: right (вся) или background, wall, exposition, chatУбирает части окна: заголовок, верхнее меню, панель инструментов холста, кнопки «Проект/Сохранить/Поделиться», нижнюю строку; в колонках — целиком колонку или отдельные блоки: «Рамы», «Багет», «Фотография», «Паспарту», «3D-параметры», «Фон», «Стена», «Экспозиция», «Проектный чат». Если убрать все блоки колонки, она исчезнет сама.
keyстрока emb_…Ключ встраивания: привязывает окно к вашему тарифу. Без ключа — бесплатный тариф.
langru, enЯзык интерфейса.
accentdefault, blue, green, purple, red, tealЦвет акцента.
radiussharp, default, roundedСкругления углов.
shadowflat, default, elevatedТени.
densitycompact, default, comfortableПлотность интерфейса (отступы).
fontdefault, system, inter, roboto, georgiaШрифт интерфейса.

Незнакомые значения игнорируются: окно просто останется стандартным. Сам холст (рамы, паспарту, стены) не зависит от оформления — оформление меняет только интерфейс вокруг него.

Вопросы и ответы

Это платно? Нужна ли регистрация?

Нет. Конструктор бесплатный, регистрироваться и получать ключи не нужно.

Что видят посетители моего сайта?

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

Куда попадают фото и проекты посетителей?

Никуда, кроме их собственного устройства. Изображения обрабатываются в браузере посетителя и не отправляются ни на наш сервер, ни на ваш. Результат посетитель сохраняет сам: файлом проекта или изображением (см. Сохранение и экспорт).

Следите ли вы за посетителями моего сайта?

Нет. Мы не используем cookie, не запоминаем посетителей и не подключаем Яндекс.Метрику во встроенном окне. Чтобы учитывать тариф и понимать, как используется конструктор, окно один раз при загрузке отправляет нам обезличенные сведения: адрес вашего сайта, язык, тип экрана (телефон или нет), выбранные настройки окна и — по мере работы — факты вроде «выбрали фото» или «сохранили проект» (без содержимого фото и проектов). Если в браузере посетителя включён запрет отслеживания, остаётся только проверка тарифа. Свою аналитику на странице вы настраиваете сами.

Что такое ключ и тарифы?

Без ключа окно работает на бесплатном тарифе: доступна основная часть блоков (рамы, багет, фотография, паспарту, фон), внизу окна показывается небольшая надпись «Сделано в конструкторе «Багетка»», а число показов в месяц ограничено. Ключ (строка вида emb_…) мы выдаём по заявке: он открывает блоки вашего тарифа, убирает надпись и увеличивает лимит. Ключ привязан к вашему сайту и на другом сайте не сработает. Свой ключ вставьте в поле «Ключ встраивания» на странице генератора — он попадёт в код автоматически. Запросить ключ: контакты.

Можно ли получать проекты посетителей себе, например по почте?

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

Работает ли камера и загрузка фото?

Загрузка фото и открытие проектов работают. Съёмка камерой работает, если в коде оставлено разрешение allow="camera" (по умолчанию оставлено) и посетитель разрешил доступ к камере в браузере.

Работает ли встроенный конструктор без интернета?

Нет: встроенное окно всегда загружает актуальную версию с нашего сайта. Работа без интернета доступна только у установленного приложения — см. Установка приложения.

Как это выглядит на телефоне?

На смартфоне окно занимает всю ширину блока и переключается на мобильный вид конструктора. Дайте ему высоту не меньше 600 пикселей либо выберите «Адаптивная» высота в настройке.

Можно ли использовать своё название или убрать логотип?

Название и логотип в верхней части можно скрыть параметром hide=title. Замена на ваши в этой версии не предусмотрена.

Частая ошибка

Окно на странице пустое или показывает «отказано в подключении». Проверьте, что ваш сайт открывается по https://, что редактор сайта не вырезал тег iframe при сохранении (в некоторых конструкторах сайтов такой тег запрещён) и что вы скопировали код целиком, с закрывающим тегом.

Далее: настроить и скопировать код · установка приложения · глоссарий · к оглавлению