Updated on May 31, 2023

Docy Child

webAR API

Estimated reading: 6 minutes
The WebAR Studio API empowers developers to create unique and immersive web AR experiences that align with their brand or specific needs, without the need for extensive coding.

With the webAR low-code API, you can easily modify the look and feel of your existing WebAR experience. Whether you want to change the background color, add your own logo, or replace specific models in your AR scene, our API has got you covered. Customize any element of the landing pages, experience UI, and AR scene models by passing custom values via URL parameters.

To make it even more convenient for you, our API supports both absolute and relative paths, enabling you to take full advantage of the webXR.tools asset manager and delivery systems. Simply upload your assets to the project using the asset manager, and the API will load them relative to the baseURL when you pass only the asset name.

All parameters accept either absolute paths or relative paths. Relative paths enable teams take advantage of the webXR.tools asset manager and asset delivery systems. To use relative assets, upload all assets to project using the asset manager. Then in the API pass only the asset name, the API will load the asset relative to the baseURL.

Landing Pages

Customize the introduction and desktop landing pages of your WebAR experience using our API. Set background images or colors, adjust text colors, and choose whether to skip the intro or not. You can also add your own content image and call-to-action button.

Intro

Customize the main landing page of your WebAR experience. Set background images or colors, adjust text colors, and choose whether to skip the intro or not. You can also add your own content image and call-to-action button.
Structure
   
   intro-<attribute>
   
Intro
intro‑bgStyle

The background style for the intro, choose between:

  • image
  • color

Once the background style is set, use:

  • intro-bg for image backgrounds
  • intro-bgColor for color backgrounds

Type: string
Usage: 

intro-bgStyle=image
intro‑bgColor

The background color for the main landing page for the experience.

Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties.

Type: string
Usage: 

intro-bgColor=
intro‑bg

A URL encoded string of the PATH for the image asset to use as the landing background. 

Note: URLs can be either absolute or relative. Relative URLs will reference assets stored in the project via the asset manager. 

Type: string
Usage: 

intro-bg=
intro‑bgOpacity

The opacity of the landing page's background.

Value between 0 and 1

Type: Number
Usage:

intro-bgOpacity=0.9
intro‑contentImage

A URL encoded string of the PATH for the image asset to use as the landing intro text.

Note: URLs can be either absolute or relative. Relative URLs will reference assets stored in the project via the asset manager. 

Type: string
Usage: 

intro-contentImage=
intro‑cta

A URL encoded string representing the call to action text on the button users click to start the experience.

Type: string
Usage:

intro-cta=Start%20Experience
intro‑customIntro

A boolean vale that disables the landing page and loads the AR experience immediately.

Default value is false.

Note: It is recommended to always use a landing page before loading the AR experience.

Type: Boolean
Usage: 

intro-customIntro=true
intro‑size

The scale of the intro image, relative to the width of the device screen.

This is a percentage with expected values between 0 and 100.

Note: URLs can be either absolute or relative. Relative URLs will reference assets stored in the project via the asset manager. 

Type: Number
Usage: 

intro-size=

Desktop

Customize the desktop landing page of your WebAR experience. This page appears when desktop users attempt to access experience with desktop mode disabled. Set background images or colors, adjust text colors, and choose whether to skip the intro or not. You can also add your own content image and call-to-action button.
Structure
    desktop-<attribute>
Desktop
desktop‑bgStyle

The background style for the intro, choose between:

  • image
  • color

Once the background style is set, use:

  • intro-bg for image backgrounds
  • intro-bgColor for color backgrounds

Type: string
Usage: 

desktop-bgStyle=image
desktop‑bgColor

The background color for the main landing page for the experience.

Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties.

Type: string
Usage: 

desktop-bgColor=
desktop‑bg

A URL encoded string of the PATH for the image asset to use as the landing background. 

Note: URLs can be either absolute or relative. Relative URLs will reference assets stored in the project via the asset manager. 

Type: string
Usage: 

desktop-bg=
desktop‑qrSize

The scale of the QR code that appears on the desktop landing page.

Value between 0 and 500

Type: Number
Usage:

desktop-qrSize=200
desktop‑Title

 

Type: string
Usage: 

desktop-title=
desktop‑titleColor

 

Type: string
Usage:

desktop-titleColor
desktop‑subtitle

 

Type: String
Usage: 

desktop-subtitle=
desktop‑subtitleColor

 

Type: String
Usage: 

desktop-subtitleColor=

Header

Customize the header bar that runs across the top of the screen in the AR experience.
Structure
    header-<attribute>
Header
header‑background

The background color for the header.

Type: string
Usage: 

header-background=
header‑height

The pixel height of the header div. 

Type: Number
Usage: 

header-height=
header‑logo

A URL encoded string of the PATH for the image asset to use as the header logo. 

Note: URLs can be either absolute or relative. Relative URLs will reference assets stored in the project via the asset manager. 

Type: String
Usage: 

desktop-bg=
header‑show-logo

A boolean vale that shows or hides the header logo.

Default value is true.

Type: Boolean
Usage: 

header-show-logo=true

AR Models and SCENE Elements

Customize the models and elements of your AR scene.
 

Use the keywords front- and rear- to specify the camera-mode, and the keyword model with the model’s index appended to replace specific models. 

Structure


    <cameraMode>-model<index>

The model index can be found in the WebAR project, use the model selection drop down. The index is the number to the left of the model name.

Model Index In webAR Studio

If you have enabled the same experiences on both  camera modes, omit the camera mode keyword prefix and the API will replace the model at the given index across both front and rear camera modes. 

When omitting the camera mode this API assumes you are using both camera modes, but it is not exclusive to this mode. If you are using the same asset for both front and rear experiences you can also use this API.

Examples 

Replace the model at index 1 in rear camera mode


    rear-model1

Replace the model at index 2 in front camera mode


    front-model2

Replace the model at index 1 in both rear and front camera modes


    model1

Example Code

Related Guides

Share this Doc
CONTENTS

Powered By EazyDocs