# Брендирование проекта и его настройки

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

Вы также можете настроить внешний вид QR-кода, SEO-оптимизацию проекта.

## Брендинг

Сначала откройте нужный проект, щелкнув по нему, или [создайте новый](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/s-chego-nachat/sozdanie-proekta-v-mywebar). Откроется сцена.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FkytNV5ISL3ntFwHhFnht%2Fimage.png?alt=media\&token=ed4366a8-8cdf-47d9-9017-63b44cddbe56)

Чтобы работать с брендингом проекта, перейдите на вкладку **Branding**, нажав на кнопку **Branding** на левой боковой панели.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FguLwiuhb04hF6wvWgkmC%2FBranding_1.jpg?alt=media\&token=4fde9533-85ac-41d9-91bc-76853877bc17)

Откроется страница по работе с брендингом проекта.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FlIkspr4tgwGGWAWjBOro%2Fimage.png?alt=media\&token=961203ae-340a-41d2-a676-be8fd1f213de)

На этой странице можно настроить внешний вид приветственных сообщений, анимации загрузки и так далее.

* **Welcome Screen** — изображение, которое появляется при загрузке содержимого сцены (сразу после щелчка по ссылке),
* **Loading Screen** — анимация загрузки, помогающая пользователю понять, что его страница загружается,
* **Camera Watermark** — водяной знак с логотипом,
* **Helper Message and Icon** — текст и изображение, рассказывающие пользователю, что нужно сделать, чтобы увидеть контент дополненной реальности,
* **Object Loading Placeholder** — 3D-заглушка, которая видна только при загрузке объекта.

Разберем каждую настройку по порядку.

### Welcome Screen

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F9ybi4uo46tFKo2hfrNCl%2FBranding_2.jpg?alt=media\&token=08b1e427-c82e-446f-982f-b7b8ec5e0c9f)

Появятся настройки для экрана приветствия.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F6BiVEQ8DkPSRX8UQ3sqX%2FBranding_3.jpg?alt=media\&token=7b9852a2-83bc-4849-970f-6ee3c66cee89)

Чтобы изменить изображение, нужно нажать на **Change** и загрузить файл с вашего устройства.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FJeNYJeDc54pxSB62OILW%2FBranding_4.jpg?alt=media\&token=ce1097d2-7d7e-491e-b441-a8c25bc373cd)

Логотип будет изменен на новый.

{% hint style="info" %}
Лучше всего загружать логотип в формате **.png** с прозрачным фоном. Сам фон экрана можно настроить с помощью параметра **Background Color**, сделав его однотонным или добавив градиент.
{% endhint %}

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FMpq07TSMuVQGd4UMZ5T5%2FBranding_5.jpg?alt=media\&token=cdc04c18-c6a0-44fb-a6c9-a5697d7759dd)

Вы также можете настроить цвет фона, изменив параметр **Background Color**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FPPrO6LuwsHoryN9QSP2g%2FBranding_6.jpg?alt=media\&token=d8e4dc56-7dd1-404f-a8fa-f5f9271afd2f)

Кроме того, вы можете настроить кнопку запуска сцены. Вы можете изменить настройки цвета кнопки **Button Color**, цвета текста **Text Color** и самого текста на кнопке **Button Text**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F3w4LiaQi9oMsOpePyJT2%2FBranding_7.jpg?alt=media\&token=e9393a38-bbb7-40ff-8f80-40828500292e)

Чтобы сохранить настройки, нажмите на кнопку **Save** в правом нижнем углу.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FbBtHRuQbGb89thUrpkCR%2FBranding_10.jpg?alt=media\&token=ad084cc9-bc7c-4cb7-8ce3-dcc99b7cc0a5)

### **Loading Screen**

Нажмите переключатель, чтобы начать настройку экрана загрузки.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F6pppulsx7yF0RIe4sULr%2FBranding_8.jpg?alt=media\&token=eb77454b-520f-4ec7-9fa7-71cabe0d0755)

Появятся настройки загрузочного экрана.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FzDBsnfpH8FLoQ9OK9HuQ%2FBranding_9.jpg?alt=media\&token=4ba5eff0-7439-4aa7-9c02-439bd59f8111)

Чтобы изменить прелоадер, необходимо нажать на **Change** и загрузить файл с вашего устройства.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FIlmHUmcRsTzddihOoeZy%2FBranding_11.jpg?alt=media\&token=525fbe94-c9db-4309-a372-a6d8ce2fbfdc)

