Simple Configurator Integration

Deprecated

This integration is deprecated. For new integrations, use the Configurator Widget instead. It covers the same use case with a single script tag and no JavaScript initialization code.

This guide shows the easiest way to add the DIVA Configurator to a website. Perfect for product detail pages, collection pages, or anywhere you want a "Configure" button.

We strongly recommend the fullscreen overlay mode, which will be covered in this article.

When the visitor clicks a button (e.g. "Configure in DIVA"), the full-screen Configurator opens over the entire page. When they finish or close it, it disappears cleanly.

Step 1 – Load the Required Libraries

Include the following script tags in your HTML, preferably in the <head> or before the closing <\body>

Important

Replace VERSION with the current version number provided by Crystal Design (e.g. 26.1.0).

<!-- Core React -->
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- DIVA specific -->
<script crossorigin src="https://cdn.jsdelivr.net/npm/@crystaldesign/diva-core@VERSION/build/umd/diva-core.umd.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@crystaldesign/diva-web-planner-react@VERSION/build/umd/diva-web-planner-react.umd.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/@crystaldesign/real-time-viewer@VERSION/build/umd/real-time-viewer.umd.min.js"></script>

Updates are released on a monthly basis and you will be notified once a new version is available.
For easier version management (no code changes needed), see the Advanced Integration → Version Management section.

Step 2 – Add a Button

Place a button anywhere on the page where you want customers to start configuring.

<button id="openDivaBtn">Configure in DIVA</button>

You can style it however you like (add classes, change text to "Start Configuration", "Personalize Now", etc.).

Step 3 – Add the JavaScript That Makes It Work

Add this script after the library scripts from Step 1 (usually at the end of <body>).

Important

Replace <YOUR_ORGANIZATION_ID> and <PRODUCT_ID> with your actual organization ID and product ID

<script>
  document.getElementById('openDivaBtn').addEventListener('click', function () {
    // 1. Prevent multiple instances if one is already open
    if (document.querySelector('diva-framework')) return;

    const diva = document.createElement('diva-framework');

    // ────────────────────────────────────────────────
    diva.organizationId = '<YOUR_ORGANIZATION_ID>'; // Your organization ID
    diva.language = 'de'; // 'de', 'fr', 'it', 'en'
    const productId = '<PRODUCT_ID>'; // The product to open
    // ────────────────────────────────────────────────

    diva.identifier = 'COMPONENT';

    diva.currentComponent = {
      type: 'DIVA_WEBPLANNER',
      parameters: { productId: productId },
      openInFullscreen: true,
      absoluteFullscreen: true,
    };

    // Automatically remove the configurator when the user closes it
    diva.addEventListener('closeComponentInFullscreen', () => {
      diva.remove();
    });

    document.body.appendChild(diva);
  });
</script>

tip

Products may vary from page to page, as a Best Practice this should be managed dynamically. Link the productId to a user-accessible field within your CMS (like WordPress).
This allows team members to update products directly through the admin interface without ever touching the integration code.