Teledomica Website Integration Guide
Introduction
Welcome to our step-by-step tutorial on how to integrate Mobile AR functionality into your website using the Teledomica. This guide will help you enable your visitors to interact with 3D models through augmented reality directly on their mobile devices. Whether showcasing architectural designs, product prototypes, or artistic creations, adding AR capabilities enhances the interactivity and engagement of your online presence. Let’s begin the process of making your site AR-enabled!
Prerequisites
Before you begin embedding the custom button into your website, there are a few requirements to ensure a smooth process:
HTML and JavaScript Knowledge: You should be familiar with HTML and JavaScript as you'll need to insert and possibly modify the embed code within your website's codebase.
Website Access: Ensure you have administrative access to your website’s backend where you can edit HTML and JavaScript.
Teledomica Account: A registered account on the Teledomica webapp is necessary to upload your 3D model and generate the embeddable button.
Prepared 3D Model: Have your 3D model ready for upload in a supported format as specified on the Teledomica webapp.
Uploading the 3D Model and Description
To integrate your 3D models into your website with interactive and augmented reality features, follow these steps to upload and set up your model in the Teledomica webapp:
1.Access the Upload Interface:
Navigate to Uploading a 3D Model to Showcase.
Select the option to create a new “Showcase”.
2.Upload Your 3D Model:
Follow the on-screen instructions to upload your 3D model file.
Fill in the required information about the model in the fields provided.
3.Save and Publish Your Model:
After uploading your model and entering all necessary details, save your entry. At this point, your model will be in draft status.
Click the ‘Publish’ button to proceed. Upon clicking, look for the option labeled "Enable 3D and Augmented Reality for Web and Mobile" and check this box.
4.Obtain Embed Code:
After enabling 3D and AR features, the "Sample Code for Web AR" button will appear under your showcase.
Click this button to view the sample code required for embedding the button on your website, enabling visitors to view the models using Mobile AR.
Copying the Embed Code
After generating your button in the Teledomica webapp, you will be provided with a sample code snippet. This code is ready to use and can be customized to better fit the style and functionality of your website:
Copy the Code: Simply click the button to view the sample code, and use the copy function to place it onto your clipboard.
Embedding the Button on Your Website
To integrate the button into your website, follow these steps:
Choose the Location:
Decide where on your website you want the button to appear. This could be a product page, a dedicated showcase section, or any other part of your site.
Paste the Embed Code:
Insert the copied code into the HTML of your website at the chosen location. If you are using a content management system, you might need to access the HTML editor or a specific area for adding scripts.
Customization:
The default button will create a lightbox and open an iframe inside it when clicked. You can customize the appearance and functionality of this button using CSS.
If you prefer, you can also develop your own method to display the iframe. This might involve more advanced JavaScript or integrating with other components on your site.
Test the Button:
After embedding the code, test the button on your website to ensure it opens the 3D model correctly and functions as expected across different devices and browsers.
Testing the Button
To ensure that your embedded button works correctly and provides the desired user experience, test it under the following scenarios:
Scenario 1: Testing on Desktop Browsers
Open Your Website in a Desktop Browser:
Navigate to the page where the button is embedded.
Click the button to initiate the feature.
QR Code Verification:
A QR code should appear since desktop browsers do not support Mobile AR directly.
Use your smartphone camera to scan the QR code displayed on the screen.
Mobile AR Activation:
After scanning, the 3D model should open on your mobile device.
Tap the "View in Your Home" button to launch the augmented reality feature and see the model in your space.
Scenario 2: Testing on Mobile Devices
Open Your Website in a Mobile Browser:
Ensure you are using a device with AR capabilities (iOS or Android).
Navigate to the button and tap to open.
Direct AR Experience:
There should be no QR code. Instead, the 3D model should load directly in the browser.
Tap the "View in Your Home" button to place the model in your real-world environment using AR.
Cross-Platform Compatibility:
Test on Multiple Devices:
Use both iOS and Android devices to ensure the button and AR features work seamlessly across different platforms and AR frameworks.
Troubleshooting Common Issues
When integrating AR features into your website, you might encounter specific issues, especially related to cross-platform compatibility. Here are common problems and their solutions:
Issue 1: Model Not Displaying on iOS
Material Compatibility:
iOS devices require conversion from GLB to USDZ formats for AR, which can cause issues with certain materials. If the model displays correctly on Android but not on iOS, check the materials used in your 3D model.
Replace any incompatible materials with ones that are known to work well on iOS to ensure proper display and functionality.
Issue 2: Model or Textures Too Large
File and Texture Size:
Both Android and iOS devices might struggle with large 3D models or textures, which can prevent the model from loading or cause performance issues.
Reduce the resolution of the textures and optimize the 3D model file size. Aim for a balance between quality and performance to ensure a smooth experience on mobile devices.
Conclusion
Congratulations on successfully integrating an interactive 3D model viewer into your website! By embedding this functionality, you have enhanced your visitors' experience by providing them with an innovative way to explore your products or designs through augmented reality. We encourage you to continue exploring the capabilities of AR to further engage and inspire your audience.
Support and Resources
If you encounter any issues or have questions while implementing or maintaining your embedded 3D viewer, our support team is here to help:
Technical Support: For immediate assistance, please contact our technical support team at support@teledomica.com.
We hope this tutorial has been helpful for you, and we look forward to supporting your journey in leveraging AR technology to enhance your digital presence.