Rebranding Surface AR Campaign

 

 

Everything You Need To Know About WebAR Rebranding ✌️

Change Page Title

Open your Surface AR campaign and go to Web Editor and click on the Edit button.

Find the <title> tag in the beginning of the page. Update your page name between the tags and Save.

<title>Your Page Name</title>

Change Page Favicon (URL icon)

Find the comment Change Favicon and update the following <link> tag. Paste the address of the new favicon (must be a PNG file) link address to the href value and Save.

<link rel="shortcut icon" type="image/x-icon" href="Insert PNG image file address">

Change Background Color

Find the comment in the CSS, the following comment - /*Change color of the background page */
Change the default hex color code for background and Save. Find color hex codes from here. 

background: #ABA8A8;

Change QR Window Size

If you want to change the default QR popup window default sizing, please change value next to the following comments: /* QR Window CSS */

To change popup window width - change the values next to /*Change QR window width*/
To change popup window height- change the values next to /*Change QR window height*/

#qrWindow{
position: absolute;
margin:auto;
background: rgb(255,255,255);
width: 100vmin;  /*Change QR window width*/
max-width: 330px;
height: 100vmin; /*Change QR window height*/
max-height: 400px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 10000;
border: solid 1px gray;
border-radius: 3%;
}

Change Logo in QR Code

This is quite easy. Simply follow this existing tutorial to change logo in QR code.