Mobile: Multi-Product Embed

Dynamically display the correct 3D model for each product in your mobile app, similar to a product detail page.

Step 1: Set Up Products in Dezyn3D

You must link your products to 3D models in Dezyn3D using a unique Product ID.

Navigate to the Products & Inventory page.
Add your products. The Product ID you use here must match the ID you use in your app.
Link a 3D model to each product in the inventory list.

Step 2: Use a WebView Component

Construct the embed URL dynamically using your User ID and the current product's ID, then load it in a WebView. You can wrap the WebView widget to control its size.

Example (Flutter)


import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Dezyn3DViewer extends StatelessWidget {
  final String userId;
  final String productId;
  final double width;
  final double height;

  const Dezyn3DViewer({
    Key? key,
    required this.userId,
    required this.productId,
    this.width = 300, // Default width
    this.height = 400, // Default height
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final embedUrl = 'https://embed.dezyn.app/v1?uid=$userId&product_id=$productId';
    
    final controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(embedUrl));

    return SizedBox(
      width: width,
      height: height,
      child: WebViewWidget(controller: controller),
    );
  }
}

// How to use it:
// Dezyn3DViewer(
//   userId: 'REPLACE_WITH_YOUR_USER_ID',
//   productId: 'REPLACE_WITH_YOUR_PRODUCT_ID',
//   width: MediaQuery.of(context).size.width, // Example: full screen width
//   height: 500,
// )

Need a different language?

The logic is the same for any native framework (SwiftUI, Jetpack Compose, React Native, etc.). Use a WebView component and dynamically set the URL. You can ask an AI assistant (like ChatGPT, Gemini, or Claude) to convert the example to your preferred language.