How to Create Customizable WebAR Experiences
Tags: webdev, programming, augmentedreality, tutorial
Published: 2021-09-20 10:21:40

Interested in creating an AR experience catered specifically to you without needing to code at all? Try using [echoAR](https://www.echoar.xyz/)’s 3D-ready cloud platform to create personalized WebAR experiences!

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132415641/Pi2iblg2_.png)

Many developers and content creators are overwhelmed by the complexity of creating AR experiences, especially when it comes to coding for different platforms. This is where [echoAR](https://www.echoar.xyz/) comes in. With echoAR, no technical knowledge is required to create personalized WebAR experiences. **Here is a step by step guide to quickly and easily create personalized and customizable WebAR experiences using echoAR:**

### Adding a 3D Model

Once your [register](https://console.echoar.xyz/#/auth/register) to the echoAR platform, you can add content by clicking the “**Add To Cloud**” button.

![2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132484116/2ANLWZJFt.gif)

You can upload your own models and also use the **[search](https://docs.echoar.xyz/quickstart/add-a-3d-model)** bar to find free 3D models that you can instantly add to the console.

### Using the WebAR Customizer

You can now use our **[WebAR Customizer](https://console.echoar.xyz/#/pages/customizer)** to generate no-code WebAR experiences. You can personalize all the experiences you create through the platform by adding buttons, actions, audio, and a custom background.

![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132537169/zCYWEy1-L.png)

This allows you to generate webAR experiences that are more engaging and interactive, and include your branding:

![4.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132581119/iZTT7Cryz.gif)

Note that this feature is only available to [enterprise clients](https://www.echoar.xyz/pricing).

### Setting a Background Image

Use the Background card to set a background image for the webAR experience. Click the “upload” button and choose an image file (.png or .jpg) or an HDR file (.hdr).

![55.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132671388/E1HLChnTR.gif)

Note that the image will only appear in the preview screen prior to clicking the “See in AR” button.

### Adding Audio

Use the Audio card to add an audio file to serve as background music for the webAR experience. Audio will only start playing after a user interaction of any type (screen touch gesture, click, etc.).

Click the “upload” button and choose an audio file (.mp3 or .wav). You can also toggle the audio on and off by clicking the Audio card.

![6.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132660716/1fGKd6RrD.jpeg)

### Including Camera Capture Functionality

Use the Camera card to include a camera capture button in the webAR experience. It will allow viewers to grab a snapshot of the AR scene. You can toggle the camera capture on and off by clicking the Camera card.

![7.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132692282/SYtPZvJ19.jpeg)

### Adding Buttons, Actions, and a Logo

Use the Button and Logo card to introduce clickable buttons, actions, and your own logo to the WebAR experience.

You can set up to nine (9) UI elements on screen at once (on the **top right** corner, **top center**, **top left** corner, **middle right**, **center**, **middle left**, **bottom right** corner, **bottom center**, and/or **bottom left** corner).

![8.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132746443/xFUIVHW2Z.jpeg)

See all the button type options [here](https://docs.echoar.xyz/web-console/compute-pages/customize-page#adding-buttons-actions-and-a-logo).

### Viewing Click Analytics and Click-through-Rates

When buttons are configured, the number of button clicks and the overall click-through-rate (CRT) will display alongside each button.

![9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132775163/gOLplARtx.png)

**You did it! 🎉**

![10.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632132819306/YLMcwGH7q.gif)

### Final Thoughts

echoAR allows users to create WebAR experiences with endless possibilities. Each experience can be used for different purposes — recreational, educational, commercial, and more. with echoAR, you can create customized WebAR experience for a verity of uses — [sports](https://medium.com/echoar/all-the-ways-augmented-reality-and-virtual-reality-are-shaping-sports-ef91b6f4423f),  [fashion](https://medium.com/echoar/augmented-reality-virtual-reality-fashion-try-before-you-buy-fcd281ef6d4b) (try before you buy!), [shopping](https://medium.com/echoar/how-augmented-reality-is-redefining-online-shopping-and-my-own-shopping-experience-125fa42e921c), [healthcare](https://medium.com/echoar/how-augmented-reality-and-virtual-reality-are-revolutionizing-healthcare-db46c462d8bf), [real estate](https://medium.com/echoar/how-ar-vr-are-transforming-the-real-estate-industry-25d183d7e5), and so much more! If you want to create a customized WebAR experience, try 
[echoAR](https://www.echoar.xyz/) today.

### Troubleshooting
Troubleshoot issues [here](https://docs.echoar.xyz/unity/troubleshooting). You can check out our full documentation for other useful tutorials [here](https://docs.echoar.xyz/) and also reach out to our support team [here](http://go.echoar.xyz/join).

### Frequently Asked Questions (FAQs):

**How do I get access to the WebAR Customizer?**

This feature is available to our [enterprise clients](https://www.echoar.xyz/pricing). You can [email us](enterprise@echoAR.xyz) to be granted access.

**Is White labeling of for this platform possible?**

Yes! For [enterprise clients](https://www.echoar.xyz/pricing), white labeling is an option! You can [email us](enterprise@echoAR.xyz) to learn more.

**Is echoAR compatible with different AR/VR technologies?**

Yes! You can use echoAR to create no-code WebAR experiences but this is just the tip of the iceberg. Our cross-platform system supports any AR/VR client-side SDK for developers to choose to build their app, such as ARCore, ARKit, Vuforia, WebXR, AR.js, Swift, Flutter, Oculus SDK, Unity-based SDKs, Microsoft HoloLens, MagicLeap, and more. echoAR is also a Unity Verified Solutions Partner.

**Where can I learn more?**
Check out our AR/VR dev workshop recording on [YouTube](https://www.youtube.com/watch?v=J_h_ygpxqbg&list=PLlNGTOzDSLPMaoyhYpoOm_nKPx3BHsBje) and our [website](https://www.echoar.xyz/). You can check out our full documentation for other useful tutorials [here](https://docs.echoar.xyz/).

**How do I get in touch?**
If you have any other questions, join our [Slack](http://go.echoar.xyz/join), send us an [email](enterprise@echoAR.xyz), reach out on [Facebook](https://www.facebook.com/echoARInc/), connect on [LinkedIn](https://www.linkedin.com/company/echoar/), or [tweet](https://twitter.com/_echoAR_) to say hello.

****
> echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

![11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632133123007/D1hYGpQT0.png)