Как добавить интеграцию Wall Art на сайт
Как добавить домен и настроить AR-просмотр, чтобы ваши постеры выглядели правильно.
1. Перейдите в личный кабинет и выберите рабочее пространство Постер • Все платформы.
2. В личном кабинете добавьте ваш домен — впишите в поле ссылку на ваш сайт. Например: web-site.shop
3. На странице появится скрипт и параметры элемента для копирования, которые нужно будет добавить на ваш сайт.
2. В личном кабинете добавьте ваш домен — впишите в поле ссылку на ваш сайт. Например: web-site.shop
3. На странице появится скрипт и параметры элемента для копирования, которые нужно будет добавить на ваш сайт.
Скрипт
Нужен, чтобы Vizbl Wall Art мог запускаться на вашем сайте. Вы его получите в таком виде:
Нужен, чтобы Vizbl Wall Art мог запускаться на вашем сайте. Вы его получите в таком виде:
<script defer src="https://cdn.neurodyn.ai/@neurodyn/room-viewer/dist/room-viewer.embed.min.js"></script>Этот скрипт нужно добавить на сайт перед тегом </header>.
Параметры элемента
Эти параметры нужно добавить в элемент сайта, по нажатию на который будет открываться примерка картин Wall Art. Вы его увидите в таком виде:
Параметры элемента
Эти параметры нужно добавить в элемент сайта, по нажатию на который будет открываться примерка картин Wall Art. Вы его увидите в таком виде:
<button
type="button"
data-neurodyn-room-viewer-dialog
data-neurodyn-room-viewer-type="poster"
data-neurodyn-room-viewer-src="https://placehold.co/800x1200.png"
data-neurodyn-room-viewer-name="Sample Print"
data-neurodyn-room-viewer-width="1"
data-neurodyn-room-viewer-height="1.5"
>
Посмотреть в помещении
</button>Из всех параметров вам нужно отредактировать только четыре:
Если в вашем магазине высота и ширина картин указаны милиметрах или сантиметрах, то их нужно перевести в метры. Например, если размеры картины 70×120 миллиметра, то в параметрах это нужно указать так:
Высота и ширина в параметрах не должна учитывать раму. В этих полях нужно указать только размер изображения, чтобы AR-примерка сработала точнее.
Эти параметры не меняйте и не убирайте — если они будут настроены неправильно, то виджет не будет запускаться:
Также вы можете вписать в элемент дополнительные параметры, но они не обязательны — виджет будет работать и без них:
Итоговый элемент на сайте может выглядеть вот так:
- data-neurodyn-room-viewer-src — ссылка на ваше изображение в магазине.
- data-neurodyn-room-viewer-name — название вашего продукта.
- data-neurodyn-room-viewer-width — реальная ширина в метрах.
- data-neurodyn-room-viewer-height — реальная высота в метрах.
Если в вашем магазине высота и ширина картин указаны милиметрах или сантиметрах, то их нужно перевести в метры. Например, если размеры картины 70×120 миллиметра, то в параметрах это нужно указать так:
- Data-vizbl-room-viewer-width = “0.7”
- data-vizbl-room-viewer-height = “1.2”
Высота и ширина в параметрах не должна учитывать раму. В этих полях нужно указать только размер изображения, чтобы AR-примерка сработала точнее.
Эти параметры не меняйте и не убирайте — если они будут настроены неправильно, то виджет не будет запускаться:
- Data-neurodyn-room-viewer-dialog
- data-neurodyn-room-viewer-type="poster"
Также вы можете вписать в элемент дополнительные параметры, но они не обязательны — виджет будет работать и без них:
- Data-neurodyn-room-viewer-language — язык интерфейса, доступны en и ru.
- Data-neurodyn-room-viewer-dimension-unit — единицы измерения, которые будет видеть пользователь — по-умолчанию показывают дюймы. Доступны m, cm и in.
Итоговый элемент на сайте может выглядеть вот так:
<button type="button" data-neurodyn-room-viewer-dialog data-neurodyn-room-viewer-type="poster" data-neurodyn-room-viewer-src="https://placehold.co/800x1200.png" data-neurodyn-room-viewer-name="Sample Print" data-neurodyn-room-viewer-width="1" data-neurodyn-room-viewer-height="1.5">
Посмотреть в помещении
</button>