Embed 3D Objects in Story Map Tour

[ChrisAult1]

I'm working in the Story Map Tour web builder and I'm hoping to integrate manipulable 3D objects (like these on the Sketchfab site) into the Story Map Tour panel. The Sketchfab models offer embed code using an iFrame wrapped in a div (example below) but when I paste that code into the builder, the < > brackets around the iFrame get converted to something like unicode (&lt;) and when I preview the Story Map the panel just displays the iFrame code rather than interpreting it.

Thank you in advance for any suggestions.

Embed code from Sketchfab:

<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/a539dafa41a24390b84166bd4515ff43/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
 <a href="https://sketchfab.com/models/a539dafa41a24390b84166bd4515ff43?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">The Bird&#39;s Room</a>
 by <a href="https://sketchfab.com/curlscurly?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Curlscurly</a>
 on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>

[RupertEssinger · Accepted solution]

Hi Chris,

The Story Map Tour app caption doesn't support the iframe tag, but here's a way you can add that sort of content into the main image panel: 

1. In the Tour builder, use any option to start building your except the option to upload your images directly into the Builder (because that will require that the main images are strictly images that you upload). You could also start editing an existing tour, as long as it doesn't use the image upload workflow. 

2. Add a new tour point and in the dialog that appears, under Media, choose the Video option and click the Other option radio button. In the Other option paste in the src part of the embed code from above, i.e. that part that references the actual Sketchfab content ( https://sketchfab.com/models/a539dafa41a24390b84166bd4515ff43/embed  ). Then paste in the URL to a thumbnail (e.g. https://downloads.esri.com/blogs/places/sandiego/cafe_222_logo.jpg ). Note that instead of adding a new point, you could also edit an existing point, in which case you just paste that Sketchfab URL into the dialog for changing the media as a video, and you won't need to add a thumbnail because one will already be there. 

This will let you incorporate that content into the Map Tour. Because it is treated as a video, your readers will have to initially click a button in order to start viewing the content. But this is a nice way to include it in a tour.

If you want to embed the content in narrative along with other images, we'd recommend the Story Map Journal, Story Map Series, or Story Map Cascade app.

Hope that helps

Rupert

[ChrisAult1]

Thank you, Rupert! I was thinking the caption area was my only opportunity to insert custom HTML, but I followed your suggestion and things are working beautifully.

[RupertEssinger]

PS. Here's an example Map Tour using some panoramic imagery web content from Esri Startup Program member Hangar: 360-Degree Aerial Images of the Carr Fire - NBC Bay Area 

[LucasMartinez]

Hello, thanks for this precision.

I am actually looking for a way to integrate a sketchfab model through a link into multiple kinds of Story Maps (Map Journal, Map Series, Map Cascade) or any kind of Web App, but I couldn't find any documentation about doing so. Do you have any tips or general indication about this process?

I would really appreciate,
Thank you