Wix Integration: Complete Example

Embed the Wedding Band Builder on a Wix site using Wix's HTML embed (iframe) component.

Back to Embedding guide

Using the HTML Embed Component

1. In the Wix Editor, click Add Elements (+) → Embed & Social → HTML iframe
2. Drag it onto your page and resize it (recommended: full width, 600–700px height)
3. Click Enter Code and paste:

<iframe
    id="wbb-iframe"
    src="https://your-cdn.com/wbb-viewer.html"
    style="width: 100%; height: 100%; border: none;"
    allow="camera; xr-spatial-tracking"
></iframe>

<script>
    // Forward price updates to the Wix page via custom events
    window.addEventListener('message', function(e) {
        if (e.data && e.data.event === 'price:updated' && e.data.data && e.data.data.pricing) {
            // Wix Velo can listen for this via $w('#html1').onMessage()
            window.parent.postMessage({
                type: 'wbb-price',
                price: e.data.data.pricing.totalUsd,
            }, '*');
        }
    });
</script>

4. Click Update and publish

Adding Price Display with Velo (Wix Code)

To show the price on the Wix page and wire up an Add to Cart button, use Wix Velo:

// Page code (Velo)
import wixStores from 'wix-stores';

$w.onReady(function () {
    // Listen for price updates from the HTML embed
    $w('#html1').onMessage((event) => {
        if (event.data.type === 'wbb-price') {
            $w('#priceText').text = '$' + event.data.price.toFixed(2);
        }
    });

    // Add to cart button
    $w('#addToCartButton').onClick(async () => {
        // Send a query to the iframe to get the config
        $w('#html1').postMessage({ action: 'getConfig' });
    });

    // Receive config back from iframe
    $w('#html1').onMessage(async (event) => {
        if (event.data.type === 'wbb-config') {
            // Add to Wix Stores cart
            const productId = 'your-product-id'; // Replace with actual product ID
            await wixStores.cart.addProducts([{
                productId: productId,
                quantity: 1,
                options: {
                    choices: {},
                    customTextFields: [{
                        title: 'Ring Configuration',
                        value: JSON.stringify(event.data.config),
                    }],
                },
            }]);
        }
    });
});

Update the HTML embed to handle config requests:

<script>
    var iframe = document.getElementById('wbb-iframe');
    var reqId = 0;

    // Listen for requests from Wix Velo
    window.addEventListener('message', async function(e) {
        if (e.data && e.data.action === 'getConfig') {
            var id = 'req-' + (++reqId);

            var handler = function(ev) {
                if (ev.data && ev.data.id === id) {
                    window.removeEventListener('message', handler);
                    // Send config back to Wix page
                    window.parent.postMessage({
                        type: 'wbb-config',
                        config: ev.data.result,
                    }, '*');
                }
            };
            window.addEventListener('message', handler);
            iframe.contentWindow.postMessage({ id: id, method: 'exportConfig', args: [] }, '*');
        }
    });
</script>

Notes

• Wix HTML embeds run in their own iframe, so there are two iframe layers: Wix embed → your viewer page. The postMessage bridge handles this transparently.
• For Wix eCommerce (Wix Stores), ring configuration is stored as a custom text field on the cart item.
• The allow="camera; xr-spatial-tracking" attributes may not work inside Wix's HTML embed. AR try-on may be unavailable on Wix-hosted sites.