{% hint style="info" %}
Хорошим предзагрузчиком является анимированный файл **.gif** с прозрачным фоном.
{% endhint %}

Вы также можете изменить сам текст **Loading Text** и его цвет **Text Color**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F0Sn1tINX68bWpFNHayIg%2FBranding_12.jpg?alt=media\&token=b3cd3eda-247d-4a17-bf47-dd0c569b3a34)

Не забудьте нажать кнопку **Save**, чтобы сохранить все внесенные изменения.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F5o68qgP9oyx4WmanuyCi%2FBranding_13.jpg?alt=media\&token=5d336a3a-bc7e-45cb-974d-bd23d85aaa93)

### **Camera Watermark**

Чтобы добавить водяной знак к сцене, нажмите на переключатель.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FIDGDduvIbeX6tWG2yAPx%2FBranding_14.jpg?alt=media\&token=bfe9397c-d221-40d7-a74d-abbc575b651f)

Чтобы загрузить изображение для водяного знака, нажмите кнопку \*\*Change \*\* и выберите файл с вашего устройства.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FmiKWY52olPhvPiOS9BjL%2FBranding_16.jpg?alt=media\&token=f2421f0a-2aad-4ec0-8869-f9cfc725b6b9)

После этого ваше изображение окажется поверх сцены дополненной реальности.

{% hint style="info" %}
Хорошим изображением для водяного знака будет логотип с прозрачным фоном в формате **.png**.
{% endhint %}

Вы также можете настроить расположение водяного знака, изменив параметр **Position**, а параметр **Opacitiy** отвечает за степень прозрачности водяного знака.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FWF1hjzqUCXmeR2VZJUjN%2FBranding_17.jpg?alt=media\&token=444c9438-eb16-4658-9f82-675aa89b6a48)

Вы также можете сделать водяной знак кликабельным, добавив ссылку в параметр **Hyperlink**. Нажав на изображение, пользователь перейдет на сайт, указанный в ссылке.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F5qdJAZHOlOTDeIzjdX2i%2FBranding_18.jpg?alt=media\&token=333258ce-cfcc-4352-9910-5fc8dda07249)

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

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fogk0L65qyQWWOzfOxrJV%2FBranding_19.jpg?alt=media\&token=afad21bb-b428-4358-b7db-831aa9688f76)

### **Helper Message and Icon**

Чтобы начать настройку изображения и текста хелпера, нажмите на переключатель.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FCxo4r0vKMeg6v4NMjVO6%2FBranding_20.jpg?alt=media\&token=f9401324-82e2-4003-ae35-86d0d0907823)

Чтобы загрузить изображение хелпера, нажмите **Change** и выберите файл с вашего устройства.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F7QHEJyxirhzYEkpO84Zk%2FBranding_22.jpg?alt=media\&token=dc50a130-6666-42e4-adf5-0665302dd99f)

{% hint style="info" %}
Хорошим изображением для подсказки будет изображение с прозрачным фоном в формате **.png**.
{% endhint %}

Аналогичным образом можно задать текст в поле **Hint Text**, который должен подсказать пользователю, что ему нужно сделать, чтобы увидеть содержимое дополненной реальности.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FnsY9sdupLFVwYBsPmmV6%2FBranding_23.jpg?alt=media\&token=e9c628ec-4c3d-4a79-90c2-3b870823c667)

Последний шаг — сохранить настройки, нажав **Save**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FGopj0XeydDrN63uCWrvI%2FBranding_24.jpg?alt=media\&token=ddf96a1d-6636-4fdc-b54b-7de740218d02)

### **Object Loading Placeholder**

Чтобы изменить внешний вид 3D-заглушки загружаемого объекта, нажмите на переключатель.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FSHTXuE7hVzgFJpbhGKhm%2FBranding_25.jpg?alt=media\&token=1202ccc9-2b4d-472a-9628-d98ff775e962)

Чтобы загрузить 3D-заглушку, нажмите на **Change** и выберите файл с вашего устройства.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F791VFCv7qSiji6aihPnB%2FBranding_26.jpg?alt=media\&token=870dde5a-1741-4ee8-a6c1-2ee5b56034a1)

Также в поле **Hint Text** можно добавить текст для 3D-заглушки.

После настройки не забудьте нажать кнопку **Save** в правом нижнем углу страницы.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FCjlBbpMcNsOvgCDvpAV7%2FBranding_27.jpg?alt=media\&token=8fc3658c-1a90-411a-bf21-81ffdb507902)

## Настройки проекта

Для работы с настройками проекта перейдите на вкладку **Settings**, нажав на кнопку с левой стороны.

