AR/3D Viewer customizations
Last updated: Jul-20-2023
Want to elevate your website's impact and improve content velocity? We’re ramping up Beta customers for Dimensions, an exciting new 3D product.
We invite you to join a 30-minute exploratory call and apply to join our Private Beta. Fill out this survey to apply.
The AR/3D Viewer enables you to customize the button design, the loader, and the background image for the viewer, as well as localizing (or otherwise customizing) the UI text strings.
Personalized AR button
You can replace the View in AR button with your own custom CSS and text by using HTML5 slots. The button must include the following attribute slot="ar-button".
"zoom-in" and "zoom-out". Personalized loader
The loader is what is shown while the 3D model is loading. You can replace the entire loader element by providing a slot div with the following attribute slot="loader".
The following example displays a spinner while the model is loading. Refresh the page to see the loader display.
Background
The AR/3D Viewer is transparent, so you can provide any kind of background to the parent HTML5 element. For example:
Localization
You can provide your own translation strings and toggle between locales on the fly by calling the loadLanguages and changeLanguage functions.
You need to replace all the following default string values:
- Within the AR QR code dialog:
-
viewInAr: 'View in AR' -
viewInSpace: 'View in your own space' -
inAr: 'in augmented reality' -
scanQrCode: 'Scan this qr code:' -
clickToCopy: 'Or click to copy this url:'
-
- Within the loader:
-
loadingModel: 'Loading 3D Model...'
-
Here's an example of replacing the English strings with Spanish:
- If you provide your own custom strings for English you still need to call
changeLanguage('en');. - You can use any value for the language code.
Error
Rate this page:
