# Customization API

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

## 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** <a href="#h_01fkdh2z6q5wdhjgqba064r9ym" id="h_01fkdh2z6q5wdhjgqba064r9ym"></a>

* Add the following attribute to the <mark style="color:red;">\<script></mark> 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 <mark style="color:orange;">SetGuideViewCallbacks</mark><mark style="color:red;">(startGuideViewCallback, SetGuideViewCallbacks)</mark>
* The following API Payload can be triggered for enabling customization of the logo which includes defining logo dimensions, loader dimensions, background color etc.

```html
<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

![](https://content.gitbook.com/content/9b8ZM6bkpiVXZiFh8rt4/blobs/L1ALt5rnS1WVtOekEJMH/Screenshot%202022-12-07%20at%203.34.13%20PM.png)

### **2. Display Customized UI for Surface Tracking Experience** <a href="#h_01fkdh3bb9akvz12s51wevgy5w" id="h_01fkdh3bb9akvz12s51wevgy5w"></a>

* 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.

```html
WEBARSDK.Start();
```

### **3. Hand/phone Moving Guide Custom Animation** <a href="#h_01fkdh3kbrzgqxn58b1464nm2e" id="h_01fkdh3kbrzgqxn58b1464nm2e"></a>

* The hand/phone moving guide animation can be customized by the user:
* Disable Default Guide: <mark style="color:red;">Set show-guide-view</mark> to <mark style="color:red;">"false".</mark>
* When to make custom guide visible: <mark style="color:red;">show-guide-view</mark>
* <mark style="color:blue;">WEBARSDK.</mark><mark style="color:orange;">SetGuideViewCallbacks</mark>(<mark style="color:red;">startGuideViewCallback,stopGuideViewCallback</mark>)
* Visible: <mark style="color:red;">startGuideViewCallback</mark>
* Hide: <mark style="color:red;">stopGuideViewCallback</mark>
* Trigger the Following API for customization

```javascript
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](https://support.blippar.com/hc/article_attachments/4409599578259/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:

```javascript
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"
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blippar.com/webar-sdk/v2.0.6/api/api-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.