Настройки проекта разделены на четыре блока:

* Основные настройки,
* Настройки QR-кода,
* Расширенные настройки проекта,
* Настройки SEO-оптимизации.

### Основные настройки

Здесь находятся настройки названия проекта **Project Name** и кастомизация ссылки на дополненную реальность **Project URL**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FKltPahc6XGZvBolJ4Vyp%2FBranding_28.jpg?alt=media\&token=66faa9d7-3f52-4d9c-9243-37e8470b1d05)

### Настройка QR-кода

Настройки QR-кода позволяют кастомизировать внешний вид QR-кода, который будет являться как ссылкой на дополненную реальность, так и маркером для трекинга QR-кода.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FOVKu3mPYDXlwNMdt3ztX%2FBranding_29.jpg?alt=media\&token=429748f4-af91-4e72-bc71-ee4ac521679d)

Нажав на кнопку <img src="https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FsZnff0ffTbqCNHuy5swG%2Fimage.png?alt=media&#x26;token=75cef9c9-566d-4280-9a46-6e4bec1344e7" alt="" data-size="line">, вы можете загрузитьQR-код в хорошем качестве с правильным отступами.

Поля **Shape**, **Body Shape**, **Eye Shape** отвечают за форму отдельных элементов QR-кода. Поле **Shapes** позволяет управлять цветом элементов и фона.

Также можно загрузить свой логотип, нажав на кнопку<img src="https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FTE8SXs4KeJG3ygeOHQBT%2Fimage.png?alt=media&#x26;token=5d51e8d7-0293-493f-8388-0cbc1b6765fc" alt="" data-size="line">.

Если вы хотите вернуться к исходным настройкам QR-кода, в верхней части устройства необходимо нажать кнопку <img src="https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FZ7DgDJBNl4uDrq6axrNB%2Fimage.png?alt=media&#x26;token=4b6e3ce5-c2ff-479e-b517-4cf838d79343" alt="" data-size="line">.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2F9t8oocwoF7Um2CIEonSi%2FBranding_30.jpg?alt=media\&token=269074ef-c6d0-47a1-bf53-35aadbb22858)

### Расширенные настройки

В блоке расширенных настроек можно управлять множеством параметров, влияющих на сцену.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2Fzhfp7GQVOcvgA52BZ7MA%2FBranding_31.jpg?alt=media\&token=be510105-e5f1-4335-8a7e-eee5313c2d4e)

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

* **Enable camera mode** — добавляет кнопку, при нажатии на которую будет сделан снимок.
* **Enable Scene Loading Animation** — включает/отключает отображение анимации загрузки сцены ([#loading-screen](#loading-screen "mention")).
* **Enable Object Loading Animation** — включает/отключает отображение 3D-заглушки при загрузке объекта ([#object-loading-placeholder](#object-loading-placeholder "mention")).
* **Fullscreen Mode (if supported)** — включает/отключает запуск сцены дополненной реальности в полноэкранном режиме.
* **Enable Usage Analytics** — включает/отключает сбор аналитических данных (информацию о работе с аналитикой проекта смотрите в статье [analitika-proektov](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/sozdanie-proektov-webar/analitika-proektov "mention")).
* **Show Marker-Realted Hints** — включает/отключает отображение подсказок ([#helper-message-and-icon](#helper-message-and-icon "mention")).
* **Sharing options** — включает/отключает кнопки "поделиться" при использовании **Camera Mode**.
* **Use HDR Maps** — позволяет загружать карту окружения HDR.
* **Change Camera in Use** — позволяет выбрать камеру  устройства (передней или задней), которая будет использоваться при просмотре дополненной реальности.
* **Change Scene Scale** — позволяет управлять масштабом сцены (1 — масштаб по умолчанию).

{% hint style="info" %}
При использовании [#treking-izobrazhenii](https://mywebar.gitbook.io/mywebar-knowledge-base/yazyk-ru-1/tipy-proektov#treking-izobrazhenii "mention") в расширенных настройках появляется дополнительная настройка для изменения маркера изображения.
{% endhint %}

### Настройки SEO-оптимизации

Управление настройками **SEO**-оптимизации.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FQizQlf8GVaV5QwSZ7anT%2FBranding_32.jpg?alt=media\&token=f907c70f-dab8-4500-a447-83e590af71a8)

Вы можете изменить заголовок страницы **Webpage Title**, добавить ключевые слова в поле **Keywords**, добавить описание страницы **Project description** и добавить иконку **Favicon**.