Features

The DPP Event Widget is a customizable web component that displays event timelines for Arianee Digital Product Passports.

• Fully Customizable - Customize colors, fonts, sizes, and more using CSS variables
• Multiple Themes - Built-in support for light, dark, and custom themes
• Responsive Design - Works seamlessly on desktop and mobile devices
• Zero Dependencies - No external libraries required, pure vanilla JavaScript
• Style Isolation - Uses Shadow DOM to prevent style conflicts with your page
• Lightweight - Optimized bundle size for fast loading
• Arianee Link Support - Accepts full Arianee link URLs and automatically extracts DPP information
• Timeline Visualization - Beautiful vertical timeline with event details
• Interactive Modal - Click events to view detailed information in a modal

Installation

Integrate the widget by adding the script and using the custom tag. You can provide the DPP value either as an attribute or as a URL parameter.

Using data-arianeelink attribute

<!-- Load the widget -->
<script src="https://dpp-widget-event.arianee.net/widget.js"></script>

<!-- Use the widget -->
<dpp-event 
    data-template="darty-testNewPP" 
    data-arianeelink="https://q.arianee.net/9793066174,ixi5098xlfp2,testnet,0x305051e9a023fe881EE21cA43fd90c460B427Caa"></dpp-event>

Using URL parameter

<!-- Load the widget -->
<script src="https://dpp-widget-event.arianee.net/widget.js"></script>

<!-- Use the widget -->
<dpp-event data-template="darty-testNewPP"></dpp-event>

Then access it with a URL parameter: View example with arianeelink parameter

Customization

The widget can be customized using CSS variables. Here are the available themes:

Default Theme

<div class="theme-default">
    <dpp-event data-template="darty-testNewPP" data-arianeelink="..."></dpp-event>
</div>

/* CSS - Uses default values */

Custom Theme

<div class="theme-custom">
    <dpp-event data-template="darty-testNewPP" data-arianeelink="..."></dpp-event>
</div>

/* CSS */
.theme-custom dpp-event {
    --widget-bg: #F8FAFC;
    --widget-text: #0F172A;
    --widget-primary: #2563EB;
    --widget-border: #E2E8F0;
    --widget-radius: 10px;
    --widget-custom-subtitle-color: #64748B;
    --widget-custom-date-color: #64748B;
    --widget-custom-timeline-color: #2563EB;
    --widget-custom-timeline-dot-bg: #F8FAFC;
    --widget-custom-timeline-dot-border: #2563EB;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --widget-custom-title-font: 'Poppins', sans-serif;
    --widget-custom-text-font: 'Inter', sans-serif;
}

Dark Theme

<div class="theme-dark">
    <dpp-event data-template="darty-testNewPP" data-arianeelink="..."></dpp-event>
</div>

/* CSS */
.theme-dark dpp-event {
    --widget-bg: #1E1E1E;
    --widget-text: #FFFFFF;
    --widget-border: #2D2D2D;
    --widget-custom-subtitle-color: #DDD;
    --widget-custom-date-color: #DDD;
    --widget-custom-timeline-color: #FFF;
    --widget-custom-timeline-dot-bg: #1E1E1E;
    --widget-custom-timeline-dot-border: #FFF;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    --widget-custom-title-font: 'Inter', sans-serif;
    --widget-custom-text-font: 'Inter', sans-serif;
}

CSS Variables Reference

Complete list of available CSS variables for customization:

/* Main colors */
--widget-bg: #ffffff;                /* Widget background color */
--widget-text: #1f2937;             /* Main text color */
--widget-primary: #006AF5;          /* Primary color (accents) */
--widget-border: #e5e7eb;           /* Border color */
--widget-radius: 32px;              /* Corner radius */

/* Secondary text colors */
--widget-subtitle-color: #6B7280;    /* Subtitle color */
--widget-date-color: #6B7280;        /* Date color */

/* Timeline colors */
--widget-timeline-color: #006AF5;     /* Vertical line color */
--widget-timeline-dot-bg: white;      /* Dots background color */
--widget-timeline-dot-border: #006AF5; /* Dots border color */

/* Text sizes */
--widget-title-size: 1.5rem;          /* Title size */
--widget-subtitle-size: 1rem;         /* Subtitle size */
--widget-event-title-size: 1rem;      /* Event title size */
--widget-event-date-size: 0.875rem;   /* Date size */

/* Fonts */
--widget-title-font: inherit;         /* Font family for titles */
--widget-text-font: inherit;          /* Font family for regular text */