Integrating AR product try-on features into 1C-Bitrix

AR Product Try-On Integration for 1C-Bitrix

Conversion in the "clothing" and "eyewear" categories on mobile traffic suffers from one problem: buyers cannot visualize how an item will look on them. AR try-on solves this — the smartphone camera overlays the product model in real time. Integrating this functionality into Bitrix is not a complex project if you choose the right SDK provider and understand how to link catalog data to 3D models.

Choosing an AR Try-On SDK

Several approaches exist:

WebXR + Three.js — browser-based, no app required. Works in Chrome on Android (iOS — Safari with limitations). 3D models in .glb or .usdz format. Suitable for furniture, eyewear, and large objects.

Snap Camera Kit / Meta Spark — SDK for creating AR masks/effects. Integration via iframe or native app. Works well for jewelry, eyewear, and accessories.

Banuba / Visage Technologies — SDK for trying on eyewear, makeup, and hairstyles. Requires a license, provides precise overlay using facial landmark points. Includes a REST API for passing model parameters.

Fit Analytics / True Fit — specialized services for clothing with size recommendations based on user measurements. Not AR in the strict sense, but solves the same return-reduction problem.

Integration Architecture with Bitrix

The essence of the integration is passing the product identifier and parameters from the Bitrix catalog to the AR widget. The flow:

Product page (catalog.element)
  → JavaScript passes product_id and SKU to the AR widget
    → Widget requests 3D model by product_id
      → /api/ar/model/{product_id} (Bitrix endpoint)
        → Returns URL of .glb/.usdz file from b_file
          → WebXR/SDK renders the model via camera

Storing 3D Models in the Catalog

To store 3D models, create an iblock property:

• Code: AR_MODEL_GLB
• Type: File
• Format: .glb (for Android/WebXR)

And a second property for iOS:

• Code: AR_MODEL_USDZ
• Type: File
• Format: .usdz

Upload — via the standard admin interface or in bulk via an import script (CFile::SaveFile()).

API Endpoint for the AR Widget

Create a handler in Bitrix:

// /local/api/ar/model.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

$productId = (int)$_GET['product_id'];
if (!$productId) { http_response_code(400); exit; }

\Bitrix\Main\Loader::includeModule('iblock');

$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props   = $element->GetProperties(['AR_MODEL_GLB', 'AR_MODEL_USDZ']);

$glbFile  = $props['AR_MODEL_GLB']['VALUE']  ? \CFile::GetPath($props['AR_MODEL_GLB']['VALUE'])  : null;
$usdzFile = $props['AR_MODEL_USDZ']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_USDZ']['VALUE']) : null;

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$isIos = str_contains($ua, 'iPhone') || str_contains($ua, 'iPad');

header('Content-Type: application/json');
echo json_encode([
    'model_url'   => $isIos ? ($usdzFile ?? $glbFile) : ($glbFile ?? $usdzFile),
    'product_id'  => $productId,
    'ar_supported' => (bool)$glbFile,
]);

Connecting WebXR in the Product Page Template

In the catalog.element component template (or result_modifier.php) add:

// Check WebXR support
if ('xr' in navigator && $arModelUrl) {
    const arButton = document.createElement('a');
    arButton.rel    = 'ar';
    arButton.href   = $arModelUrl; // .usdz URL for iOS Quick Look

    // For Android/WebXR — use <model-viewer>
    const modelViewer = document.createElement('model-viewer');
    modelViewer.setAttribute('src', $arModelUrlGlb);
    modelViewer.setAttribute('ar', '');
    modelViewer.setAttribute('ar-modes', 'webxr scene-viewer quick-look');
    modelViewer.setAttribute('camera-controls', '');
    document.getElementById('ar-container').appendChild(modelViewer);
}

The @google/model-viewer library (loaded via CDN) provides support for all three AR modes: WebXR (Chrome Android), Scene Viewer (Android native), Quick Look (iOS Safari).

Integration via Third-Party SDKs (Banuba, Snap)

If using a licensed third-party SDK:

// Pass product parameters to SDK
window.BANUBA_SDK.init({
    clientToken: 'YOUR_TOKEN',
    onReady: () => {
        window.BANUBA_SDK.tryOn({
            productId: <?= $arResult['ID'] ?>,
            sku:       '<?= $arResult['PROPERTIES']['ARTICLE']['VALUE'] ?>',
            category:  'eyewear', // glasses, rings, watches
        });
    }
});

The SDK fetches the model from its own servers by productId — for this, models must be pre-uploaded to their CDN via their API or admin panel.

Model Management: Bulk Upload

For a catalog of 500+ products with AR models, an import script is required:

$csv = parseCsv('/import/ar_models.csv'); // product_xml_id, glb_file, usdz_file

foreach ($csv as $row) {
    $element = getElementByXmlId(CATALOG_IBLOCK_ID, $row['product_xml_id']);
    if (!$element) continue;

    $glbId  = \CFile::SaveFile(['name' => $row['glb_file'],  'tmp_name' => '/models/' . $row['glb_file'],  ...], 'catalog_ar');
    $usdzId = \CFile::SaveFile(['name' => $row['usdz_file'], 'tmp_name' => '/models/' . $row['usdz_file'], ...], 'catalog_ar');

    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $glbId,  'AR_MODEL_GLB');
    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $usdzId, 'AR_MODEL_USDZ');
}

AR Usage Analytics

Add tracking: how many users launched AR try-on and how it affects conversion.

// When AR try-on is launched
modelViewer.addEventListener('ar-status', (event) => {
    if (event.detail.status === 'session-started') {
        ym(METRIKA_ID, 'reachGoal', 'ar_try_on_started', {
            product_id: productId,
            category:   productCategory,
        });
    }
});

Compare conversion rates for sessions with and without AR try-on — this is the primary KPI justifying the cost of 3D model production.

Scope of Work and Timelines

The main effort in this project lies in creating 3D product models. A quality model in .glb format costs 20–80 USD per item from specialized studios. Code integration without model production takes 3–5 weeks.