diff --git a/model-viewer/index.html b/model-viewer/index.html
index e53853199c3c99e27a22daa23ba34694eeb4c72b..05d7fc065c52ccf3bae9d7f8764eef5c9bd6063f 100644
--- a/model-viewer/index.html
+++ b/model-viewer/index.html
@@ -28,7 +28,7 @@
         cursor: pointer;
       }
 
-      .lable {
+      .label {
         line-height: 22px;
         font-size: 17px;
         color: #fff;
@@ -42,14 +42,25 @@
       <model-viewer
         src="deer/scene.gltf"
         ar
+        ar-modes="scene-viewer quick-look"
         shadow-intensity="1"
         camera-controls
         touch-action="none"
       >
         <div class="button" slot="ar-button">
-          <span class="lable">Go to AR</span>
+          <span class="label">Go to AR</span>
         </div>
       </model-viewer>
     </div>
   </body>
+  <footer>
+    <script type="module">
+      window.addEventListener("load", () => {
+        const modelViewer = document.querySelector('model-viewer');
+        if (modelViewer.canActivateAR) {
+          modelViewer.activateAR();
+        }
+      });
+    </script>
+  </footer>
 </html>