Contentful Personalization & Analytics

Optimization Web Preview Panel

This library implements a "preview panel" compatible with the Contentful Optimization Web SDK. The preview panel is loaded into the DOM as a Web Component-based micro-frontend.

[!INFO]

The Contentful Optimization Web Preview Panel is built using the Lit framework for Web Component micro-frontends

Getting Started

Install using an NPM-compatible package manager, pnpm for example:

pnpm install @contentful/optimization-web-preview-panel
Copy

Import the Optimization class; both CJS and ESM module systems are supported, ESM preferred:

import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'
Copy

Initialize the preview panel with existing instances of the Contentful SDK and the Optimization Web SDK:

attachOptimizationPreviewPanel(contentfulClient, optimization)
Copy

The attachOptimizationPreviewPanel function automatically attaches itself to the DOM and adds the toggle button with which the panel can be opened.

Content Security Policy Support

In order to comply with strict CSP policies, a nonce can be supplied to the attachOptimizationPreviewPanel function as its third argument.

attachOptimizationPreviewPanel(contentfulClient, optimization, nonce)
Copy

Alternatively, the nonce can be added to the window before attaching the preview panel to the DOM.

window.litNonce = nonce
attachOptimizationPreviewPanel(contentfulClient, optimization)
Copy