Overlaying an Ocavu Experience Launcher Icon is simple: take an existing product image, wrap it in an anchor tag and add specific data-ocavu- attributes!
Step 1
Determine which image to overlay the Experience Launcher Icon onto, or add a new image for that express purpose. For example:
<img src="https://view.ocavu.com/seek/default-test-model/thumbnail" alt="Default Test Model">
Note: You can use an Ocavu Model Preview as the source for your image element. See the example at the bottom of this page.
Step 2
Wrap that image in an anchor tag and include the data-ocavu-icon attribute
<a data-ocavu-icon>
<img src="https://view.ocavu.com/seek/default-test-model/thumbnail" alt="Default Test Model">
</a>
Step 3
Add a call to action by including the data-ocavu-cta attribute to help users understand that the icon represents an interactive and immersive experience:
<a data-ocavu-icon data-ocavu-cta="View in Your Space">
<img src="https://view.ocavu.com/seek/default-test-model/thumbnail" alt="Default Test Model">
</a>
Step 4
Add the necessary attributes to enable the Ocavu Web SDK to launch an experience when the user interacts with the icon or image. Include data-ocavu-key to dictate which model to load within the default OcavuView experience:
<a data-ocavu-icon data-ocavu-cta="View in Your Space" data-ocavu-key="default-test-model">
<img src="https://view.ocavu.com/seek/default-test-model/thumbnail" alt="Default Test Model">
</a>
Launch a custom experience
Additionally including data-ocavu-xp will designate a custom experience to launch:
<a data-ocavu-icon data-ocavu-cta="View in Your Space" data-ocavu-key="default-test-model" data-ocavu-xp="auto-rotate">
<img src="https://view.ocavu.com/seek/default-test-model/thumbnail" alt="Default Test Model">
</a>
Embed a model preview
You can use the Web SDK to automatically embed a model preview or thumbnail image. To do so, add the data-ocavu-thumbnail attribute to your image element. Example:
<a data-ocavu-icon data-ocavu-cta="View in Your Space" data-ocavu-key="default-test-model">
<img data-ocavu-thumbnail alt="Default Test Model">
</a>
For more information: How do I embed a model preview?