Quick Start Guide To WebAR

Step 1 - Installation

First you need to download WebAR. This can be done via this link. Once it is downloaded, you can upload it to your WordPress installation via Plugins > New plugin > Upload plugin.

Once it is uploaded, you'll be redirected to the plugins overview page. There you only need to click "Activate" next to the WebAR plugin.

Step 2 - Your first AR

Once you've enabled the plugin, there will be an extra item in the menu on the left called "Augmented Reality". Click on that, and you'll see an overview of all the AR experiences you've added. There should be none by default, but we're gonna add one now. Click on "Add New", and enter a title. This can be anything you want. The visitors of your site won't see the title.

Under the general settings, there should be a dropdown to select the mode you want to use. I will now explain the process of setting up your AR for each mode. If you want, you can just skip the modes you don't want to use.


One of the most ease-to-setup features. Once you've selected "Image" from the dropdown, you'll be able to upload an image. That's it. Now the marker will be replaced with the image you've chosen.


Once you've selected "Slideshow" from the dropdown, you'll be able to upload multiple images. These will be the images the slideshow will loop through. You can set any number of images.
There is also a setting called "Interval". This lets you decide how many seconds each image should be visible before moving on to the next one.


Once you've selected "Video" from the dropdown, you'll be able to upload two video files. One of them is a .mp4-file, and the other one is a .ogv-file. You should upload at least one format (.mp4 or .ogv) of your video. If you have both, please upload both. There will be a smaller chance of running into compatibility problems.
There is also an option to set the volume of the video. 0 being complete silence, and 1 being the volume completely turned up.


Once you've selected "OBJ and MTL" from the dropdown, you'll be able to upload two files. The first is a .obj-file which contains the information about the polygons of your 3D model. The second one (.mtl) holds the information about all the textures.


Once you've selected "Collada" from the dropdown, you'll be able to upload one file. The plugin expects a .dae-file. This file contains all the information about your 3D scene (models, textures, shading, lights, etc.). If you want to adjust the scene by positioning, rotating or scaling you can head over to the advanced settings.

Step 3 - Implementation

The final step is probably the most easy one. At the top of your post (edit screen), you should see a shortcode. Copy this and paste it in a new page, a new post or even a widget. Users won't see the code, it'll be replaced with a button to start the augmented reality experience.

Extra: Custom marker

In the general settings section you can choose which frame marker you would like to use. You can also use a custom marker if you want to. The plugin expects a .pat-file for this to work. To convert your own frame marker to a .pat-file you can install the marker generator. Just print out your frame marker and scan it with the tool. You can then save it as a .pat-file.

Extra: Advanced settings

If you want to tweak your augmented reality further, you can use the advanced settings section. There you can adjust the position of your model (by default it is centered on the frame marker). Note that 1 unit equals the length (side) of your frame marker. Feel free to experiment also with the rotation and scale settings. If you don't want to touch them and just want to use WebAR with the default settings, that's fine too.

Note: Force SSL

For the augmented reality experience, WebAR needs to access the camera on your device. Due to privacy restrictions, a website can not access the device's camera while using the standard HTTP-protocol. You need a valid SSL certificate for your website. In simple words: http://yourwebsite.com/ can not access a camera, but https://yourwebsite.com/ can. If you're not sure how to obtain and set up a SSL certificate, please contact your hosting company.

Now all that's left is to redirect the users that entered "http://" instead of "https://". To do this, go to Settings > General and change the "WordPress Address (URL)" and the "Site Address (URL)" (from http://... to https://...). Save your settings.


If you want to be absolutely sure people won't land on a page via via HTTP, you can include the following code in the .htaccess-file. You can find it at the root of your WordPress installation. Please bear in mind that you should only this if you know what you're doing. It can break your site if you delete some things that you were not supposed to do.

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.mysite.com/$1 [R,L]

Download the markers

All the markers that WebAR can use by default are available for download. That way you can put them on business cards, flyers, etc. You can download them here as PNG, or you can download the SVG version here.