Back to index

# La Gaufre Widget Demo

This demo shows how to use the La Gaufre widget to display a list of services with subscription status.

## 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"
        }
      ]
    }