Part IV: Embed your AR ready models (almost) anywhere

Prajwal Bhaskar
Scapic
Published in
6 min readSep 12, 2019

This is Part IV in a four-part series about getting your product from a 3D model to embedding it as an AR element on any platform.

Read the previous parts:

Part IV — Embed your models onto your pages

Now that you’ve got your models ready to be brought into the real world with AR, you need a way to get them to your audiences easily & efficiently. This means that you need to make sure —

  1. Everyone can view it, hassle-free
  2. Efficiently get it out to your audiences

Everyone can view it, hassle-free

This means every user who has a compatible AR device should be able to access the model without jumping through hoops. It’s a clear trend that people really don’t like installing apps that aren’t fulfilling a recurring need (Google’s Mobile App Marketing Insights), users tend to either install an app, use it and remove it soon after or avoid any service that needs a separate app install altogether.

Efficiently get it out to your audiences

You don’t spend extra resources on getting it out to your audiences, this means you need an efficient way to allow them to access & interact with the models.

If you have an existing app, the easiest way to do achieve both the reach and ease of access is to integrate all the models into the app directly. But when you load the models directly, you risk bloating the app and increasing load times.
When an app starts increasing in size, users, especially the ones with mid-range phones (a majority of smartphone owners), tend to remove the app because their phone won’t have enough storage space.

So how do you overcome these drawbacks with the size and integration issues?

The answer might surprise you.

IFrames & the web

What are iframes?

IFrames are a way of inserting content from a different source into your own page or app which can be used to display dynamic content, without the user having to reload the page at any time.

This means that iframes sit separately from the main page/application but achieves the same functionality seamlessly — without the extra size, the integration time or distribution issues — all of this with a single line of code.

AR Scape embeds — Scapic’s Platform

Once you’ve got your models ready for augmented reality (learn more here), you can grab the single line of embed code directly from the project.

You can pick between three types of embeds —

  1. A viewer embed: This provides a 3D viewer along with a brief description of the project that you add when you share it. This is recommended if you need to showcase the product directly on the page.
  2. A card embed: This provides a single image that can be clicked to load the AR model. This is ideal if you don’t want to lead the entire viewer and would rather have a still image.
  3. An AR button: With this type of embed, you can use a single button to provide the entire AR functionality for the listing. This is generally not recommended unless there’s an actual need since it provides no interactivity.
Types of embeds available on AR Scapes

Once you’ve selected the right option for you, just copy the iframe code and you’re done!

Just copy the iframe code with the click of a button

With this one line of code, you can integrate the 3D model anywhere on a page or app.

Now that you have everything you need to get a 3D product of your model onto any page or app, here are a few examples —

Embed it onto a product listing

A viewer type embed on a demo site.

If you have an online store or have a listing on an e-commerce website, you can use the viewer type embed on a product listing page and let the customer view and interact with the product directly. They can even click on the preview button to have them view it in their space with AR.

The embed can also be used on an application and will behave the same. The load times are fully dependent on the network speed of the user and on nothing else, this ensures that your page load doesn’t take a hit.

Embed it onto your landing page

If you’ve got a dedicated page for your product or a portfolio for your work, you can create an AR Scape with your 3D model and have your audience interact with the models & view them in the real world.

Embed it onto your blogs

An AR Scape embed on a blog

You can also use the embeds to level up your blogs. Simply use the viewer embed and have your readers interact with the model without leaving the page.

This would ensure higher retention rates and also keep your readers coming back for more.

Next steps

Getting your AR creation isn’t as difficult as it’s made out to be, with the embed code we provide, you can integrate it onto your site or any platform that allows iframe embeds with one single line and with 3D technology becoming more accessible by the day and the added benefit of using 3D to show the object in the real world using Augmented Reality, there hasn’t been a better (or easier) time to bring products to life.

We hope this series was helpful to you, and want to see what you create!

If you have any questions you can reach out to us at any time here.

3D creation is not new, but most organisations are not set up to create/use 3D assets efficiently. For marketers, e-commerce and businesses, this means the barrier to entry for delivery of compelling 3D and AR experiences is rapidly decreasing, opening the door for increased engagement and consumer understanding.

Scapic’s platform provides an easy way to deliver this to all media such as websites, Facebook, Instagram as well as the ability to quickly and easily export assets to match the specifications of each distribution channel and online platform.

Don’t have 3d Models and want to showcase 3D on your site?

Don’t worry, we’ve got your back. Contact us.

Have your own gLTF models?

Learn how to get them ready for AR across a multitude of devices & media — here or contact us.

Create your own VR, AR, 3D and 360° experiences, all without any coding or 3D expertise, on Scapic.

--

--