QR Modal
Customizing the QR modal, the viewer displays for devices incompatible with AR is possible through the exposed API.
CSS Variables
| CSS variable | Description | Default value | Options |
|---|---|---|---|
--qr-corners | Corners around the QR image | #4d4d4d | Any CSS color |
Parts:
The CSS pseudo-element :part allows to control the css of elements within the shadow tree that has a matching part attribute.
| Part name | UI element |
|---|---|
qr-fab | The floating action button that closes the modal |
qr-container | The container of the modal (most outer element) |
qr-backdrop | The backdrop of the modal |
qr-dialog | The dialog element |
qr-usage | The first line of text below the QR |
qr-wrapper | The element wrapping the QR image |
qr-requirements | The requirement text (two last lines of text in the modal) |
view-in-ar | The floating action button that shows the modal |
Changing the modal text
It is possible to change the text of the modal through our localization API.
| Key | value |
|---|---|
qr.alt | QR code |
qr.usage | Point your smartphone or tablet's camera to scan the QR code and see this product in your environment. |
qr.requirements.key | Minimum requirements |
qr.requirements.value | iOS 13, iPadOS 13 or Android with AR Core 1.9 or higher |
viewInAR | View in AR |