How to use WeWeb to create an augmented reality experience on a website?

Step 1: Visit the WeWeb Official Website

Begin with accessing the WeWeb website via your browser. Subsequently, take your cursor to the top right side of the screen to find the "Start for Free" button and click on it. The next screen will prompt you to sign up. If you don't already have a WeWeb account, use this opportunity to create a new account or sign in if you're returning.

Step 2: Enter the Dashboard

Once you have successfully signed in, you will be on the WeWeb dashboard. This is the staging ground where you create and manage all your website projects. The dashboard is clear-cut, allowing you to quickly understand where to find what you need.

Step 3: Create a New Project

To create a new Augmented Reality (AR) project, click on the "Create New Project" button, a prominent button in the center of your dashboard. The system will elicit you to give your new project a name, do so in the field provided. Once you come up with an attractive and descriptive project name, click ‘create’.

Step 4: Choose a Website Theme

Creating an AR experience requires a website, and a website needs a theme. After creating your project, WeWeb will display a gallery of pre-built website themes. From this gallery, choose a theme that fits your project's needs. WeWeb themes come complete with design elements and content that you can replace with your own.

Step 5: Switch to Developer Mode

WeWeb offers both a visual editor and a developer mode. Since creating an augmented reality experience requires some advanced work, you will need to switch to the developer mode. To do so, click on the "Mode" option located at the top right corner of your dashboard and select "Developer."

Step 6: Integration of AR.js

After switching to the developer mode, you can now integrate AR.js, a simplified JavaScript API for AR. To do this, go to the "Code" icon on the left side of your dashboard and click on "Static Files". Then, drag and drop your AR.js file to upload it.

Step 7: HTML Markup and Scripting

Still under the developer mode, click on the HTML and JS component. Update the HTML and add a 3D model that AR.js will use to create the AR experience. Remember to add the corresponding AR.js scripting. Make sure your script references the AR file you uploaded previously.

Step 8: Testing your Augmented Reality Experience

With your AR in place, switch back to the visual mode to see the result in the website preview. If it appears and functions as desired, you've successfully added an AR experience to your WeWeb site.

Step 9: Publish your Website

Click "Publish" at the top right corner to share your website having an AR experience with the world. You might want to review the site before publishing just to ensure all the functionalities are working correctly.

Step 10: Testing on a Mobile Device

The AR experience is mainly for mobile devices. So, go to the site on your mobile device and check out your new AR experience. Any errors bubbled up during this check should be corrected before sharing the website link with others.

WeWeb is a powerful tool for creating compelling websites with interactive features like Augmented Reality. With this step-by-step guide, you can start creating fascinating AR experiences on your web pages.