How to Create an AR Widget with No Code

How to Create an AR Widget with No Code

A Trip Down Memory Lane

Remember when we were kids and we thought we'd have flying cars and holograms by now? Well, we're not quite there yet, but we're getting closer. Augmented reality (AR) is one of the most exciting technologies of our time, and it's already being used in some amazing ways. For example, U.S.-based tech company, GIANTSTEP, created and implemented its first augmented reality (AR) fashion runway show in Seoul, Korea. There's also Paradiddle, an AR app that teaches you how to play the drums and other instruments via Oculus Quest. Whether it's fashion shows or music lessons, the possibilities with AR are endless! 😊

In this article, I'll show you how to create your own AR widget without a single line of code. I'll also share some tips and tricks to help you get the most out of your AR creations. So what are you waiting for?

YouTuber Rosanna is saying "Lets get goin!"

What is Augmented Reality(AR)?

Before we get ahead of ourselves, let’s go in-depth on what augmented reality(AR) actually is. According to Microsoft,

“Augmented Reality is an enhanced, interactive version of a real-world environment achieved through digital visual elements, sounds, and other sensory stimuli via holographic technology. AR incorporates three features: a combination of digital and physical worlds, interactions made in real-time, and accurate 3D identification of virtual and real objects.”

In other words, augmented reality is those cool 3D holographic effects that you touch on the screen. A great example of this is the app, Pokémon Go. It's where you take your phone and hold it up against any area to catch Pokémon (ah the memories).

Image may contain Electronics Phone Mobile Phone Cell Phone Human Person Car Vehicle Transportation and Automobile

AR is a pretty cool way to interact with the world. But don't worry, you won't have to run around the park(or your living room if you're that adventurous! 😉) for this tutorial. We'll be building our AR widget right here in our browser. So sit, get your wand, I mean laptop, and let's start building! 😀

Simpson character with blue glasses is saying "Let's Build!"

Step 1: Create a ZapWorks account

I know there are other no-code tools to build an AR widget, but I highly recommend ZapWorks. It's a user-friendly platform that makes it easy to create interactive AR experiences. Plus, it's free to use for up to three projects. So, go to the ZapWorks website, create an account, (I highly recommend that you use your Google account to make the login easier.), and log in.

Let’s start creating your AR widget! 😊

Step 2: Choose a template

Hover over the orange button that is next to Projects and click on New Project. Then, click on Select & Continue.

Step 3: Add content

Start uploading the content you want. It can be your favorite YouTube videos, links to your favorite social media posts, your favorite song as background music, and that picture you took on that one trip to Disney World.

Step 4: Customize & Test

You can customize the look and feel of your widget to match your brand or the project that you’re creating.

Then, test it out by clicking Preview. Then, download Zappar, an awesome augmented reality tool, on your iOS or Android device and hover your device over your widget’s ZapCode (like the one you see in the GIF below) to bring your creation to life.

Tip: I highly recommend putting short titles for the content you pick. It will make it easier for them to appear on the widget.

Step 5: Publish your widget

Once you are happy with your widget(or make adjustments), click on Publish!

Your widget is now available for the world to see! Check out the one I made for a micro-course I created with my colleague, Veronica Celina Dominguez for a course creation challenge:

Bonus tips

  • Make sure your widget is tailored to your audience’s needs: Remember you want to engage and wow your audience with your widget, so make sure the content that you use reflects that. Think of it as being a waiter at a restaurant serving a regular cheeseburger with no pickles just like your customer ordered.

  • K.I.S.(Keep It Simple): While it’s tempting to make your widget engaging by adding a lot of GIFs, links to websites, and music clips, sometimes the coolest thing is the simplest one, so be very mindful of the amount of content that you put in your AR widget.


Congratulations! 😊 You just created your first AR widget! 🥳 You are now a tech-savvy wizard who can make AR magic without touching a single line of code! 🤩👏 If you’re looking for more ways to make magic, then click on the follow button at the top of this post, and don’t hesitate to reach out to me via Linkfree if you need a buddy in your journey into tech! Now go forth and wow others with your AR magic! 😊

Brown-skinned Black witch does a magic to disappear


Disappear The Craft GIF by Mobius

Excited Good Morning GIF by Rosanna Pansino

Pokemon Go GIF from "Pokémon Go Personal Drivers, Bar Crawls, and Walking Tours: Is Pikachu the Newest Travel Expert?" by Brooke Bobb

Television Love GIF by Psychdre

Did you find this article valuable?

Support Christine Belzie by becoming a sponsor. Any amount is appreciated!