La Gaufre Widget Demo

Basic Usage

Open the widget with default settings:

_lasuite_widget.push(['lagaufre', 'init', {
    api: '/widgets/demo/lagaufre-data.json',
    open: true
}]);

With ANCT Data

Open the widget with ANCT services data:

_lasuite_widget.push(['lagaufre', 'init', {
    api: 'https://operateurs.suite.anct.gouv.fr/api/v1.0/lagaufre/services/?operator=9f5624fc-ef99-4d10-ae3f-403a81eb16ef&siret=21870030000013',
    open: true
}]);

With LaSuite data and style

Open the widget with gradient background:

// With gradient background
_lasuite_widget.push(['lagaufre', 'init', {
    api: 'https://lasuite.numerique.gouv.fr/api/services',
    open: true,
    background: 'linear-gradient(180deg, #eceffd 0%, #FFFFFF 20%)',
    headerLogo: 'https://lasuite.numerique.gouv.fr/_next/static/media/suite-numerique.ebdb6ce9.svg',
    headerUrl: 'https://lasuite.numerique.gouv.fr',
    showFooter: true
}]);

With Custom Font

Open the widget with custom font family:

// With custom font
_lasuite_widget.push(['lagaufre', 'init', {
    api: '/widgets/demo/lagaufre-data.json',
    open: true,
    fontFamily: 'Georgia, serif'
}]);

Positioning Options

Control widget position and behavior:

// Top Right positioning
_lasuite_widget.push(['lagaufre', 'init', {
    api: '/widgets/demo/lagaufre-data.json',
    open: true,
    label: 'La Gaufre - Top Right',
    position: 'fixed',
    top: 20,
    right: 20
}]);

// Bottom Left positioning
_lasuite_widget.push(['lagaufre', 'init', {
    api: '/widgets/demo/lagaufre-data.json',
    open: true,
    label: 'La Gaufre - Bottom Left',
    position: 'fixed',
    bottom: 20,
    left: 20
}]);

// Absolute & dynamic positioning, tied to a button
(button) => {
    _lasuite_widget.push(['lagaufre', 'init', {
        api: '/widgets/demo/lagaufre-data.json',
        open: true,
        label: 'La Gaufre - Bottom Left',
        position: () => {
            return {
                position: 'absolute',
                top: button.offsetTop + button.offsetHeight + 10,
                right: window.innerWidth - button.offsetLeft - button.offsetWidth
            };
        },
        buttonElement: button
    }]);
}

No dialog

You can insert the widget into an existing container:

// No dialog
_lasuite_widget.push(['lagaufre', 'init', {
    api: '/widgets/demo/lagaufre-data.json',
    open: true,
    dialogElement: document.getElementById('custom-box')
}]);

_lasuite_widget.push(['lagaufre', 'close']);

With hardcoded data

You can pass static data and avoid any API calls:

_lasuite_widget.push(['lagaufre', 'init', {
    open: true,
    data: {
        "services": [
            {
                "name": "Authentication Service",
                "url": "https://example.com/auth",
                "logo": "/widgets/demo/logos/auth.svg",
            },
            {
                "name": "Document Portal",
                "url": "https://example.com/docs",
                "logo": "/widgets/demo/logos/docs.svg",
            },
        ]
    }
}]);

Open and close Widget Programmatically

Close the widget programmatically after 2 seconds:

_lasuite_widget.push(['lagaufre', 'init', {
    api: '/widgets/demo/lagaufre-data.json'
}]);
setTimeout(() => {
    _lasuite_widget.push(['lagaufre', 'open']);
}, 300);
setTimeout(() => {
    _lasuite_widget.push(['lagaufre', 'close']);
}, 2000);

_lasuite_widget.push(['lagaufre', 'toggle']);

Full localization

You can fully localize the widget:

// Full localization
_lasuite_widget.push(['lagaufre', 'init', {
    api: '/widgets/demo/lagaufre-data.json',
    open: true,
    label: 'La Gaufre',
    headerLogo: 'https://lasuite.numerique.gouv.fr/_next/static/media/suite-numerique.ebdb6ce9.svg',
    headerUrl: 'https://lasuite.numerique.gouv.fr',
    headerLabel: 'A propos de LaSuite',
    closeLabel: 'Fermer la liste des services',
    loadingText: 'Chargement des services...',
    newWindowLabelSuffix: ' (nouvelle fenêtre)'
}]);

API Response Format

The widget expects the following API response format:

{
  "services": [
    {
      "name": "Service Name",
      "url": "https://service-url.com",
      "maturity": "stable",
      "logo": "/path/to.svg"
    }
  ]
}