..  include:: /Includes.rst.txt

============
Introduction
============

What does it do?
================

This TYPO3 extension provides a functionally complete and :ref:`feature <features>` rich, flexible TYPO3 integration of `Klaro! Consent Management <https://klaro.org/>`__ (hereinafter referred to as "Klaro") by `KIProtect GmbH <https://kiprotect.com/>`__, a powerful tool that protects your visitors' privacy and data and helps you run a GDPR compliant website.

Klaro itself is fully self-hosted and does not rely on the use of resources from external sources. It gives you full control over services requiring consent, including the cookies associated with them and the purposes they belong to. The styling can be influenced either via supplied (also colour-neutral) schemes or your own CSS.

If you have already worked with Klaro in TYPO3, you will love this extension because it is much more intuitive to use due to the use of the backend GUI. If not, this extension will make it particularly easy for you to familiarise yourself with Klaro's range of functions.

..  _video:

Video
===========

..  youtube:: Kimcr5qjFtk

..  warning::

    The video shows an older extension version. Use the written documentation
    and the screenshots below as the current reference.

..  _screenshots:

Screenshots
===========

Frontend
--------

..  figure:: /Images/Frontend-Modal.png
    :class: with-shadow
    :alt: Klaro frontend consent notice shown as the initial modal

    Front-end view of the initial modal

..  figure:: /Images/Frontend-LetMeChoose.png
    :class: with-shadow
    :alt: Klaro frontend consent modal opened through the Let me choose action

    Front-end view of the "Let me choose" dialog

Backend
-------

Site Configuration
~~~~~~~~~~~~~~~~~~

See :ref:`for-editors-site-configuration` for the documented fields.

..  figure:: /Images/SiteConfiguration.png
    :class: with-shadow
    :alt: Klaro tab in the TYPO3 site configuration

    Reference of the Klaro setting as well as the linking of the pages for the data protection declaration and the imprint

General Klaro Configuration
~~~~~~~~~~~~~~~~~~~~~~~~~~~

See :ref:`for-editors-configuration` for the complete Klaro configuration
record reference.

..  figure:: /Images/Configuration-General.png
    :class: with-shadow
    :alt: General tab of a Klaro configuration record

    Klaro Configuration - General Tab

..  figure:: /Images/Configuration-Layout.png
    :class: with-shadow
    :alt: Layout tab of a Klaro configuration record

    Klaro Configuration - Layout Tab

..  figure:: /Images/Configuration-Content.png
    :class: with-shadow
    :alt: Content tab of a Klaro configuration record

    Klaro Configuration - Content Tab

..  figure:: /Images/Configuration-Cookie.png
    :class: with-shadow
    :alt: Cookie tab of a Klaro configuration record

    Klaro Configuration - Cookie Tab

..  figure:: /Images/Configuration-Advanced.png
    :class: with-shadow
    :alt: Advanced tab of a Klaro configuration record

    Klaro Configuration - Advanced Tab

Klaro Service Configuration
~~~~~~~~~~~~~~~~~~~~~~~~~~~

See :ref:`for-editors-service` for the complete service record reference.

..  figure:: /Images/Service-General.png
    :class: with-shadow
    :alt: General tab of a Klaro service record

    Service Configuration - General Tab

..  figure:: /Images/Service-Cookie.png
    :class: with-shadow
    :alt: Cookies tab of a Klaro service record

    Service Configuration - Cookie Tab

..  figure:: /Images/Service-Toggles.png
    :class: with-shadow
    :alt: Toggles tab of a Klaro service record

    Service Configuration - Toggles Tab

..  figure:: /Images/Service-Advanced.png
    :class: with-shadow
    :alt: Advanced tab of a Klaro service record

    Service Configuration - Advanced Tab

Contextual Consent
~~~~~~~~~~~~~~~~~~

See :ref:`for-editors-contextual-consent` for the content element field and
workflow.

..  figure:: /Images/Content-ContextualConsent.png
    :class: with-shadow
    :alt: TYPO3 content element configured for Klaro contextual consent

    Backend configuration of the content element

..  figure:: /Images/Frontend-ContextualConsent.png
    :class: with-shadow
    :alt: Frontend contextual consent placeholder before external content is loaded

    Frontend display