Wix Integration: Complete Example

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

Back to iframe 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.

WARNING

Wix HTML embeds run inside their own iframe, creating a double iframe layer (Wix embed → your viewer page). If postMessage communication isn't working, check the browser DevTools console for cross origin errors. AR try on is also likely unavailable inside Wix embeds due to permission restrictions on nested iframes.