Customization API

Understand various API configurations that can be customized

Blippar Documentation Centre

Customizable Attributes

WebAR SDK comes with a new Customization API. The following are the list of customizable attributes that can be incorporated into your AR experiences:

1. Customize Blippar Defined Style and Logo Image

• Add the following attribute to the <script> tag of the WebAR SDK to change the style and logo image of the loading/warning(portrait) screens. These Blippar defined styles can also be overridden by the developers and show a custom html div overlaid on top and hide it when startGuideViewCallback is triggered in SetGuideViewCallbacks(startGuideViewCallback, SetGuideViewCallbacks)

• The following API Payload can be triggered for enabling customization of the logo which includes defining logo dimensions, loader dimensions, background color etc.

<script src="../blippar/webar-sdk-v1.0.7-beta.min.js"
auto-start="false"
logo-src="images/test_logo_here.png"
logo-width="116px"
logo-height="116px"
progress-dot-ring-scale="2.5"
progress-dot-ring-color="#00AAFF"
progress-ring-scale="3"
progress-ring-color="#00FFFF"
progress-ring-line-width="2"
ui-background-color="#283747"
ui-text-color="#00FFFF"
desktop-logo-src="images/test_desktop_logo.png"
desktop-logo-width="108px"
desktop-logo-height="30px"
issue-img-src="images/test_issue_img.png"
issue-img-width="116px"
issue-img-height="116px"
show-guide-view="true"></script>

Refer below Image for pre and post customization

2. Display Customized UI for Surface Tracking Experience

• If auto-start attribute is set to "false" in the SDK script tag, the developer can display custom UI for a brief period before starting the Surface Tracking experience.

• User can start the the Surface Tracking experience by calling the following API.

WEBARSDK.Start();

3. Hand/phone Moving Guide Custom Animation

• The hand/phone moving guide animation can be customized by the user:

• Disable Default Guide: Set show-guide-view to "false".

• When to make custom guide visible: show-guide-view

• WEBARSDK.SetGuideViewCallbacks(startGuideViewCallback,stopGuideViewCallback)

• Visible: startGuideViewCallback

• Hide: stopGuideViewCallback

• Trigger the Following API for customization

WEBARSDK.SetGuideViewCallbacks(
    startGuideViewCallback = ()=>{
      console.log("Start(ed) hand guide animation");
    },
    stopGuideViewCallback = ()=>{
      console.log("Stop(ped) hand guide animation");
    }
  );

The following image provides an overview of the customization. The hand-moving animation can be customized by using the above two API triggers.

mceclip0.png

4. Customizable alert notice for camera permission in IOS

You can now customize the alert notice received in IOS for providing camera permission to scan the WebAR SDK output. The user can customize the border color, width, message text color etc. as mentioned below:

alert-border-color="#00FFFF"
alert-border-width="5px"
alert-background-color="#283747"
alert-message-text-color="#00AAFF"
alert-button-color="#00FFFF"
alert-button-text-color="#283747"
alert-button-height="50px"
alert-camera-permission-text="We need to ask for access to the camera so this experience can work!!!"
alert-camera-permission-button-text="No Problem"
alert-motion-permission-text="Now we need access to motion sensors!!!"
alert-motion-permission-button-text="No Problem"