AI Showroom

Dig into tens of videos and articles to help you learn Designhubz, 3D design, AR integrations, and much more.

Introducing the AI Showroom

Welcome to the future of e-commerce.
Introducing Designhubz's AI Showroom Integration Solutions.

‍At Designhubz, we offer two primary integration options for your e-commerce platform: Air and Pro.
Each solution is designed to cater to different needs and levels of customization.Let's start with our Air version. It's our streamlined solution, straight out of the box.
Perfect for those who want a quick setup with minimum customization.

‍With Air, you simply add our widget to your e-commerce website.
This is done through an external JavaScript file and a custom HTML element with the necessary attributes, such as SKU ID and Org ID.
‍The Air solution offers a user-friendly drag-and-drop widget and requires only minor additional scripting.
You can check out our current UX sample option.
‍And the best part? You can go live on your site the very same day.

‍Next, we have our Pro version.
This is where you can truly embrace the power of full SDK integration, tailored to your brand's unique identity.
‍The Pro integration offers maximum control with our VTO SDK.
From snapshots, variation selection, mode switches, to recommendations display, the possibilities are vast.

‍Our SDK is available as a JS/TS npm package, allowing you to build a customized experience that aligns with your brand.
Detailed documentation and instructions can be found on our GitHub repositories here and here.
‍Compared to the Air integration, the Pro version offers notable UX upgrades, enhanced UI transitions, draggable scrolling areas, and much more.

‍The estimated time for the Pro integration to go live on your site varies.
If implemented by your tech team, it can take around 3-4 weeks.
However, if you choose to have it implemented by Designhubz, we can have it up and running in approximately 2 weeks.

‍To build the experience and load a product, you'll need both organization and SKU IDs.
Here's a sample code on how to use these variables with our SDK.

Whether you choose the simplicity of Air or the customization power of Pro, Designhubz is here to revolutionize your e-commerce experience.

Air Integration: Quick Setup with Minimum Customization

Welcome to the Air Integration tutorial by Designhubz.
Today, we'll guide you through the quick and efficient setup of the Air widget on your e-commerce platform.

The Air version of our integration solution is designed for simplicity and speed. I
t's the perfect choice for those who want to get started immediately with minimum customization.
‍
‍Let's begin by adding the Air widget to your website.
‍To integrate the Air widget, you'll need two main components: an external JavaScript file and a custom HTML element.

First, we'll integrate the external JavaScript file. This file contains the necessary scripts to run the Air widget.
Simply paste the provided JavaScript link into the head section of your website's HTML. This will ensure the widget's functionality is loaded when your site is accessed.

Next, we'll add the custom HTML element. This element will determine where and how the Air widget displays on your site.
‍Insert the custom HTML element in the desired location on your site. Make sure to include the necessary attributes, such as SKU ID and Org ID, for the widget to function correctly.

And there you have it!
Your Air widget is now live and functional.

Let's take a closer look at the sample experience UX provided by the Air solution.
‍ sample UX link.
This is the current UX sample option we offer with our Air solution. As you can see, it's user-friendly and offers a seamless 3D viewing experience for your customers.

With just a few simple steps, you've successfully integrated the Air widget into your e-commerce platform.
Enhance your customer's shopping experience with the power of 3D visualization.

Pro Integration: Customization Possibilities with SDK

Welcome to the Pro Integration tutorial by Designhubz.
Dive deep into the world of customization and discover the endless possibilities with our SDK.

The Pro version of our integration solution isn't just about adding a widget; it's about crafting a unique experience tailored to your brand's identity.
With Pro, you're not just integrating; you're innovating.

At the heart of the Pro Integration is our SDK package, designed to offer maximum control and customization.
‍From snapshots, variation selection, mode switches, to recommendations display, our SDK provides the tools you need to build a unique and immersive shopping experience.

‍To get started with the Pro Integration, you'll first need to access our comprehensive documentation and instructions.
Our SDK is available as a JS/TS npm package on GitHub.
Here, you'll find detailed guides, code examples, and best practices to help you integrate seamlessly. GitHub.

For those using React, we've got you covered.
Our integration is also developed for React projects, with source code and documentation readily available. link.

For a hands-on experience, check out our live preview. This will give you a clear idea of what's possible with the Pro Integration.

With the Pro Integration and our SDK, the only limit is your imagination. Craft a shopping experience that truly stands out.

Pro Integration for React Projects

Welcome to Designhubz's Pro Integration tutorial, tailored specifically for React projects.
Let's explore how to bring the immersive Try-On experience to your React-based e-commerce platform.

React has revolutionized the way we build web applications, and with Designhubz's Pro Integration, you can now seamlessly integrate our 3D, AR, and VTO solutions into your React projects.

‍To kick things off, let's take a tour of our dedicated GitHub repository for React projects. GitHub.
Here, you'll find the source code, detailed documentation, and everything you need to get started. From installation guides to component usage, it's all at your fingertips.

Now, let's dive into the integration process.
‍Step 1: Installation
‍Begin by installing the Designhubz npm package for React. This will add all the necessary components and tools to your project.

