Setting Up Custom Branding
MyWebAR lets you personalize the look and feel of your AR experience, making it unique and aligned with your brand.
Custom branding is available on the Ultimate, Ultimate Plus and Phygital Marketing plans.
Compare our premium plans and their features
Compare our premium plans and their features
Custom Welcome Screen
The welcome screen is your first impression in the webAR journey. It's the landing page users see before diving into the augmented reality experience. This screen plays a crucial role in setting expectations, obtaining user permissions, and ensuring a smooth transition into the AR world.
The key element of the welcome screen is the Launch button. Tapping this button initiates the webAR experience and requests access to the device's camera and motion sensors.
The key element of the welcome screen is the Launch button. Tapping this button initiates the webAR experience and requests access to the device's camera and motion sensors.
Since a webAR experience requires the user to grant camera and motion sensors permissions, it is not possible to completely disable the welcome screen or remove the launch button.
You can customize the following settings:
- Disabling the Custom Welcome Screen toggle reverts the welcome screen to the default MyWebAR-branded variant.
- Uploading a custom logo: You can upload your own logo to replace the MyWebAR logo on the launch and loading screen of your experience.
For optimal logo to screen size ratio we recommend using an image with the resolution of 600x260.
You can use an image in JPG or PNG format.
You can use an image in JPG or PNG format.
- Changing the background color: Change the background color of the launch and loading screen to match your brand identity.
- Changing the button color: Change the launch button color to match your brand identity.
- Changing the button text color: Change the button text color to match your brand identity.
- Changing the button text: Change the button text to something more specific to your project or experience.
Loading Screen
When users begin the experience by tapping the launch button on the welcome screen, they will enter a loading phase. During this time, the experience automatically downloads the necessary resources, such as images, videos, sounds, and 3D models, from the server. While these resources download in the background, a loading screen will be displayed.
The amount of time it takes to complete the download depends on two main factors: the total size of all assets in the experience and the user's internet connection speed.
The amount of time it takes to complete the download depends on two main factors: the total size of all assets in the experience and the user's internet connection speed.
You can customize the following settings:
- If you disable the loading screen toggle, the camera will open immediately after a user grants all necessary permissions. However, the viewer might see items appear gradually as they load in the background. For a smoother user experience, it is recommended to keep the loading screen toggle enabled.
- Uploading a custom loading animation: You can upload your own loading animation to replace default one.
To optimize the loading time, we recommend using an image with the resolution of 256x256.
You can use a still image in JPG or PNG format or an animated image in APNG or GIF format.
You can use a still image in JPG or PNG format or an animated image in APNG or GIF format.
- Changing the loading text color: Change the loading text color to match your brand identity.
- Changing the loading text: Liven up your loading screen with a personalized message.
Camera Watermark
Camera watermark feature lets you overlay a custom image or text on top of your camera view in the AR experience
You can customize the following settings:
- Enabling or disabling the watermark using the toggle at the top of the panel.
- Uploading a custom watermark image: You can upload your own logo or any other image to use as a watermark that will be visible on top of the camera feed at all times
For optimal watermark to screen size ratio we recommend using an image with the resolution of 600x175.
You can use a still image in JPG or PNG format or an animated image in APNG or GIF format.
You can use a still image in JPG or PNG format or an animated image in APNG or GIF format.
- Changing the watermark position: Change the position of the watermark at the top or at the bottom of the screen.
- Changing the watermark opacity: Control the transparency of your watermark using the opacity setting to achieve the desired subtlety.
- Assigning a Hyperlink: Add a hyperlink to your watermark, allowing viewers to click on it and be directed to a specific website or landing page.
Helper Icon and Message
Add a clear and concise message along with a helpful icon to guide users on how to activate the AR experience.
You can customize the following settings:
- Enabling or disabling the helper message and icon using the toggle at the top of the panel.
- Uploading a custom helper icon: You can upload your own illustration that will instruct the user how to activate the experience.
For optimal helper to screen size ratio we recommend using an image with the resolution of 512x512.
You can use a still image in JPG or PNG format or an animated image in APNG or GIF format.
You can use a still image in JPG or PNG format or an animated image in APNG or GIF format.
- Changing the hint text: Add a personalized message to guide users on how to activate the AR experience.
Object Placeholder
Object placeholders are temporary images that appear in place of objects that haven't finished loading yet. They are visible to the user only if you disabled the loading screen in the branding settings.
You can customize the following settings:
- Enabling or disabling the object placeholder using the toggle at the top of the panel.
- Uploading a custom object placeholder: You can upload your own image that will be displayed in place of the objects that are being loaded.
Multiscene Branding
In a Multiscene project, the branding will automatically reflect the settings of the very first experience included into it.
To confirm which experience is in the first position, you can head over to the Multiscene tab in your MyWebAR dashboard.
To confirm which experience is in the first position, you can head over to the Multiscene tab in your MyWebAR dashboard.
Simply click on a specific multiscene experience you're working on to expand its contents and see the order of the included experiences.
Related articles
Connecting a Custom Domain
Use a custom domain to personalize the link of your webAR experience
Embedding AR into Apps and Webpages
Embed your AR experiences into existing webpages or native apps
Using External Storage
Import files from an external storage to get unlimited views for your experiences