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.