The Visual Component provides a built-in set of UI buttons and modals known as the Embedded UI (previously called the Native UI) that enable common features like augmented reality, fullscreen mode, and product snapshots right out of the box.
Enabling the Embedded UI
Adding the Embedded UI is as easy as adding a new tag —
<av-native-ui> — inside your Visual Component, as a sibling to the
<!-- UI content will go in here -->
From there, adding additional features and UI buttons is as easy as adding specific tags within that container:
- Fullscreen mode:
- Augmented reality:
- Custom UI buttons:
Adding feature buttons to the Embedded UI
To have these features’ buttons displayed in the Embedded UI (i.e. within the Visual Component), the
native-button attribute must be added to the feature’s tag.
<!-- This will show the fullscreen button in the Embedded UI -->
<!-- This will make AR functions available but will NOT show the AR button -->
Without it, the functionality of that feature will be made available to the rest of your page, but the button itself will not be shown on the UI.