Stay up to date with the latest insights and performance metrics on the eID Monitoring Dashboard.

<script src="/digital-building-blocks/sites/download/attachments/879493335/checkHeader.js"></script>
<link rel="stylesheet" href="/digital-building-blocks/sites/download/attachments/879493337/style-monitoring-dashboards.css">

<section class="section" id="overview">
    <div class="container">
        <div class="cols justify-content-between">
            <div class="col-3 left-col">
                <ul class="nav-list">
                    <li class="nav-li">
                        <button class="nav-btn" ref="overview">Overview</button>
                    </li>
                    <li class="nav-li">
                        <button class="nav-btn" ref="adoption">Adoption of eID schemes by EU and EEA countries</button>
                    </li>
                    <li class="nav-li">
                        <button class="nav-btn" ref="onboarding">Onboarding of EU Login by EU and EEA countries</button>
                    </li>
                    <li class="nav-li">
                        <button class="nav-btn" ref="implementation">Implementation of eIDAS sofware versions</button>
                    </li>
                    <li class="nav-li">
                        <button class="nav-btn" ref="connectivity">Connectivity of public services to eID</button>
                    </li>
                    <li class="nav-li">
                        <button class="nav-btn" ref="identification">Identification through eID</button>
                    </li>
                    <li class="nav-li">
                        <button class="nav-btn" ref="reuse">Reuse</button>
                    </li>
                </ul>
            </div>
            <div class="col-9 right-col">
                <div class="ref-section" ref="overview">
                    <div class="section-card ti-te accent-light-blue">
                        <h4 class="section-title">Overview</h4>
                        <div class="section-text">
                            <p>The <a href="/digital-building-blocks/wikis/display/DIGITAL/eID">eID</a>  Digital Building Block comprises a set of services (including software, documentation and support), provided by the European Commission and endorsed by the Member States, for eIdentification, in line with the <a href="https://ec.europa.eu/futurium/en/system/files/ged/eidas_regulation.pdf" rel="noopener noreferrer" target="_blank">eIDAS regulation</a>, to enable the mutual recognition of national electronic identification schemes across borders. These services help public administrations to extend the use of their online services to citizens from other European countries.</p>
                            <p>Digital Europe Programme incorporates an action to support the implementation of the European Digital identity and Trust ecosystem where the current eID digital service infrastructure belongs. Member States shall be enabled to rely on a set of specifications and tools supporting the implementation of the eIDAS network, the technical infrastructure that connects national eID schemes through the so-called eIDAS-Nodes. Service Providers (public administrations) may then connect their services to this network, making these services accessible across borders via the notified eIDs.</p>
                            <p>The mutual recognition of notified eID schemes across Europe is mandated by the <a href="https://ec.europa.eu/digital-building-blocks/wikis/display/DIGITAL/Legislation+in+a+nutshell" rel="noopener noreferrer" target="_blank">eIDAS regulation</a>. The Regulation states that by 29 September 2018 all online public services requiring electronic identification must be able to accept the notified eID schemes from other EU countries. Public administrations offering online services that match these requirements are therefore <a href="https://ec.europa.eu/digital-building-blocks/wikis/display/DIGITAL/Legislation+in+a+nutshell" rel="noopener noreferrer" target="_blank">obliged to comply.</a></p>
                        </div>
                    </div>
                </div>
                <div class="ref-section" ref="adoption">
                    <div>
                        <iframe title="eID Monitoring" width="900" height="1690" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiNzdmZjMxY2YtNDA2OS00YjVkLTg1ODctZjQ1ZGQ2M2NiNjNhIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9&pageName=ReportSection5c417175c4bc16709d24" frameborder="0" allowFullScreen="true"></iframe>
                    </div> 
                </div>
                <div class="ref-section" ref="onboarding">
                    <div>
                        <iframe title="eID Monitoring" width="900" height="1040" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiNzdmZjMxY2YtNDA2OS00YjVkLTg1ODctZjQ1ZGQ2M2NiNjNhIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9&pageName=ReportSection6d9d22863e529397e072" frameborder="0" allowFullScreen="true"></iframe>
                    </div> 
                </div>
                <div class="ref-section" ref="implementation">
                    <div>
                        <iframe title="eID Monitoring" width="900" height="690" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiNzdmZjMxY2YtNDA2OS00YjVkLTg1ODctZjQ1ZGQ2M2NiNjNhIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9&pageName=ReportSectionaba1fd5781e7a3843fe8" frameborder="0" allowFullScreen="true"></iframe>
                    </div> 
                </div>
                <div class="ref-section" ref="connectivity">
                    <div>
                        <iframe title="eID Monitoring" width="900" height="1310" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiNzdmZjMxY2YtNDA2OS00YjVkLTg1ODctZjQ1ZGQ2M2NiNjNhIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9&pageName=ReportSectioncb325188ce999971e895" frameborder="0" allowFullScreen="true"></iframe>
                    </div> 
                </div>
                <div class="ref-section" ref="identification">
                    <div>
                        <iframe title="eID Monitoring" width="900" height="1320" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiNzdmZjMxY2YtNDA2OS00YjVkLTg1ODctZjQ1ZGQ2M2NiNjNhIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9&pageName=ReportSection35522a27eb89bd2751cb" frameborder="0" allowFullScreen="true"></iframe>
                    </div> 
                </div>
                <div class="ref-section" ref="reuse">
                    <div>
                        <iframe title="eID Monitoring" width="900" height="1920" src="https://europa.eu/webtools/crs/iframe/?oriurl=https://app.powerbi.com/view?r=eyJrIjoiNzdmZjMxY2YtNDA2OS00YjVkLTg1ODctZjQ1ZGQ2M2NiNjNhIiwidCI6ImIyNGM4YjA2LTUyMmMtNDZmZS05MDgwLTcwOTI2ZjhkZGRiMSIsImMiOjh9&pageName=ReportSectiond5bc80582ace201706ab" frameborder="0" allowFullScreen="true"></iframe>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</section>
