Embedding
Simply copy and paste the script tags into your site's HTML, and you're all set.
<air-viewer/> Attributes
Attribute | Description | Example |
|---|---|---|
| url | The URL of the 3D scene to load. This is required. | <air-viewer url="https://viewer.aircada.com/d5fff905b" /> |
| smartid | Unique identifier for the scene, alternative to `url`. | <air-viewer smartid="d5fff905b" /> |
| viewkey | Secure key for accessing private scenes. | <air-viewer viewkey="your-secret-key" /> |
| background-color | Sets the background color of the viewer (HEX or color name). | <air-viewer background-color="#ffffff" /> |
| style | Apply custom CSS styles to the viewer. | <air-viewer style="width: 100%; height: 500px;" /> |
| lazy | Delays loading of the viewer until it enters the viewport. | <air-viewer lazy /> |
| unload | Automatically unloads the viewer when it exits the viewport. | <air-viewer unload /> |
| transition | Enables transition animations on load/unload. Defaults to fade. | <air-viewer transition /> |
| transition-type | Sets animation type ('fade' or 'grow'). Default is 'fade'. | <air-viewer transition-type="grow" /> |
| transition-duration | Animation duration in ms. Default is 300. | <air-viewer transition-duration="500" /> |
| transition-easing | Animation easing function. Default is 'ease'. | <air-viewer transition-easing="ease-in-out" /> |
Example Walkthrough
Embed any scene
Create and publish a scene, grab the embed code, and paste it into your site. Works with standard html, wordpress, shopify, react, angular, vue, and more.