Can I Implement Virtual Try-On on My Website for Desktop Use?

How to Incorporate a Virtual Try-On Experience in an Iframe for Desktop Use

Aryel
Written by AryelLast update 3 months ago

Have you ever considered incorporating a virtual try-on feature into your website but hesitated due to the hassle of accessing it only through a mobile device? Well, worry no more! With Aryel, this obstacle is a thing of the past. By simply enabling the multi-device option in your campaign settings, you can now utilize it seamlessly on desktops as well.

Once this option is activated, you gain the flexibility to integrate your virtual try-on experience within an iframe.

Let's explore an example together...

We've opted for the 'Virtual Try-On + Audio + Link' template, accessible at the following URL: https://app.aryel.io/fcec3c75-2982-4eda-8d04-f3d394e600d4/virtual-try-on-audio-link

Incorporating this URL into an iframe is incredibly straightforward!

Below is a simple webpage where we've embedded an iframe featuring the aforementioned experience:

<!DOCTYPE html>
<html>
<body>
<h2>Test iframe</h2>
<iframe src="https://app.aryel.io/fcec3c75-2982-4eda-8d04-f3d394e600d4/virtual-try-on-audio-link" allow="camera" height="600" width="500" title="Iframe Example"></iframe>
</body>
</html>

Here's a quick breakdown of the elements within the <iframe> tag required to host the experience:

  • src: Insert the source URL for your experience.

  • allow: Set to "camera" to grant access to the camera.

  • height & width: Define the desired dimensions.

  • title: Provide a name for your iframe.

That's it! Simple as can be! Give it a try yourself, and if you need assistance, feel free to reach out to our support team. 😊

Did this answer your question?