Skip to main content

Framework Intro

The Framework section describes how to integrate DIVA into your website or webshop using the diva-framework Web Component.

[WIP] Work in Progress

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

What will be covered​

The following guide provides a technical walkthrough of:

  • Embedding: How to place the DIVA Web Component on a webpage.
  • Module Control: Opening the Configurator (Web Planner) and/or the PDP (Product Detail Page) module.
  • Event Handling: Connecting DIVA with a webshop logic (e.g., "Add to Basket").
  • Data Management: Working with the Configuration Object and fetching saved configurations via the DIVA API.

What will be provided​

Along this documentation, Crystal Design will provide project-specific values required to run the integration:

  • Demo link: A minimal implementation of your use case, that can be used as starting point
  • E-Mail with specific instructions: Additional explanations for your specific use case
  • organizationId: The unique DIVA organization identifier
  • apiKey: A secure key for your backend to fetch saved configurations
  • VERSION: The current DIVA Version
  • Product IDs: The DIVA product identifiers that must be mapped to your shop products.

What you can build with this integration​

You can choose how deeply DIVA integrates with your user journey:

Configurator integration​

Usually implemented using a custom button on your existing page

  • Run the configurator in fullscreen
  • With or without basket integration

PDP module integration​

This typically replaces part of your existing PDP

  • Display product content (images, augmented reality (AR), and presentations)
  • Optionally open the configurator from the PDP (overlay / fullscreen)