Guides
Configure poster and carpet triggers.
Room Viewer is configured through HTML attributes on clickable elements.
Poster trigger
Use poster for image-based artwork previews. Poster triggers require both size attributes.
<button
data-vizbl-room-viewer-dialog
data-vizbl-room-viewer-type="poster"
data-vizbl-room-viewer-resource="https://example.com/poster.jpg"
data-vizbl-room-viewer-name="Abstract Poster"
data-vizbl-room-viewer-width="1"
data-vizbl-room-viewer-height="1.5"
>
Preview poster
</button>Carpet trigger
Use carpet for GLB-based carpet previews. Carpet triggers do not use width or height.
<button
data-vizbl-room-viewer-dialog
data-vizbl-room-viewer-type="carpet"
data-vizbl-room-viewer-resource="https://example.com/carpet.glb"
data-vizbl-room-viewer-name="Sample Carpet"
>
Preview carpet
</button>Trigger attributes
| Attribute | Required | Applies to | Description |
|---|---|---|---|
data-vizbl-room-viewer-dialog | Yes | all triggers | Marks an element as a Room Viewer trigger. |
data-vizbl-room-viewer-resource | Yes | poster, carpet | Resource URL. Use an image for posters and a GLB file for carpets. |
data-vizbl-room-viewer-type | Yes | poster, carpet | Supported values are poster and carpet. |
data-vizbl-room-viewer-name | Yes | poster, carpet | Product name shown in the viewer. |
data-vizbl-room-viewer-width | Yes | poster | Poster width. |
data-vizbl-room-viewer-height | Yes | poster | Poster height. |