Requirements:
- A Ocavu Account (How do I get an Ocavu account?)
- 3D Models loaded into Ocavu Portal (How do I request or upload 3D models of my products?)
QR codes are an effective way to guide users from desktop platforms and printed materials to a 3D/AR experience. However, an important secondary objective is to ensure that the user is directed to (or remains on) a webpage controlled by your brand, such as a product detail page.
Ocavu provides the following implementation strategies that ensure the success of both objectives.
QR codes to web pages that have the Ocavu Web SDK Installed
Additional Requirement:
- The Ocavu Web SDK must be installed on your web page (How can I load the Ocavu SDK?)
This is the recommended strategy. It directs your users to your website and keeps them there after the 3D/AR experience.
Steps:
- User scans the QR code.
- User lands on your web page and after the Ocavu Web SDK loads it automatically launches the 3D/AR experience
- After the experience exits, the user is still on your web page.
How to construct a QR code that auto-launches Ocavu Experiences on your web page:
- Copy the URL of the target webpage that has the Ocavu Web SDK installed (typically, a product detail page).
- Take note of the configured model key of the desired model in Ocavu Portal (often, it matches the SKU of your product).
- Add to the target webpage URL the Ocavu auto-launch query parameter:
?ocavu-key=YOUR_MODEL_KEY(replace YOUR_MODEL_KEY) - Generate a QR code from the modified URL using the following tool:
How to embed a QR code using the Ocavu SDK:
- Add a new
<img>element to the target webpage. - Take note of the configured model key for your desired model.
- Add the
data-ocavu-keyanddata-ocavu-qrattributes to the<img>element as shown and replace YOUR_MODEL_KEY with the desired key:<img data-ocavu-key="YOUR_MODEL_KEY" data-ocavu-qr>
Example:
Scan this QR to view a model in your space!
QR codes to Ocavu Portal standalone model pages
Additional Requirement:
- A "Link URL" added to the details of each 3D model in Ocavu Portal
This strategy is typically used for prototyping or when you do not have sufficient permissions to modify your website.
Steps:
- User scans the QR code.
- User lands on an Ocavu controlled webpage and the 3D/AR experience will automatically launch (the webpage can be customized to match your brand).
- After the experience exits, the user can click a button to visit the configured "Link URL" (which should be the product detail page on your website).
How to get a QR code to a Standalone Model Page:
- Navigate to Ocavu Portal.
- Select the desired model.
- Click the "Share" action from the context menu, dropdown, or toolbar.
- A dialog will appear that contains a link to that model's standalone page, as well as a QR code of that link.