---

Are you excited to incorporate augmented reality (AR) features into your email marketing campaigns? AR allows you to link an email image to a 3D object and, using the camera on your phone, place it in real life. This technology lets you move the object around, walk around it, and resize all in "real life.” For example – the guitar in the images below can be a flat 2D image in an email, but when clicked on, you can put it in the corner of your office and check out how it looks, move around it to see it from all angles, or change the size to see what best suits the room. Apple announced that their new AR Quick Look and ARKit 2.0 will be launched in iOS12, so now it’s possible. [caption id="attachment_5158" align="alignnone" width="219"] AR Quick Look with the guitar in 'object' view[/caption] [caption id="attachment_5159" align="alignnone" width="213"] AR Quick Look with the guitar viewed inside the office.[/caption]   In this post, we’ll look at how you can integrate AR into your emails. Yes, you can copy the code at the end of this document and send an augmented reality experience, all by just adding one line of code to your email!

File Type

Before you start coding your email, you’ll need a file that can be used within AR Quick Look.  Apple worked with the team at Pixar (yes, that Pixar - with the lamp) to create a file type called .usdz (Universal Scene Description Zip). If you or a team member have the skills to create 3D models, or if you already have one in mind, you can use most 3D formats and convert to .usdz using an online tool like Vectary. If you want to try this technique out and do a bit of testing, you can also go to Apple’s ARKit website and check out the AR Quick Look Gallery. This gives you the option of finding files in the page source to try in your own test before spending time learning how to create a 3D image yourself.

The Code

The HTML markup for using AR is as follows. This is direct from Apple:

<a rel="ar" href="model.usdz">
  <img src="model.jpg">
</a>

In the opening anchor tag <a> you’ll need to declare the attribute relationship rel= and give it ar before linking to the .usdz file. Then, you’ll follow with the ‘thumbnail’ image. The thumbnail can be any linked image file in any normal format. This is the image the user will see when she opens the email, and what she can click on to open the AR experience.

Using a .usdz File in an Email

If you add the above code straight into your email it, unfortunately, will not have a graceful fallback. If the email client does not support the .usdz linked file, it will only download the file to the user’s device. Not great! However, if you use @supports (-webkit-overflow-scrolling: touch) {} you can can target iOS users. You can then create a hidear/showar class to use on elements.

@supports (-webkit-overflow-scrolling: touch) {
      .showar {
            display:block!important;
      }
      .hidear {
            display:none!important;
      }
}

Within a table email structure, the code for the AR image now looks like the following:

<table width="500" border="0" cellspacing="0" cellpadding="0" class="w100pc" bgcolor="#000000">
  <tr>
    <td align="center" class="showar" style="display:none;">

<div><a rel="ar" href="https://developer.apple.com/arkit/gallery/models/stratocaster/stratocaster.usdz"><img src="https://arcdn.net/ActionRocket/Blog-article/ios-ar/images/stratocaster-black.jpg" width="100%"></a> </div>
        </td>
<td align="center" class="hidear" style="display:block;">
            <div><img src="https://arcdn.net/ActionRocket/Blog-article/ios-ar/images/stratocaster-black.jpg" width="500"></a> </div>
        </td>
         </tr>
</table>

Currently, the user experience is lacking a little for AR in email. In some demonstrations with .usdz files the AR Quick Look opens within the native iOS mail app, but only when the file is sent as an attachment. This isn’t useful for marketing emails or sending from email service providers (ESPs). Apple says further integration will be coming in the future, but for now, the user flow looks like the example below: If you want to send a test email to yourself, find my homage to an Apple AR launch email on Codepen. Grab the code and send it to an iPhone near you!

Support for AR

The following Apple devices support the AR platform:

iPhone	iPad
Xs	Pro
Xs Max	6th generation
Xr	5th generation
X
8
8+
7
7+
6s
6s+
SE