Skip to main content

Simple Configurator Integration

[WIP] Work in Progress

This documentation is currently under development. If you encounter any gaps, please contact your project manager at Crystal Design.

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.