Skip to main content

Open a saved Configuration

[WIP] Work in Progress

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

The DIVA framework allows users to save their progress and return to it later.
When a user saves a configuration, they receive a PDF containing an unique DIVA Number (divaNr) and link. This guide explains how to open a previously saved divaNr.

The Workflow​

The handover from a static PDF back into your website follows a simple three-step cycle:

  1. The Trigger: The user clicks the link in their saved PDF which redirects to your website.
  2. The Handover: Your website intercepts the divaNr parameter from the URL.
  3. The Restoration: Your website initializes the DIVA framework using the specific divaNr (eg. DIVA-12345-1)
info

While the URL and parameters a free to choose, we recommend staying consistent with yoursite.com/<lang>/configurator?divaNr=<divanr>&lang=<lang> Examples:

  • yoursite.com/configurator?divaNr=DIVA-12345-1&lang=de
  • yoursite.com/de/configurator?divaNr=DIVA-12345-1

Step 1 – Capture the Parameter from the URL​

To resume a session, your JavaScript needs to parse the URL parameters. Using the modern URLSearchParams API is the most reliable method.

// Get the query string from the current URL
const urlParams = new URLSearchParams(window.location.search);

// Capture the divaNr (handling common casing variations)
const divaNr = urlParams.get('divaNr') || urlParams.get('divanr');
const lang = urlParams.get('lang') || 'de'; // Default to 'de' if missing

Step 2 – Automatic configurator initialization​

When resuming a configuration via a URL link, the best user experience is to launch the DIVA framework immediately once the script has parsed the divaNr.
By appending the element to the document.body directly in your script logic (outside of a click listener), the configurator will initialize as soon as the DOM is ready.

info

The main difference between opening a customer configuration and a base product is the parameter used in currentComponent.

  • base product: productId
  • customer configuration: divaNr
diva.language = lang;
diva.currentComponent = {
  type: 'DIVA_WEBPLANNER',
  parameters: { divaNr: divaNr },
  openInFullscreen: true,
  absoluteFullscreen: true,
};
Full example w/o. button
<script>
    const diva = document.createElement('diva-framework');

    // ────────────────────────────────────────────────
    diva.organizationId = '<YOUR_ORGANIZATION_ID>'; // Your organization ID
    diva.language = lang; // 'de', 'fr', 'it', 'en'
    // ────────────────────────────────────────────────

    diva.identifier = 'COMPONENT';

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

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

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