# Web Customizer

You can personalize all the WebAR experiences you create through the platform by adding buttons, actions, audio, and a custom background.

{% hint style="success" %}
The Customize page is available in the [paid](https://www.echo3d.com/pricing) plans. 
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=IuFDrLP_I00>" %}

Open each menu to add buttons and logos on different corners, add a background picture and music, allow for snapshots and saving user location for each asset. Switch between assets for which you want to customize the WebAR experience by clicking the "**Swap Asset**" Button.

<figure><img src="/files/9brm553ZDFP6rrGfOFwm" alt=""><figcaption></figcaption></figure>

This allows you to generate WebAR experiences that are more engaging, and interactive, and include your branding:

![](/files/-MVhy8BUH5bk2Ow-ouGP)

### Adding Buttons, Actions, and a Logo

Use the Buttons & Logos section to introduce clickable buttons, actions, and your own logo to the WebAR experience.&#x20;

You can set up to nine (9) UI elements on the screen at once (on the **top right** corner, **top** center, **top left** corner, **middle right**, **center**, **middle left**, **bottom right** corner, **bottom** center, and/or **bottom left** corner).

You can set default buttons for all assets in your collection through the "Collection Default" tab. You also set buttons for individual assets through the "Asset Specific" tab.&#x20;

{% hint style="info" %}
If both a "Collection Default" and "Asset Specific" button are set for a specific location, the "Asset Specific" button will override the "Collection Default" button for that asset.
{% endhint %}

<figure><img src="/files/njgS06BQYDtG1WHYOVy1" alt="" width="563"><figcaption></figcaption></figure>

Options include:

| **Logo**         | Image source, URL                                      | Redirects to a custom URL                             | Your company logo that redirects a user to your website                   |
| ---------------- | ------------------------------------------------------ | ----------------------------------------------------- | ------------------------------------------------------------------------- |
| **AR Viewer**    | Button text                                            | Opens the camera and shows the model in AR.           | A "See in AR" button that redirects the user to an AR experience          |
| **Link**         | Button text, URL                                       | Redirects to a custom URL                             | `Buy now` button that redirects a user to buy the product on your website |
| **Text**         | Button text, message                                   | Shows a custom message                                | `Learn more` button that shows more information about a product           |
| **Social Media** | Facebook URL, Instagram URL, Twitter URL, LinkedIn URL | Redirects to a social media page                      | You company's social media pages                                          |
| **WebAR QR**     | N/A                                                    | Expands a QR Code with a link to the WebAR experience | QR Button redirects viewers to the WebAR Experience                       |
| **Remove**       | N/A                                                    | None. Removed the button.                             |                                                                           |

### Viewing Click Analytics and Click-through-Rates

When buttons are configured, the number of button clicks and the overall click-through-rate (CTR) will display alongside each button.

<figure><img src="/files/gXC7gfkM6wEpToAmIQLs" alt="" width="563"><figcaption></figcaption></figure>

### Setting a Background Image

Use the Background section to set a background image for the WebAR experience. You can **select a color or upload images from your computer, Google Drive, or from your existing collections** (`.png` , `.jpg`, `.hdr`). You can set a default background **for all assets in your collection through the "Collection Default" tab**. You also set backgrounds for individual assets through the "Asset Specific" tab.&#x20;

{% hint style="info" %}
If both a "Collection Default" and "Asset Specific" background are set, the "Asset Specific" background will override the "Collection Default" background for that asset.
{% endhint %}

<figure><img src="/files/ctEQ6GuDNS4jYZ4Uverq" alt="" width="563"><figcaption></figcaption></figure>

The image will only appear on the preview screen prior to clicking the `See in AR` button.

<figure><img src="/files/8yGzOVmCdifJWWgtKInH" alt=""><figcaption></figcaption></figure>

Click the delete button<img src="/files/65wwHTnKzWSl6jOCNc5U" alt="" data-size="line"> to remove the background.

### Adding Music

Use the Music section to add an audio file to serve as background music for the webAR experience. You can upload music from your computer, Google Drive, or from your existing assets (`.mp3` or `.wav`). You can set default music **for all assets in your collection through the "Collection Default" tab** or set music for individual assets through the "Asset Specific" tab.

{% hint style="info" %}
If both a "Collection Default" and "Asset Specific" music are set, the "Asset Specific" background will override the "Collection Default" background for that asset.
{% endhint %}

Audio will only start playing after a user interaction of any type (screen touch gesture, click, etc.).

<figure><img src="/files/a2cWubDlVmXkC49qpj3i" alt=""><figcaption></figcaption></figure>

Post upload, you can click the delete button<img src="/files/65wwHTnKzWSl6jOCNc5U" alt="" data-size="line"> to remove the music, resulting in an experience with no audio..

### Including Camera Capture Functionality

Toggle "Allow snapshots" to allow **Android** camera capture of the WebAR experience. It will allow viewers to grab a snapshot of the AR scene. **iOS** screenshots and camera capture are enabled by default.&#x20;

<figure><img src="/files/tQCPd4e8KiIebYX1GOQ3" alt=""><figcaption></figcaption></figure>

### Save User Location

Enabling "Save user location" will prompt viewers of the WebAR experience to approve sharing their location with you. If permitted, this location information will be available on the [Users Page](broken://pages/-M41xF_dM7p7C2feyQaA).![](/files/AdpXKAZXEOf9IJdQrdoq)

<figure><img src="/files/VzXir4KMIILyMhfahsHi" alt=""><figcaption></figcaption></figure>

### Sharing Links with Others

Use the Sharing section to copy the link to the WebAR experience, share it to other websites, or get a QR code for the WebAR experience.&#x20;

<figure><img src="/files/B5gC4ZS6B6LEC62sQN2z" alt="" width="563"><figcaption></figcaption></figure>

The QR Code button <img src="/files/1ne4eABsa4mzijQUkMUZ" alt="" data-size="line"> will open a dialog with three QR codes: one with a link to the WebAR experience, one with a link to see your asset on an image in AR, and one QR Code to view your asset in AR on a face.&#x20;

<figure><img src="/files/oltpqj7gXi8ksO8OmLvX" alt="" width="563"><figcaption></figcaption></figure>

### Connecting a Custom Domain

Use the Custom Links section to contact our team and connect your own domain to the WebAR experience. **This means that viewers will be able to access the experience from your company website.**

<figure><img src="/files/7cWj5PpMxIw0g2hFGgAb" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
[Contact us](mailto:sales@echo3D.com) to discuss our custom offerings.
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=IuFDrLP_I00&ab_channel=echo3D>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.echo3d.com/web-console/manage-pages/customize-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.