---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app"
locale: en
meta:
  "og:title": "Academy App"
---

[Go to home](https://academy.laioutr.com/en)

- [Essentials apps](https://academy.laioutr.com/en/bereiche/essentials-apps)

- [Essentials apps](https://academy.laioutr.com/en/leitfaeden/essentials-apps-basics)

- [Set up the revocation button with the Legal essentials app](https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app)

# Set up the revocation button with the Legal essentials app

The Legal essentials app provides building blocks for legally required content, first of all the revocation button under EU Directive 2023/2673 with a two-step flow and an automatic confirmation of receipt. Placement, wording and data sources are set up in Studio.

## Before you start

<dl>

<dt>Plan</dt>
<dd>Any platform licence</dd>

<dt>Role</dt>
<dd>Admin for installation, editor for Studio</dd>

<dt>Duration</dt>
<dd>8 min</dd></dl>

### Prerequisites

- Mailer essentials app set up
- Commerce or subscription app connected
- Legally reviewed texts

Last reviewed on October 15, 2026

Provides building blocks for legally required content, including the revocation button under EU Directive 2023/2673 with permanent placement, unambiguous labelling, a two-step flow, confirmation of receipt through the Mailer and a record of every revocation.

[Developer documentation](https://docs.laioutr.com/apps/essentials/legal)

## How it works

1. Install LegalWhere: Cockpit, Apps · Role: Admin · Duration: 2 min
2. Check the Mailer for confirmationsWhere: Cockpit, Apps · Role: Admin · Duration: 5 min
3. Place the button in header or footerWhere: Studio · Role: Editor · Duration: 10 min
4. Set up contract source and wordingWhere: Studio · Role: Editor with developer · Duration: 20 min
5. Run a test revocation and publishWhere: Studio and live site · Role: Editor · Duration: 10 min

## Common errors

<dl>

<dt>No confirmation of receipt arrives after a revocation.</dt>
<dd>**Cause:** The Mailer essentials app is not installed or its credentials are wrong.</dd>
<dd>**Fix:** Set up the Mailer, send a test email and test the revocation again.</dd>

<dt>No contracts appear in the first step.</dt>
<dd>**Cause:** The contract source is not connected to the commerce or subscription app.</dd>
<dd>**Fix:** Define the data source for orders, subscriptions or digital purchases in Studio and check the app connection.</dd>

<dt>The button is missing on some pages.</dt>
<dd>**Cause:** The button sits in a page-level section instead of the global header or footer, or the change is not published.</dd>
<dd>**Fix:** Move the button into a global section and publish.</dd></dl>

The **Legal** essentials app provides building blocks for legally required content in a Laioutr project. Its central building block is the revocation button. Content and structure are adapted in Studio to the jurisdiction, brand voice and legal review.

### Revocation button

Since 19 June 2026, EU Directive 2023/2673 requires that consumers can revoke distance contracts as easily as they concluded them. This applies to online shops, providers of digital products, subscription platforms and brokers of financial services, regardless of company size. The app provides:

- a permanently reachable button for header, footer or main navigation
- unambiguous labelling such as "Revoke contract" instead of "Cancel", with translations
- the two-step flow: select the contract, then confirm the revocation
- an automatic confirmation of receipt by email through the Mailer
- a record of every revocation with timestamp and contract reference

Legal review of the texts remains with the shop operator.

## Step by step

1. 1 ### Step 1: Install the app

   Open **Apps** in Cockpit, find the **Legal** essentials app and select **Install**.
2. 2 ### Step 2: Check the Mailer

   Make sure the **Mailer** essentials app is set up. Without the Mailer, Legal sends no confirmation of receipt.
3. 3 ### Step 3: Place the button

   In Studio, add the revocation button to the header, footer or main navigation. A global section makes sure it appears on every page.
4. 4 ### Step 4: Connect the contract source

   Define for the first step which contracts can be selected: orders, subscriptions or digital purchases from the connected commerce or subscription app.
5. 5 ### Step 5: Review the wording

   Review the labels and texts of both steps for each language and have them approved legally. Avoid ambiguous terms such as "Cancel".
6. 6 ### Step 6: Publish

   Select **Save** in Studio, then **Publish**.

## Check the result

On the live site, open the revocation button from several pages, take a test contract through both steps and check that the confirmation of receipt arrives in the inbox and that the revocation is recorded with timestamp and contract reference.

## Frequently asked questions

Who has to offer a revocation button?

Virtually every business with distance contracts: online shops, providers of digital products, subscription platforms and brokers of financial services, regardless of size.

How long does the button have to be visible?

Throughout the entire revocation period. That is why it belongs in the header, footer or main navigation rather than on a single page.

Can the flow be adapted to the brand design?

Yes. The two-step flow consists of Laioutr sections and blocks and can be styled in Studio without losing the required steps.

Does the app replace legal advice?

No. The app provides the technical implementation. The operator reviews texts and usage with its own legal counsel.

## Related

- [Essentials apps: core functions from Laioutr, installed as needed](https://academy.laioutr.com/en/artikel/essentials-apps-core-functions-as-needed)4 min

  Essentials apps are apps provided by Laioutr itself that bring core functions such as SEO, transactional email or legal building blocks. A project installs them in Cockpit as needed instead of hard-wiring these functions into the frontend.
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min

  Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.
- [Studio at a glance](https://academy.laioutr.com/en/artikel/studio-at-a-glance)5 min

  Studio is the visual editor in Cockpit: the team builds pages from sections and blocks, sees every change in a live preview of the real storefront and publishes when everything is right.
- [Sending email with the Mailer essentials app](https://academy.laioutr.com/en/apps/sending-email-mailer-essentials)10 min

  The Mailer essentials app sends the transactional email of a Laioutr project, such as contact requests, order confirmations or the confirmation of receipt from the Legal app. Mail goes out through an SMTP account or services such as SendGrid, Amazon SES or Mailgun.

## Learn it in a lesson

- [Legal pages and the Legal essentials app](https://academy.laioutr.com/en/lektionen/go-live-legal-pages)6 min

## [Essentials apps](https://academy.laioutr.com/en/leitfaeden/essentials-apps-basics)

Search this guide

1. [Essentials apps: core functions from Laioutr, installed as needed](https://academy.laioutr.com/en/artikel/essentials-apps-core-functions-as-needed)4 min
2. [Set up the revocation button with the Legal essentials app](https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app)8 min
3. [Sending email with the Mailer essentials app](https://academy.laioutr.com/en/apps/sending-email-mailer-essentials)10 min

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "en",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "translationOfWork": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#webpage",
      "name": "Academy App",
      "url": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/3"
        },
        {
          "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/4"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Essentials apps",
          "item": "https://academy.laioutr.com/en/bereiche/essentials-apps",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Essentials apps",
          "item": "https://academy.laioutr.com/en/leitfaeden/essentials-apps-basics",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Set up the revocation button with the Legal essentials app",
          "item": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/1",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Who has to offer a revocation button?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Virtually every business with distance contracts: online shops, providers of digital products, subscription platforms and brokers of financial services, regardless of size.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/2",
      "@type": "Question",
      "inLanguage": "en",
      "name": "How long does the button have to be visible?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Throughout the entire revocation period. That is why it belongs in the header, footer or main navigation rather than on a single page.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/3",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Can the flow be adapted to the brand design?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Yes. The two-step flow consists of Laioutr sections and blocks and can be styled in Studio without losing the required steps.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/en/apps/set-up-the-revocation-button-with-the-legal-essentials-app#/schema/question/4",
      "@type": "Question",
      "inLanguage": "en",
      "name": "Does the app replace legal advice?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>No. The app provides the technical implementation. The operator reviews texts and usage with its own legal counsel.</p>"
      }
    }
  ]
}
```