<style>
   #overview iframe{clip-path: inset(0px 0px 65px 0px);}
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const url = new URL(window.location.href);
        const referenceParam = url.searchParams.get('ref');
        const navBtns = document.querySelectorAll('.nav-list .nav-btn');
		const ctas = document.querySelectorAll(".c-card .btn.secondary");

 // Function to activate elements based on ref
        function activateElements(ref, shouldScroll = false) {
            const navBtn = document.querySelector(`.nav-btn[ref="${ref}"]`);
            const refSection = document.querySelector(`.ref-section[ref="${ref}"]`);

            if (navBtn && refSection) {
                document.querySelector('.nav-list .nav-btn.active')?.classList.remove('active');
                document.querySelector('.ref-section.active')?.classList.remove('active');
                navBtn.classList.add('active');
                refSection.classList.add('active');

                // Scroll to the top of the section if shouldScroll is true
                if (shouldScroll) {
                    window.scrollTo({ top: refSection.offsetTop - 64, behavior: 'instant' });
                }
            }
        }

        
        // Check if referenceParam exists and is valid
        if (referenceParam && document.querySelector(`.nav-btn[ref="${referenceParam}"]`)) {
            // If a valid ref exists, activate the corresponding elements and scroll
            activateElements(referenceParam, true);
        } else {
            // If no valid ref exists, ensure 'overview' is activated if necessary
            if (!referenceParam) {
                url.searchParams.set('ref', 'overview');
                window.history.pushState({}, '', url);
                activateElements('overview'); // Scroll to 'overview' if no ref is present
            }
        }

        // Add click event listeners to navigation buttons
        navBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const ref = btn.getAttribute('ref');
                activateElements(ref, true);

                // Update the URL parameter
                url.searchParams.set('ref', ref);
                window.history.pushState({}, '', url);
            });
        });

		ctas.forEach(btn => {
                btn.addEventListener('click', () => {
                    const ref = btn.getAttribute('ref');
                    activateElements(ref, true);
    
                    // Update the URL parameter
                    url.searchParams.set('ref', ref);
                    window.history.pushState({}, '', url);
            });
        });
});
</script>