@crystaldesign/diva-react

DIVA Application Framework

The DIVA Application Framework provides a set of ready to use applications for all digital touchpoints. Establish a direct connection to customers, anywhere and anytime​.

DIVA Online Showroom
Assortment diversity & digital product exposés at all touchpoints​

DIVA Online Configurator
Guided shopping 24/7 special customer service at all touchpoints​

DIVA Online Seller
Guided selling on the sales floor and in live chat​

License

This is commercial software. To use it, you need to agree to our terms of service and purchase a commercial licence.

Please contact our sales team or request a personal webinar, in order to receive additional information on how to purchase a licence.

Installation

DIVA Framework has three peer dependencies, react, react-dom and jQuery. They have to be installed before this package can be used.

Usage

This component can exclusively be used in react applications. For other frameworks or vanilla js, please refer to our webcomponent.

The DIVA component can be used as any other react component.

import Diva from '@crystaldesign/diva-react'
(...)
<DIVA organizationId="my-organization-id"
  language="de"
  component={...}
  eventListners={{ onAddToBasket: (data) => console.log(data) }}/>

As language currently German (de), Italian (it), French (fr) and English (en) are supported.

The property component expects an object which defines the component that should be rendered within the framework and any additional settings needed for this component. Since this highly depends on the specific components and your preferences you will receive the exact specification for this after you purchased a license for one of our products.

The organizationId will be provided to you together with your license.

Events

In order for the components to communicate with their environment the framework fires different events for which the user add listener in the eventListeners object. The currently supported events are:

• onAddToBasket
• onWebPlanerClose
• onWebPlanerPrint
• onWebPlanerShare
• onWebPlanerSave
• onWebPlanerHelp
• onWebPlanerZoomClick

It is also possible to invoke events on the framework, from the integration evironment:

import Diva from '@crystaldesign/diva-react'
(...)
const ref = useRef(null);

useEffect(() => {
  ref.current.invoke(event: 'addToBasket')
},[])

<DIVA ref=ref {...}/>

The currently supported events in this direction are:

• addToBasket

Contact

Our sales team will gladly provided you with additional information on the diva framework and all our products. Feel free to contact us or request a personal webinar.