> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Coupon Calendar

> Erstelle Adventskalender-Style Coupon-Aktionen für verschiedene Anlässe

## Allgemeine Beschreibung

Das "Coupon Kalender" Portlet im OPC Conversionbooster ermöglicht es dir, zu verschiedenen Anlässen eigene Kalender zu erstellen und hinter den Türchen Couponcodes zu verstecken. Diese Türchen öffnen sich nur an dem eingestellten Tag, was einen Überraschungseffekt schafft und Kunden zur wiederholten Rückkehr animiert.

Ob Weihnachtskalender, Black Friday, Ostern oder andere besondere Anlässe – mit dem Coupon Kalender Portlet bist du absolut flexibel und kannst deine Kunden mit attraktiven Angeboten begeistern.

## Einsatzmöglichkeiten

* **Saisonale Aktionen:** Nutze den Kalender, um saisonale Aktionen wie Weihnachts- oder Osterangebote hervorzuheben.
* **Sonderveranstaltungen:** Erstelle Kalender für besondere Events wie Black Friday, um die Spannung und Vorfreude zu steigern.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Öffnungsdatum und -zeit">
    Wähle den Zeitpunkt, zu dem das Türchen freigeschaltet werden soll.
  </Accordion>

  <Accordion title="Schließdatum und -zeit">
    Bestimme, wann das Türchen deaktiviert und nicht mehr öffnbar sein soll.
  </Accordion>

  <Accordion title="Bilder für geschlossenes/geöffnetes Türchen">
    Hinterlege Bilder für die verschiedenen Zustände des Türchens.
  </Accordion>

  <Accordion title="Seitenverhältnis">
    Bestimme das Seitenverhältnis des Türchens (16:9, 4:3, 1:1 oder keins).
  </Accordion>

  <Accordion title="Überschrift des geschlossenen Türchens">
    Verleihe dem geschlossenen Türchen eine passende Überschrift.
  </Accordion>

  <Accordion title="Inhalt des Türchens">
    Trage den Inhalt ein, der beim Öffnen des Türchens angezeigt wird, wie z.B. einen Gutscheincode.
  </Accordion>

  <Accordion title="Schattenstärke">
    Bestimme die Schattierung des Türchens im geöffneten Zustand.
  </Accordion>

  <Accordion title="Animationsstil">
    Wähle aus verschiedenen Öffnungsanimationen (aufklappen, aufdecken, hochsliden, keine).
  </Accordion>

  <Accordion title="Abgerundete Ecken">
    Lege fest, wie stark die Ecken des Türchens abgerundet sind.
  </Accordion>

  <Accordion title="Textfarbe des Ribbons">
    Wähle die Textfarbe für die Ribbons, die den Status des Türchens anzeigen ("Jetzt öffnen" oder "Ab \[Startdatum]").
  </Accordion>

  <Accordion title="Zusätzliche Infos">
    Füge Einlösebedingungen oder weitere Informationen hinzu, die beim Hovern über das geöffnete Türchen angezeigt werden.
  </Accordion>
</AccordionGroup>

## Settings

### Allgemein

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/PAoB158jlYd1TGQa/images/coupon-calendar-allgemein.png?fit=max&auto=format&n=PAoB158jlYd1TGQa&q=85&s=ade4fecbc2d011bcd6f4ad7a27063494" alt="Allgemein" width="2693" height="4456" data-path="images/coupon-calendar-allgemein.png" />
  </Frame>
</div>

<ParamField path="Öffnungsdatum und -zeit" type="datetime">
  Wähle hier einen Zeitpunkt zu dem das Türchen freigeschaltet werden soll.
</ParamField>

<ParamField path="Schließdatum und -zeit" type="datetime">
  Wähle hier den Zeitpunkt zu dem das Türchen deaktiviert/nicht mehr öffenbar sein soll.
</ParamField>

<ParamField path="Bild für geschlossenes/geöffnetes Türchen" type="image">
  Hinterlege hier Bilder für jeweils das geöffnete und das geschlossene Türchen.
</ParamField>

<ParamField path="Seitenverhältnis" type="select">
  Entscheide hier, in welchem Seitenverhältnis das einzelne Türchen dargestellt werden soll.

  **Optionen:**

  * 16:9
  * 4:3
  * 1:1
  * Keins
</ParamField>

<ParamField path="Überschrift des geschlossenen Türchens" type="string">
  Vergebe hier eine passende Überschrift, die auf dem geschlossenen Türchen angezeigt werden soll.
</ParamField>

<ParamField path="Inhalt des Türchens" type="string">
  Trage hier den Inhalt ein, der angezeigt werden soll wenn das Türchen geöffnet ist. Hier eignet sich ein Gutscheincode o.Ä.
</ParamField>

<ParamField path="Stärke des Schattens der offenen Tür" type="number">
  Trage hier einen Wert zwischen 0 und 1 ein. Dieser bestimmt, wie stark die innere Schattierung des Türchens sein soll, wenn es geöffnet ist.
</ParamField>

<ParamField path="Animationsstil" type="select">
  Entscheide hier mit welcher Animation das Türchen geöffnet werden soll.

  **Optionen:**

  * Türchen klappt auf
  * Aufdecken
  * Hochsliden
  * Keine
</ParamField>

<ParamField path="Rundung der Ecken" type="number">
  Trage hier einen Wert in Pixeln ein. Dieser bestimmt wie sehr die Ecken des Türchens abgerundet sind.
</ParamField>

<ParamField path="Textfarbe des Ribbons für geschlossenes/geöffnetes Türchen" type="color">
  Wähle hier die Textfarbe für das Ribbon, das in der oberen rechten Ecke des Türchens angezeigt werden soll.

  Standardmäßig ist der Text:

  * bei geöffnetem Türchen: "Jetzt öffnen"
  * bei geschlossenem Türchen: "Ab \[Startdatum]"

  Die Farbe der Ribbons orientiert sich an deinem Theme.
</ParamField>

<br />

### Weitere Infos

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/PAoB158jlYd1TGQa/images/coupon-calendar-weitere-infos.png?fit=max&auto=format&n=PAoB158jlYd1TGQa&q=85&s=fc4a3294ed7e2209b50e331e823ae4f1" alt="Weitere Infos" width="1336" height="1160" data-path="images/coupon-calendar-weitere-infos.png" />
  </Frame>
</div>

<ParamField path="Zusätzliche Infos zum Türchen" type="text">
  Hier kannst du Text für zusätzliche Infos zum Türchen eintragen. Hierfür eignen sich bspw. Einlösebedingungen für den hinterlegten Gutschein.

  Wenn hier etwas eingetragen ist, wird am unteren rechten Rand des geöffneten Türchens ein Button erzeugt, der beim Hovern die zusätzlichen Infos vollflächig im Türchen einblendet.
</ParamField>

<ParamField path="Hintergrundfarbe der zusätzlichen Info" type="color">
  Wähle hier eine Farbe für die Hintergrundfarbe der zusätzlichen Info. Um eine gute Lesbarkeit zu gewähren kannst du ggbf. die Textfarbe der zusätzlichen Info über den oberen Richtext-Editor anpassen.
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />