SDK Configuration Properties

Refer various SDK config properties applicable for Unity integration

Blippar Documentation Centre

SDK Configuration Properties

WebAR SDK loading screen can be configured to customize the logo, style of the splash screen, UI screens (shown by SDK) etc using the following SDK configuration parameters.

Blippar Unity SDK package allows you to customize your API. There are several SDK attributes that you can define for customization. This API can be applied for customizing the loading screen animation to display any logo image, size, colour, progress ring, ring colour instead of displaying the default loading screen. For example: and many more.

To customize the loading screen animation follow the steps below:

  • Click on the 'Blippar' Menu tab and from the drop-down, select the option 'Loading Screen'.

Menu Tab
  • The loading screen tab will be displayed on the screen

  • A default template will be selected as the template that would be used for generating the build.

  • You can use the default template as a base and modify to create new templates. You can also choose to create as many templates as required.

  • Provide the name of the logo and store the required assets into the Assets/WEBGLTemplates/Blippar/images. This is the folder location in which the image files must be stored in order to effectively trigger the customized animation.

  • Enter the details of customization for logo width, height, progress dot ring scale, ring colour, alert border colour etc based on your requirement.

  • Click on 'Save Template' to save the modified as the default. You can alternatively select the option to 'Save as new Template'. Refer image below:

Save a New Template

logo name

Description

Changes the circular logo in the loading splash screen.

Example

logo width / logo height

Description

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

Example

progress dot ring scale

Description

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

Example

progress dot ring color

Description

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

Example

progress ring scale

Description

Changes the size of the loading progress update ring.

Example

progress ring color

Descriptiona

Changes the color of the loading progress update ring.

Example

progress ring line width

Description

Changes the thickness of the loading progress update ring.

Example

alert border color

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

alert border width

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

alert background color

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

alert message text color

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

alert button color

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

alert button text color

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

alert button height

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

alert camera permission text

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

alert camera permission button text

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

alert motion permission text

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

alert motion permission button text

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

ui background color

Description

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

Example

ui text color

Description

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

desktop logo

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

desktop logo width / desktop logo height

Description

Changes the width and height 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

issue img

Description

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

Example

issue img width / issue img height

Description

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

Example

tracking animation url

Description

Navigate to the 'Tracking Animation URL' field and provide the animation url https://lottiefiles.com/. If url is empty then sdk will play default animation for tracking

Example

auto scan instruction

Description

User can change the default scan instruction for auto marker detection, i.e. whenauto-marker-detection sets to 'true'.

Default text for scan instruction is"Look for a marker to scan..."

Example

auto-scan-instruction-detect

Description

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

Default text for scan instruction while detection is"Detecting..."

Example

auto scan instruction idle

Description

User can change the default scan instruction when phone is idle

Default text for scan instruction is"Shake your phone to start detection"

Example

auto scan instruction text style

Description

Changes the css style of scan instruction text element.

Example

auto scan style display

Description

User can change the display style of auto scan html element

Example

auto scan style

Description

User can change css style of scan instruction html element.

scan button display

Description

Changes the css display property of the scan button displayed during marker tracking i.e. when webar-mode="marker-tracking". To make it invisible set it to"none"else"block".

Example

scan button height/ scan button width

Description

Changes the height and width of the scan button displayed during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button img height / scan button img width

Description

Sets the height and width of the image displayed in the scan button displayed during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button img

Description

Sets the image of the scan button displayed during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button img transform

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 webar-mode="marker-tracking".

Example

scan button img x coordinate / scan button img y coordinate

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

scan button instruction

Description

Changes the text below the scan button displayed during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button instruction style

Description

Changes the css style of the text below the scan button displayed during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button progress bar color

Description

Sets the color of the progress foreground circular bar displayed around the scan button during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button progress bar cx coordinate/scan button progress bar cy coordinate

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

scan button progress bar radius

Description

Sets the radius of the progress foreground circular bar displayed around the scan button during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button progress bar transform rotate

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 webar-mode="marker-tracking".

Example

scan button progress circle cx coordinate/scan button progress circle cy coordinate

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 webar-mode="marker-tracking".

Example

scan button progress circle radius

Description

Sets the radius of the progress background circle displayed around the scan button during marker tracking i.e. when webar-mode="marker-tracking".

Example

scan button progress circle style

Description

Sets the SVG style of the progress background circle displayed around the scan button during marker tracking i.e. when webar-mode="marker-tracking".

Example

Last updated