---
description: Refer various SDK config properties applicable for WebAR SDK
---

# SDK Configuration Properties

{% content-ref url="https://app.gitbook.com/o/QMsd5hT6sxA9FBIB03yh/s/3UKy7VHRJWrNarYaMp13/" %}
[Blippar Documentation Centre](https://app.gitbook.com/o/QMsd5hT6sxA9FBIB03yh/s/3UKy7VHRJWrNarYaMp13/)
{% endcontent-ref %}

WebAR SDK can be configured to select the mode (surface or marker tracking), customize the logo, style of the splash screen, UI screens (shown by SDK) etc using the following SDK configuration parameters.

These parameters can be used in different ways:

* Adding as **properties in javascript object window.WEBAR\_SDK\_CONFIG**. A separate script having this object defined has to be included before loading the SDK \<script> tag.

{% hint style="info" %}
It is supported only from WebAR SDK v1.1.0-beta onwards
{% endhint %}

**Example:**

**webar-sdk-config.js**

```javascript
window.WEBAR_SDK_CONFIG = {
  "webar-mode": "surface-tracking",
  "rendering-engine": "playcanvas",
  "auto-init": "true",
  "logo-src": "../images/test_logo_here.png"
};
```

**index.html :**

```javascript
<script src="https://webar-sdk.blippar.com/releases/live-config/playcanvas/webar-sdk-config-surface.js"></script>
<script src="https://webar-sdk.blippar.com/releases/latest/cdn/blippar/webar-sdk-v1.2.0-beta.min.js?license-key=xxxxxxxx-1111-2222-3333-yyyyyyyyyyyy"></script>
```

* Adding as **html attributes** to the <mark style="color:red;">\<script></mark> tag in which the WebAR SDK js file is loaded.
* Adding as a **URL search params** in the SDK script tag url.

{% hint style="danger" %}
Only the **license-key** property can be passed via URL search params. Passing other properties via URL will not work.
{% endhint %}

{% hint style="info" %}
It is supported only from WebAR SDK v1.1.0-beta onwards
{% endhint %}

**Example:**

```javascript
<script src="https://webar-sdk.blippar.com/releases/latest/cdn/blippar/webar-sdk-v1.2.0-beta.min.js?license-key=xxxxxxxx-1111-2222-3333-yyyyyyyyyyyy"></script>
```

{% hint style="info" %}
If an attribute is present in both the <mark style="color:orange;">**WEBAR\_SDK\_CONFIG**</mark> property and SDK script tag attribute then the <mark style="color:orange;">**WEBAR\_SDK\_CONFIG**</mark> property takes higher priority.
{% endhint %}

## **alert-background-color** <a href="#h_01fkz5n1t5r5yps9akg60nqkbw" id="h_01fkz5n1t5r5yps9akg60nqkbw"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the background color of the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="#283747"
...></script>
```

## **alert-border-color** <a href="#h_01fkz5m7v9vvy0615ptv2y5v0g" id="h_01fkz5m7v9vvy0615ptv2y5v0g"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the border color of the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="5"
...></script>
```

## **alert-border-width** <a href="#h_01fkz5mk4bqwg2w100348vswf6" id="h_01fkz5mk4bqwg2w100348vswf6"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the border thickness of the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="5px"
...></script>
```

## **alert-border-radius** <a href="#h_alertborderradius" id="h_alertborderradius"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the border radius of the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-border-radius="10px"
...></script>
```

## **alert-button-border-radius** <a href="#h_alertbuttonborderradius" id="h_alertbuttonborderradius"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the border radius of the OK button in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-button-border-radius="5px"
...></script>
```

## **alert-box-font-size** <a href="#h_01gf8vh8qwsd62gj2rvcj1fw1d" id="h_01gf8vh8qwsd62gj2rvcj1fw1d"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the font size of the text in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-box-font-size="24px"
...></script>
```

## **alert-box-height** <a href="#h_01gf8vht9ey5t1ccewg6k05p30" id="h_01gf8vht9ey5t1ccewg6k05p30"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the height of the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-box-height="182px"
...></script>
```

## **alert-box-width** <a href="#h_01gf8vj8x2srpt62bawymyctb2" id="h_01gf8vj8x2srpt62bawymyctb2"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the width of the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-box-width="290px"
...></script>
```

## **alert-button-color** <a href="#h_01fkz5nvcfvxjb5agaaf2vdpzb" id="h_01fkz5nvcfvxjb5agaaf2vdpzb"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the button color in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="#00FFFF"
...></script>
```

## **alert-button-height** <a href="#h_01fkz5pw4j9v8s9temfcxpsfb3" id="h_01fkz5pw4j9v8s9temfcxpsfb3"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the button height in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="50px"
...></script>
```

## **alert-button-text-color** <a href="#h_01fkz5pdxvkap2xr9nr9eyp93g" id="h_01fkz5pdxvkap2xr9nr9eyp93g"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the button text color in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="#283747"
...></script>
```

## **alert-camera-permission-button-text** <a href="#h_01fkz5r3yzcxa1gqnvbs9w787j" id="h_01fkz5r3yzcxa1gqnvbs9w787j"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the camera permission button text in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-motion-permission-text="No Problem"
...></script>
```

## **alert-camera-permission-text** <a href="#h_01fkz5qnrss4k0ht7r82m0hv1m" id="h_01fkz5qnrss4k0ht7r82m0hv1m"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the camera permission text in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-camera-permission-text="We need to ask for access to the camera so this experience can work!!!"
...></script>
```

## **alert-message-text-color** <a href="#h_01fkz5nej53fhrf7a40sf858f2" id="h_01fkz5nej53fhrf7a40sf858f2"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the text color in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="#283747"
...></script>
```

## **alert-motion-permission-button-text** <a href="#h_01fkz5s6258q74bxhjstbmmwyx" id="h_01fkz5s6258q74bxhjstbmmwyx"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the motion sensor permission button text in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-motion-permission-text="No Problem"
...></script>
```

## **alert-motion-permission-text** <a href="#h_01fkz5rkhaxknnh4z4c19y9hq5" id="h_01fkz5rkhaxknnh4z4c19y9hq5"></a>

**Description**

On iOS Safari browser, a Camera permission request notice is displayed before asking the user to allow access to the Camera. This attribute changes the motion sensor permission text in the notice alert dialog.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
alert-motion-permission-text="Now we need access to motion sensors!!!"
...></script>
```

## **auto-init** <a href="#h_01fkz5d0hn8bfwp9ta9ya66hsw" id="h_01fkz5d0hn8bfwp9ta9ya66hsw"></a>

**Description**

When SDK and A-Frame components with webar-\* attributes are loaded, the AR experience starts automatically by default. In case the AR experience has to be started only after an event or user intervention, then _auto-init_ attribute can be set to "false".

{% hint style="info" %}
If auto-init="false" is assigned, the WEBARSDK.Init() method has to be called to start the WebAR experience. Please note that _auto-init_ is associated with initializing the sdk core whereas _auto-start_ enables the user to control when to start the tracking in the app.
{% endhint %}

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-init="false">
  </script>
</head>

<body>
  <script>
    WEBARSDK.Init();
 </script>
</body>
```

## **auto-marker-detection** <a href="#h_01gb3f9vxkzw0s49nedjdwa7p5" id="h_01gb3f9vxkzw0s49nedjdwa7p5"></a>

**Description**

It enables auto marker detection so that user doesn't have to manually click the scan button, rather it detects automatically when it recognises a marker.

{% hint style="info" %}
If <mark style="color:red;">auto-marker-detection=</mark><mark style="color:blue;">"true"</mark> is assigned, the scan button disappears from the phone screen during marker tracking and it starts scanning automatically.
{% endhint %}

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-marker-detection="true">
  </script>
</head>
```

## **auto-scan-instruction** <a href="#h_01gb3fag6apffb437vd5dkcts8" id="h_01gb3fag6apffb437vd5dkcts8"></a>

**Description**

User can change the default scan instruction for auto marker detection, i.e. when _auto-marker-detection_ sets to '_true_'.

{% hint style="info" %}
Default text for scan instruction is _<mark style="color:red;">"Look for a marker to scan..."</mark>_
{% endhint %}

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-scan-instruction="Find a marker to scan...">
  </script>
</head>
```

## **auto-scan-instruction-detect** <a href="#h_01gb3faxwcka92becrjd7ccbbs" id="h_01gb3faxwcka92becrjd7ccbbs"></a>

**Description**

User can change the default scan instruction when marker is detecting i.e. recognises a marker image.

{% hint style="info" %}
Default text for scan instruction while detection is _"<mark style="color:red;">Detecting..."</mark>_
{% endhint %}

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-scan-instruction-detect="Marker detecting...">
  </script>
</head>
```

## **auto-scan-instruction-idle** <a href="#h_01gb3fba6tcpfh0nnrpqysd9sz" id="h_01gb3fba6tcpfh0nnrpqysd9sz"></a>

**Description**

User can change the default scan instruction when phone is idle

{% hint style="info" %}
Default text for idle instruction is _<mark style="color:red;">"Move around to look for a marker"</mark>_
{% endhint %}

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-scan-instruction-idle="Shake your phone to start detection">
  </script>
</head>
```

## **auto-scan-instruction-idle-on-desktop** <a href="#h_autoscaninstructionidleondesktop" id="h_autoscaninstructionidleondesktop"></a>

**Description**

User can change the default scan instruction when desktop camera view is idle i.e no valid marker is detected. If no valid marker is detected within 5 minutes, user has to reload the page to start detection to work again.

{% hint style="info" %}
Default text for idle instruction is _<mark style="color:red;">"Reload to detect a marker"</mark>_
{% endhint %}

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-scan-instruction-idle-on-desktop="Shake your phone to start detection">
  </script>
</head>
```

## **auto-scan-instruction-text-style** <a href="#h_01gb3gw2t8891tnp44qmhceb94" id="h_01gb3gw2t8891tnp44qmhceb94"></a>

**Description**

Changes the css style of scan instruction text element.

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-scan-instruction-text-style="color: orange">
  </script>
</head>
```

## **auto-scan-style** <a href="#h_01gb3gwkkseym1nrnztncfxkcx" id="h_01gb3gwkkseym1nrnztncfxkcx"></a>

**Description**

User can change css style of scan instruction html element.

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-scan-style=""display: none; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: auto; height: auto; text-align: center;"">
  </script>
</head>
```

## **auto-scan-style-display** <a href="#h_01gb3gxe8hyy99zr1nz7ks2yx6" id="h_01gb3gxe8hyy99zr1nz7ks2yx6"></a>

**Description**

User can change the display style of auto scan html element

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-scan-style-display="display: block">
  </script>
</head>
```

## **auto-start** <a href="#h_01gb2657fp2y55tp3gf1tmraz2" id="h_01gb2657fp2y55tp3gf1tmraz2"></a>

**Description**

When sdk and A-Frame components with webar-\* attributes are loaded, the AR experience starts automatically by default. In case the AR experience has to be started only after an event or user intervention, then the auto-start attribute can be set to "false".

{% hint style="info" %}
If <mark style="color:red;">auto-start=</mark><mark style="color:blue;">"false"</mark> is assigned, the WEBARSDK.StartTracking() method has to be called to start the WebAR experience/tracking. Please note that _auto-init_ is associated with initializing the sdk core whereas _auto-start_ enables the user to control when to start the tracking in the app.
{% endhint %}

**Example**

```html
<head>auto-init
  <script src="<path_to_webar_sdk_min_js>"
    auto-start="false">
  </script>
</head>

<body>
  <script>
    WEBARSDK.StartTracking();
 </script>
</body>
```

## **desktop-logo-height / desktop-logo-width** <a href="#h_01fkz5vm9btrds5498qvzwh1a9" id="h_01fkz5vm9btrds5498qvzwh1a9"></a>

**Description**

Changes the height and width of the logo image displayed in a desktop browser where the user is asked to scan the QR code or type the url in Android or iOS mobile browsers.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
desktop-logo-height="30px"
desktop-logo-width="108px"
...></script>
```

## **desktop-logo-src** <a href="#h_01fkz5v5xtsvmm38k3g4996vsg" id="h_01fkz5v5xtsvmm38k3g4996vsg"></a>

**Description**

Changes the logo image displayed in a desktop browser where the user is asked to scan the QR code or type the url in Android or iOS mobile browsers.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
desktop-logo-src="images/my_rectangular_logo.png"
...></script>
```

## **enable-tracking-on-desktop** <a href="#h_enabletrackingondesktop" id="h_enabletrackingondesktop"></a>

**Description**

To enable/disable tracking on the desktop browser. This will be useful while developing the marker tracking application on the desktop itself. It also works with the developer console's mobile simulator in Chrome desktop browser.

Right now only Marker tracking is supported on the desktop browser.

When set to "false", tracking is disabled on the desktop browser and the default qr code page is seen.

When set to "true", tracking is enabled on the desktop browser and the camera view is seen.

Default value is "false".

Also by default the camera view displayed is a mirrored image of the real world. To enable/disable this mirroring see enable-mirroring-on-desktop attribute for more details.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
enable-tracking-on-desktop="true"
...></script>
```

## **enable-mirroring-on-desktop** <a href="#h_enablemirroringondesktop" id="h_enablemirroringondesktop"></a>

**Description**

To enable/disable mirroring of the camera view displayed on the desktop browser when enable-tracking-on-desktop is set to "true".

When set to "false", mirroring of the camera view is disabled on the desktop browser.

When set to "true", mirroring of the camera view is enabled on the desktop browser.

Default value is "true".

**Example**

```html
<script src="path_to_webar_sdk_script.js"
enable-tracking-on-desktop="true"
...></script>
```

## **enable-photo-ui** <a href="#h_enablephotoui" id="h_enablephotoui"></a>

**Description**

To enable/disable displaying the default snapshot camera icon.

When set to "true", a camera icon is displayed at the bottom the screen. On clicking it, user can take a snapshot of the experience and then see the preview of the snapshot to download it.

When set to "false", camera icon is not displayed. In this case, a custom snapshot UI can be implemented using WEBARSDK.TakeSnapShot() API.

Default value is "false".

{% hint style="info" %}
Only for Playcanvas! To get the snapshot API to work correctly in Playcanvas rendering engine, enable Preserve Drawing Buffer flag. Go to Playcanvas Project Editor, then navigate to project SETTINGS > RENDERING tab and make sure "Preserve Drawing Buffer" is checked.
{% endhint %}

**Example**

```html
<script src="path_to_webar_sdk_script.js"
enable-photo-ui="true"
...></script>
```

## gesture-rotation-speed

**Description**

The `gesture-rotation-speed` attribute determines the responsiveness of the AR object's rotation to user gestures. It modulates how quickly the object turns in response to user input:

* A **higher value** results in a more rapid rotation, allowing the object to spin faster with each swipe. This can be useful for scenarios where quick, broad movements are desired.
* A **lower value** yields a slower, more precise rotation, granting the user finer control over the object's orientation. This setting is ideal for detailed adjustments and nuanced interactions.

{% hint style="info" %}
The `gesture-rotation-speed` attribute is functional only when the <mark style="color:orange;">`webar-ux-control`</mark> entity in A-Frame or the corresponding mesh in Babylon.js has been appropriately configured and the <mark style="color:blue;">`userGestureRotation`</mark> is set to <mark style="color:blue;">`true`</mark>.
{% endhint %}

**Example**

```html
<script src="path_to_webar_sdk_script.js"
gesture-rotation-speed="1"
...></script>
```

## gesture-scale-max

**Description**

The `gesture-scale-max` attribute specifies the upper limit for the scale factor applied to an AR object when users perform pinch-to-zoom gestures. This setting controls the maximum size the AR object can reach through user interaction, effectively capping the object's enlargement to ensure it does not exceed the intended proportions within the AR scene.

By configuring the `gesture-scale-max` attribute, you can provide a safeguard against excessive scaling, maintaining the aesthetic and functional balance of the AR experience.

{% hint style="info" %}
For the `gesture-scale-max` attribute to take effect, it must be used in conjunction with the <mark style="color:orange;">`webar-ux-control`</mark> entity or mesh within your A-Frame or Babylon.js setup, respectively. Additionally, ensure that the <mark style="color:blue;">`userGestureScale`</mark> property is set to <mark style="color:blue;">`true`</mark>, allowing for user-initiated scaling gestures.
{% endhint %}

**Example**

```html
<script src="path_to_webar_sdk_script.js"
gesture-scale-max="2"
...></script>
```

## gesture-scale-min

**Description**

The `gesture-scale-min` attribute sets the minimum allowable scale factor for an AR object within a single pinch gesture. It defines the least amount of scaling down that can be applied, ensuring that the object does not become too small to interact with or perceive after one pinch interaction. This constraint helps maintain the object's presence and usability within the AR scene.

Please note that this attribute accepts _a value greater than 0 and less than 1_, which represents the proportional size of the object relative to its initial scale. Setting it to 1 would maintain the object's original size, effectively disabling any scale-down action, as each scale-down gesture considers the object's current scale as the base factor of 1. Values less than 1 decrease the object's size proportionally, with smaller values allowing for more significant reduction.

{% hint style="info" %}
This attribute is active when the <mark style="color:orange;">`webar-ux-control`</mark> entity or mesh is integrated into your A-Frame or Babylon.js application, with the <mark style="color:blue;">`userGestureScale`</mark> enabled. It's critical to ensure that the `gesture-scale-min` value is set appropriately—above 0 and below 1—to facilitate user scaling gestures without compromising the object's visibility or interaction quality.
{% endhint %}

**Example**

```html
<script src="path_to_webar_sdk_script.js"
gesture-scale-min="0.5"
...></script>
```

## hide-reset-button

The `hide-reset-button` attribute allows developers to control the visibility of a reset button within the AR interface. When set to true, this attribute hides or removes the reset button from the user interface, streamlining the experience by eliminating unnecessary elements. This can be particularly useful if the reset functionality is not required or if you wish to manage state resets through custom controls or interactions.

{% hint style="info" %}
The visibility and functionality of the reset button are dependent on the <mark style="color:orange;">`webar-ux-control`</mark> element being properly configured with the <mark style="color:blue;">`stageCursorUX`</mark> attribute set to <mark style="color:blue;">`true`</mark>. If <mark style="color:orange;">`webar-ux-control`</mark> is not implemented or <mark style="color:blue;">`stageCursorUX`</mark> is set to <mark style="color:blue;">`false`</mark>, the reset button will not be present, rendering the `hide-reset-button` attribute inapplicable.
{% endhint %}

**Example**

```html
<script src="path_to_webar_sdk_script.js"
hide-reset-button="false"
...></script>
```

## **ios-camera-permission** <a href="#h_ioscamerapermission" id="h_ioscamerapermission"></a>

**Description**

To enable/disable the camera permission alert dialog(generated by the sdk) on iPhone devices before showing the iOS system request to access the camera.

When set to "false", A Camera and Motion permission alert is shown only during the first time the application is loaded on the browser.

When set to "true", A Camera and Motion permission alert is shown during the first time the application is loaded on the browser. After that for every load, only the Camera alert is shown.

The advantage of showing the camera permission alert during every load is to start the auto playback of the video(if any) in the AR experience. In iOS Safari browser, a video cannot be played automatically when the scene is loaded. Instead it has to be played only after a user interaction. With this camera alert interaction, the app can start and pause the AR scene videos (using the callback from SetCameraAlertCallback() API) and also starts the iOS system alert to access the camera. Once the tracking has started, the paused videos can be played programatically to look like it is auto-played.

The default value of this attribute is "true".

**Example**

```html
<script src="path_to_webar_sdk_script.js"
ios-camera-permission="false"
...></script>
```

## **issue-img-height / issue-img-width** <a href="#h_01fkz5x1dj2ysd9czh28tberqz" id="h_01fkz5x1dj2ysd9czh28tberqz"></a>

**Description**

Changes the height and width of the warning symbol image displayed in the landscape warning screen, or any device/server communication error.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
issue-img-height="116px"
issue-img-width="116px"
...></script>  
```

## **issue-img-src** <a href="#h_01fkz5wg0afpqws52m1bbf9spf" id="h_01fkz5wg0afpqws52m1bbf9spf"></a>

**Description**

Changes the warning symbol image displayed in the landscape warning screen, or any device or server communication error.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
issue-img-src="images/my_exclamation_image.png"
...></script>
```

## **loading-progress-type** <a href="#h_loadingprogresstype" id="h_loadingprogresstype"></a>

**Description**

Changes the loading progress bar/info type. If the value is "default", it shows the loading update in text like "Created 1 of 3 elements". It shows Blippar's default style. If the value is "circular", it shows a circular progress bar.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
loading-progress-type="default"
...></script>
```

## **logo-height / logo-width** <a href="#h_01fkz5ez4p5age8k4x25r2mncp" id="h_01fkz5ez4p5age8k4x25r2mncp"></a>

**Description**

Changes the height and width of the circular logo in the loading splash screen.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
logo-height="116px"
logo-width="116px"
...></script>
```

## **logo-src** <a href="#h_01fkz5ejbsyrr5qkdkgnxv4e85" id="h_01fkz5ejbsyrr5qkdkgnxv4e85"></a>

**Description**

Changes the circular logo in the loading splash screen.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
logo-src="images/my_logo.png"
...></script>
```

## **on-load** <a href="#h_01gdg6kw4d251cm1qq4a48dexp" id="h_01gdg6kw4d251cm1qq4a48dexp"></a>

**Description**

Loads a custom splash screen. To create a custom splash screen, the user should create a function and pass the function as a string to the "on-load" attribute.

**Example**

```html
<script type="text/javascript">
  function SetMySplash() {
     let splashDiv = document.createElement('div');
     splashDiv.setAttribute('id',"mySplash");
     splashDiv.setAttribute('style',"background-color: black; position: absolute; align-items: center; justify-content: center; top: 0; bottom: -1px; left: 0; right: 0; min-width: 100vw; min-height: 100vh; width: auto; height: auto; margin: auto; z-index: 2; user-select: none; -webkit-user-select: none; -moz-user-select: none;");
     let logoImg = document.createElement('img');
     const progress = WEBARSDK.GetLoadingProgress();
     ...
     document.body.append(splashDiv);
  }
</script>

<script src="path_to_webar_sdk_script.js"
on-load="SetMySplash()"
...></script>
```

## **progress-dot-ring-color** <a href="#h_01fkz5gcyna8v4var1fb1g62g9" id="h_01fkz5gcyna8v4var1fb1g62g9"></a>

**Description**

Changes the color of the dotted loading ring which runs indefinitely until the splash screen disappears.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-dot-ring-color="#00AAFF"
...></script>
```

## **progress-dot-ring-scale** <a href="#h_01fkz5fvzg3z37a7w86ecqywb2" id="h_01fkz5fvzg3z37a7w86ecqywb2"></a>

**Description**

Changes the size/scale of the dotted loading ring which runs indefinitely until the splash screen disappears.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-dot-ring-scale="0.30"
...></script>
```

## **progress-ring-color** <a href="#h_01fkz5kdm4j0xztkkrj7xs80nw" id="h_01fkz5kdm4j0xztkkrj7xs80nw"></a>

**Description**

Changes the color of the loading progress update ring.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="#00FFFF"
...></script>
```

## **progress-ring-line-width** <a href="#h_01fkz5ktjz83c7rakwsn1yzkrb" id="h_01fkz5ktjz83c7rakwsn1yzkrb"></a>

**Description**

Changes the thickness of the loading progress update ring.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="5"
...></script>
```

## **progress-ring-scale** <a href="#h_01fkz5hc3afwq8mhkves9yn3kv" id="h_01fkz5hc3afwq8mhkves9yn3kv"></a>

**Description**

Changes the size of the loading progress update ring.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-scale="0.36"
...></script>
```

## **render-scene-on-desktop** <a href="#h_rendersceneondesktop" id="h_rendersceneondesktop"></a>

**Description**

To enable/disable the rendering of the 3D scene on the desktop without any tracking.

When the value is set to "true", the 3D scene is rendered as seen by the default virtual camera on the desktop browser (without tracking).

When set to "false", the default qr code page is displayed on the desktop browser.

Default value is "false".

**Example**

```html
<script src="path_to_webar_sdk_script.js"
render-scene-on-desktop="true"
...></script>
```

## **rendering-engine** <a href="#h_01fmhpj84cq89q8sc610efczhd" id="h_01fmhpj84cq89q8sc610efczhd"></a>

**Description**

Decides which rendering engine is to be used with the application

| Rendering Engine                            | Description                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">babylonjs</mark>  | BabylonJS rendering engine                                                                                                                                                                                                                                                                                                              |
| <mark style="color:blue;">playcanvas</mark> | Playcanvas rendering engine                                                                                                                                                                                                                                                                                                             |
| <mark style="color:blue;">aframe</mark>     | <p>(Default) AFrame rendering engine.</p><p>By default the AFrame rendering engine is chosen by sdk even in the following cases:</p><ul><li>If the rendering-engine attribute is not specified in the sdk script tag</li><li>If the rendering-engine attribute is specified but the value does not match the supported values</li></ul> |

{% hint style="info" %}
For playcanvas rendering-engine, fork the project from [https://playcanvas.com/user/blippar](https://playcanvas.com/user/blippar)
{% endhint %}

**Example**

```html
<head>
  <script src="<path_to_webar_sdk_min_js>"
    rendering-engine="babylonjs">
  </script>
</head>

<body>
  <script>
    WEBARSDK.Init();
 </script>
</body>
```

## **scan-btn-display** <a href="#h_01g24fkv2pnkhcx2pzsawz3pkh" id="h_01g24fkv2pnkhcx2pzsawz3pkh"></a>

**Description**

Changes the css display property of the scan button displayed during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking".</mark> To make it invisible set it to <mark style="color:blue;">"none"</mark> else <mark style="color:blue;">"block".</mark>

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-display="block"
...></script>
```

## **scan-btn-height / scan-btn-width**

**Description**

Changes the height and width of the scan button displayed during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking".</mark>

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-height="100px"
scan-btn-width="100px"
...></script>  
```

## **scan-btn-img-height / scan-btn-img-width** <a href="#h_01g24fs20mjwsx72k8x0n4ja6s" id="h_01g24fs20mjwsx72k8x0n4ja6s"></a>

**Description**

Sets the height and width of the image displayed in the scan button displayed during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark>.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-img-height="50"
scan-btn-img-width="50"
...></script>
```

## **scan-btn-img-src** <a href="#h_01g24frfqe8scsqxv744mw9eqz" id="h_01g24frfqe8scsqxv744mw9eqz"></a>

**Description**

Sets the image of the scan button displayed during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking".</mark>

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-img-src="images/user_scan-btn-image_here.png"
...></script>
```

## **scan-btn-img-transform** <a href="#h_01g24ftdp5mff6h6am584twdvc" id="h_01g24ftdp5mff6h6am584twdvc"></a>

**Description**

Sets the SVG transform property (e.g. translate(), rotate() etc.) of the image displayed in the scan button displayed during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking".</mark>

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-img-transform="translate(-25, -25)"
...></script>
```

## **scan-btn-img-x-coordinate / scan-btn-img-y-coordinate** <a href="#h_01g24fsr8bv3ywk8f6v100kdn3" id="h_01g24fsr8bv3ywk8f6v100kdn3"></a>

**Description**

Sets the x and y coordinates of the image displayed in the scan button during marker tracking i.e. when webar-mode="marker-tracking". The x and y position of the image is the top left position, relative to the viewport of the origin of the element i.e the scan button. Use scan-btn-img-transform attribute's translate() method to position the image to the centre.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-img-x-coordinate="50%"
scan-btn-img-y-coordinate="50%"
...></script>
```

## **scan-btn-instruction** <a href="#h_01g24fpb6cgfap0xvdbs1ac154" id="h_01g24fpb6cgfap0xvdbs1ac154"></a>

**Description**

Changes the text below the scan button displayed during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking".</mark>

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-instruction="Tap to scan"
...></script>
```

## **scan-btn-instruction-style** <a href="#h_01g24fq46a81sk85txzpd8yah6" id="h_01g24fq46a81sk85txzpd8yah6"></a>

**Description**

Changes the css style of the text below the scan button displayed during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark>.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-instruction-style="color: white;"
...></script>
```

## **scan-btn-progress-bar-color** <a href="#h_01g24fxc8p7dhqh91zwmmrds7s" id="h_01g24fxc8p7dhqh91zwmmrds7s"></a>

**Description**

Sets the color of the progress foreground circular bar displayed around the scan button during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark>.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-progress-bar-color="blue"
...></script>
```

## **scan-btn-progress-bar-cx-coordinate / scan-btn-progress-bar-cy-coordinate** <a href="#h_01g24fw9pcd4ae4es3gj3qm75c" id="h_01g24fw9pcd4ae4es3gj3qm75c"></a>

**Description**

Sets the x and y coordinates of the centre of the progress foreground circular bar displayed around the scan button during marker tracking i.e. when webar-mode="marker-tracking".

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-progress-bar-cx-coordinate="50"
scan-btn-progress-bar-cy-coordinate="50"
...></script>
```

## **scan-btn-progress-bar-radius** <a href="#h_01g24fwnt7cefpj1n918js8tzt" id="h_01g24fwnt7cefpj1n918js8tzt"></a>

**Description**

Sets the radius of the progress foreground circular bar displayed around the scan button during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking".</mark>

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-progress-bar-radius="35"
...></script>
```

## **scan-btn-progress-bar-transform** <a href="#h_01g24fx3xmp777tea0atjx0c0j" id="h_01g24fx3xmp777tea0atjx0c0j"></a>

**Description**

Sets the SVG transform property (e.g. translate(), rotate() etc.) of the progress foreground circular bar displayed around the scan button during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark>.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-progress-bar-transform="rotate(-90 50 50)"
...></script>
```

## **scan-btn-progress-circle-cx-coordinate / scan-btn-progress-circle-cy-coordinate** <a href="#h_01g24fv2g0w9nyzneajcmj3zm2" id="h_01g24fv2g0w9nyzneajcmj3zm2"></a>

**Description**

Sets the x and y coordinates of the centre point of the progress background circle displayed around the scan button during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark>.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-progress-circle-cx-coordinate="50%"
scan-btn-progress-circle-cy-coordinate="50%"
...></script>
```

## **scan-btn-progress-circle-radius** <a href="#h_01g24fvdjn8trcznzgd6f517x1" id="h_01g24fvdjn8trcznzgd6f517x1"></a>

**Description**

Sets the radius of the progress background circle displayed around the scan button during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark>.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-progress-circle-radius="35"
...></script>
```

## **scan-btn-progress-circle-style** <a href="#h_01g24fvt2rpctsf2fwbv8nrdgt" id="h_01g24fvt2rpctsf2fwbv8nrdgt"></a>

**Description**

Sets the SVG style of the progress background circle displayed around the scan button during marker tracking i.e. when <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark>.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
scan-btn-progress-circle-style="fill: none; stroke: cyan; stroke-width: 6;"
...></script>
```

## **show-guide-view** <a href="#h_01fkz5y7vfz20k17ssqfh5a68t" id="h_01fkz5y7vfz20k17ssqfh5a68t"></a>

**Description**

Enable or disable displaying the default Hand with phone animation guide, which instructs the user to move the phone left and right to detect a surface.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
show-guide-view="false"
...></script>
```

{% hint style="info" %}
If the default Hand with phone animation guide is disabled by setting show-guide-view animation to false, it is necessary to display a developer-made surface detection guide. Without this the user will not be aware of the need to view a surface and move the phone left to right to detect the surface. To control when to show and then hide a custom Hand with phone animation guide, use <mark style="color:blue;">WEBARSDK</mark>.<mark style="color:orange;">SetGuideViewCallbacks</mark>(<mark style="color:red;">startGuideViewCallback, stopGuideViewCallback</mark>)
{% endhint %}

## **show-guide-animation-url**

**Description**

Sets the custom animation URL for hand guide animation of surface tracking. Please note that it only supports lottie animations json format.([https://lottiefiles.com](https://lottiefiles.com/))

**Example**

```html
<script src="path_to_webar_sdk_script.js"
show-guide-animation-url="https://assets4.lottiefiles.com/packages/lf20_lir7pmho.json"
...></script>
```

## **show-qr-card-on-desktop** <a href="#h_showqrcardondesktop" id="h_showqrcardondesktop"></a>

**Description**

To show/hide a "Try on Mobile" button displayed on the desktop browser. On clicking this button, it shows the QR code which can be scaned from the mobile device to load the application. This can be useful when render-scene-on-desktop attribute is set to "true".

Default value is "false".

**Example**

```html
<script src="path_to_webar_sdk_script.js"
show-qr-card-on-desktop="true"
...></script>
```

## **static-camera** <a href="#h_01ges38t103ra5bsnv28bgb1t7" id="h_01ges38t103ra5bsnv28bgb1t7"></a>

**Description**

By default, sdk assumes _Static-Camera-With-A-Moving-Stage_ i.e. _'static-camera' = 'true'_. However, it can be changed to _Moving-Camera-With-A-Static-Stage_ by setting '_static-camera' = 'false'_.

**Example**

```javascript
<scriptsrc="path_to_webar_sdk_script.js"
static-camera="true"
...></script>
```

## **ui-background-color** <a href="#h_01fkz5sv40q9r7ybafhz8et498" id="h_01fkz5sv40q9r7ybafhz8et498"></a>

**Description**

Changes the background color of the loading splash screen, landscape warning screen or any device/server communication error.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="#283747"
...></script>
```

## **ui-portrait-text** <a href="#h_01g1v305b8t6eem4558jvswqsf" id="h_01g1v305b8t6eem4558jvswqsf"></a>

**Description**

Replaces the default text shown in the landscape warning screen.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
  ui-portrait-text="Cette expérience est conçue pour le mode Portrait uniquement"
...></script>
```

## **ui-text-color** <a href="#h_01fkz5tf3mzck53478ctwxe23k" id="h_01fkz5tf3mzck53478ctwxe23k"></a>

**Description**

Changes the text color of the landscape warning screen, or any device/server communication error.

**Example**

```html
<script src="path_to_webar_sdk_script.js"
progress-ring-color="#00FFFF"
...></script>
```

## **webar-mode** <a href="#h_01gb1zs36tez0j1n72fwbpcf39" id="h_01gb1zs36tez0j1n72fwbpcf39"></a>

**Description**

Decides whether to run the WebAR SDK in Surface Tracking or Image/Marker Tracking mode.

| Supported Values- webar-mode                      | Description                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">surface-tracking</mark> | <p>Runs the WebAR SDK in Surface Tracking mode. Surface Tracking is the default mode. If this attribute is not present or any other not-supported value is provided, it runs in Surface Tracking mode.</p><p>In surface tracking mode, the &#x3C;a-scene webar-scene> should have one &#x3C;a-entity webar-stage> element. See webar-stage (<a href="a-frame">A-frame</a>) attribute for more details.</p> |
| <mark style="color:blue;">marker-tracking</mark>  | Runs the WebAR SDK in Marker Tracking mode.                                                                                                                                                                                                                                                                                                                                                                |
| <mark style="color:blue;">face-tracking</mark>    | Runs the WebAR SDK in Face Tracking mode. Supported only when rendering-engine="aframe" for now.                                                                                                                                                                                                                                                                                                           |
| <mark style="color:blue;">lazy-mode</mark>        | Runs the WebAR SDK in Lazy Mode i.e. allows the user to decide at a later stage which tracking should be enabled. The user can set the respective tracking mode using functionSetWebARMode("tracking-mode"), see the example below.                                                                                                                                                                        |

**Example**

**Without Lazy Mode**

<pre class="language-html"><code class="lang-html">&#x3C;head>
  &#x3C;script src="&#x3C;path_to_webar_sdk_min_js>"
<strong>    webar-mode="marker-tracking">
</strong>  &#x3C;/script>
&#x3C;/head>

&#x3C;body>
  &#x3C;script>
    WEBARSDK.Init();
 &#x3C;/script>
&#x3C;/body>
</code></pre>

**With Lazy Mode**

```javascript
<head>
<script src="<path_to_webar_sdk_min_js>"
webar-mode="lazy-mode">
</script>
</head>

<body>
<script>
WEBARSDK.SetWebARMode("surface-tracking");
</script>
</body>
```

## **Playcanvas Customization**

For PlayCanvas customization, kindly use the following config files which can be found at playcanvas/config folder in the downloaded SDK zip file:

* webar-sdk-config-surface.js
* webar-sdk-config-marker.js

These files have to be modified and hosted on a separate server (say my-server.com) and the url has to be overwritten in the Playcanvas project.

#### Process:

Login to Playcanvas and navigate to **Settings> External Scripts > first url entry** as shown below and replace the first url with your custom config url.

<figure><img src="https://content.gitbook.com/content/JORLZYrNRKoZ1aApum8O/blobs/PyJnTFLTgK5dBQuz1Cxz/playcanvas-config.png" alt=""><figcaption><p>URL Entry Process</p></figcaption></figure>

{% hint style="info" %}
Due to the limitations in the playcanvas editor, the configuration properties cannot be directly modified or added in the editor and will need to be added in the above mentioned manner.\\
{% endhint %}