‍Step 2: Importing the Widget
‍Next, import the Designhubz widget into your desired React component. This will allow you to embed the Try-On experience wherever you see fit.

‍Step 3: Configuration
‍Configure the widget by providing the necessary attributes, such as SKU ID and Org ID. This ensures the widget displays the correct products from your inventory.
‍
‍Step 4: Rendering the Widget
‍Finally, render the widget within your component. With just a few lines of code, your React project will now offer an immersive 3D shopping experience.

‍And there you have it! Your React-based e-commerce platform now boasts the cutting-edge Try-On experience from Designhubz.
Watch as your customers engage, interact, and immerse themselves in a shopping experience like no other.

‍With Designhubz's Pro Integration for React, the future of e-commerce is in your hands.

Enhanced UX/UI with Pro Integration

Welcome to the realm of enhanced user experience with Designhubz's Pro Integration.
Today, we'll delve into the transformative features that elevate your e-commerce platform to new heights.
‍
The Pro Integration isn't just about adding 3D models; it's about redefining the entire shopping experience. Let's explore the upgrades that make this possible.

One of the standout features of the Pro Integration is the revamped recommendations section.
Gone are the days of static images. With Pro, product recommendations come to life, allowing users to interact with 3D models, view products from different angles, and even try them on virtually.

Another game-changer is the enhanced UI transitions. Every click, every navigation feels smooth, intuitive, and visually pleasing.
From zooming into products to switching color variations, the transitions are seamless, adding a touch of sophistication to the user journey."

‍Say goodbye to traditional scrolling. With the Pro Integration, we introduce draggable scrolling areas
This feature offers users a tactile experience, allowing them to navigate product lists with a simple drag of the mouse or swipe of the finger.

Product exploration is also elevated. Switching between products is not just a click; it's an experience.
‍With fluid transitions and dynamic displays, users can effortlessly explore your product range, keeping them engaged and intrigued.

And finally, the crown jewel: the enhanced 3D mode.
Users can now dive deep into products, exploring every angle, every detail in high-definition 3D. It's not just viewing; it's experiencing.

‍With Designhubz's Pro Integration, you're not just offering products; you're offering experiences. Elevate your e-commerce platform and set new standards.

Implementation Steps with Sample Variables

Welcome to Designhubz's guide on implementation steps using sample variables.
Today, we'll demystify the process, ensuring a smooth integration for your e-commerce platform.

To successfully integrate Designhubz's solutions, two key variables are essential: Organization ID and SKU ID.

These identifiers are the backbone of the integration, ensuring the correct products are displayed and the experience is tailored to your brand.

The Organization ID, or Org ID, is unique to your brand or company. It ensures that the integration is specific to your organization.

SKU IDs, on the other hand, are unique identifiers for each product in your inventory. They ensure that the correct product data is fetched and displayed.

Now, let's delve into a sample code that demonstrates how to utilize these variables.

import * as Designhubz from 'designhubz-widget';
Designhubz.auth(ORG_ID);
Designhubz.createEyewearWidget(HTMLDivElement)
.then(widget => widget.loadProduct(SKU_ID));

In this sample, we first import the Designhubz widget. We then authenticate using the Org ID. Finally, we create the widget and load a product using its SKU ID.

‍Step 1: Authentication
‍Start by authenticating your session using the Organization ID. This ensures a secure and tailored integration.

‍Step 2: Widget Creation
‍Next, create the widget where you want it to appear on your platform.
This is the canvas for your 3D, AR, or VTO experience.

‍Step 3: Loading a Product
‍Finally, load your desired product using its SKU ID. This fetches the correct product data and displays it within the widget.

With a clear understanding of the implementation variables and steps, integrating Designhubz's solutions becomes a breeze. Elevate your e-commerce platform with precision and ease.

Pro Integration by Designhubz: Collaboration and Implementation

Welcome to Designhubz's guide on Pro Integration, where we take the reins and collaborate with you to bring your vision to life.

Choosing Pro Integration by Designhubz means entering a partnership.
We work hand-in-hand with you, ensuring a seamless and tailored integration that resonates with your brand.

Our journey begins with the design phase.
Here, we brainstorm, conceptualize, and draft the initial design tailored to your brand's identity. Whether it's the look, feel, or functionality, every detail is meticulously planned.

Once our draft is ready, we enter the review process.
Your feedback is invaluable. We collaborate closely, incorporating your insights and making necessary adjustments to ensure the final product aligns with your vision.

With the design finalized, we transition to the implementation phase.
Our team of experts takes charge, integrating the Pro solution into your e-commerce platform. We handle the technicalities, ensuring a smooth and efficient integration.

Before the final launch, we conduct a comprehensive review, testing every feature and ensuring optimal performance.

And with that, your e-commerce platform is transformed, offering an unparalleled shopping experience to your customers

Pro Integration by Designhubz is more than just a service; it's a collaboration. Together, we redefine the boundaries of e-commerce.