> ## 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 Copy

> Präsentiere Gutscheincodes zum einfachen Kopieren in die Zwischenablage

## Allgemeine Beschreibung

Das "Coupon Copy" Portlet bietet eine attraktive Möglichkeit, Gutscheincodes oder Sonderangebote hervorzuheben und Kunden dazu zu bewegen, diese zu nutzen. Mit seinen vielseitigen Anpassungsmöglichkeiten kannst du sicherstellen, dass deine Angebote auffallen und die gewünschte Wirkung erzielen. Über eine kleine Schaltfläche kann sich der Nutzer den Code direkt in die Zwischenablage kopieren und anschließend im Warenkorb einsetzen.

## Einsatzmöglichkeiten

* **Exklusive Gutscheinangebote:** Biete exklusive Gutscheincodes für wiederkehrende Kunden an, um ihre Treue zu belohnen und sie zum erneuten Kauf zu motivieren.
* **Besondere Rabattaktionen:** Präsentiere temporäre Rabattaktionen oder Sonderangebote in einem auffälligen Design, um die Aufmerksamkeit der Besucher zu gewinnen.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Individuelle Überschrift">
    Gib dem Portlet eine individuelle Überschrift, um den Fokus auf das Angebot oder den Gutscheincode zu lenken.
  </Accordion>

  <Accordion title="Gutscheincode">
    Hinterlege einen Gutscheincode, den Kunden direkt über eine Schaltfläche kopieren können, um ihn beim Checkout einzulösen.
  </Accordion>

  <Accordion title="Anpassbarer Bestätigungstext">
    Passe den Text an, der nach dem Kopieren des Gutscheincodes erscheint, um den Kunden zu informieren oder zu danken.
  </Accordion>

  <Accordion title="Kleingedrucktes">
    Füge wichtige Informationen oder Bedingungen als Kleingedrucktes hinzu, damit Kunden alle relevanten Details kennen.
  </Accordion>

  <Accordion title="Individuelles Bild">
    Lade ein eigenes Bild hoch, um das Angebot visuell ansprechend zu gestalten und die Aufmerksamkeit zu steigern.
  </Accordion>

  <Accordion title="Banderolen-Option">
    Wähle aus verschiedenen Banderolen-Optionen wie "Sale", "Gutschein", "Coupon" oder ohne Banderole, um das Angebot visuell zu unterstreichen.
  </Accordion>

  <Accordion title="Anpassbare Banderolenfarbe">
    Passe die Hintergrundfarbe der Banderole an, um sie perfekt zum Gesamtdesign deiner Webseite passen zu lassen.
  </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-copy-allgemein.png?fit=max&auto=format&n=PAoB158jlYd1TGQa&q=85&s=edc70381ee3f5b2bd489e689dbd51596" alt="Allgemein" width="1340" height="1494" data-path="images/coupon-copy-allgemein.png" />
  </Frame>
</div>

<ParamField path="Überschrift" type="string">
  Hinterlege eine passende Überschrift für die Coupon-Box.
</ParamField>

<ParamField path="Gutscheincode" type="string">
  Trage hier den Gutscheincode ein.
</ParamField>

<ParamField path="Bestätigungstext nach dem Kopieren des Codes" type="string">
  Gebe an, welcher Text angezeigt werden soll, wenn ein Nutzer den Code kopiert hat.
</ParamField>

<ParamField path="Kleingedrucktes" type="text">
  Hier kannst du die Konditionen für den Gutscheincode eintragen. Diese werden in der unteren rechten Ecke angezeigt.
</ParamField>

<br />

### Bild

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

<ParamField path="Bild deaktivieren" type="boolean">
  Wenn Haken gesetzt, wird kein Bild verwendet.
</ParamField>

<ParamField path="Bild" type="image">
  Hier hast du die Möglichkeit ein Bild hochzuladen. Dieses wird links in der Coupon-Box angezeigt.
</ParamField>

<br />

### Darstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/PAoB158jlYd1TGQa/images/coupon-copy-darstellung.png?fit=max&auto=format&n=PAoB158jlYd1TGQa&q=85&s=3fde6b2b9c2ef8536e2d00ac7cc35a55" alt="Darstellung" width="1338" height="768" data-path="images/coupon-copy-darstellung.png" />
  </Frame>
</div>

<ParamField path="Inhalt der Banderole" type="select">
  Entscheide ob eine Banderole an der oberen rechten Ecke angezeigt werden soll und bestimme den Inhalt.

  **Optionen:**

  * Sale
  * Coupon
  * Gutschein
  * Nicht anzeigen (deaktiviert die Banderole)
</ParamField>

<ParamField path="Hintergrundfarbe der Banderole" type="color">
  Passe die Hintergrundfarbe der Banderole an. Hinterlege entweder Farbwerte oder wähle eine Farbe mittels ColorPicker.
</ParamField>

<ParamField path="Coupon-Box auf die gesamte Breite strecken" type="boolean">
  Wenn aktiviert, wird die Box auf die gesamte, verfügbare Breite gestreckt.
</ParamField>

<ParamField path="Boxschatten aktivieren" type="boolean">
  Wenn aktiviert, wird ein dezenter Schatten hinter der Coupon-Box erzeugt, um diese besser hervorzuheben.
</ParamField>

<br />

### Animation

<ParamField path="Animationstyp" type="select">
  Entscheide dich für einen der vielen Animationstypen.
</ParamField>

<ParamField path="Dauer" type="number">
  Lege die Dauer der Animation in Sekunden (s) fest.
</ParamField>

<ParamField path="Verzögerung" type="number">
  Definiere die verstrichene Zeit bevor die Animation anfängt.
</ParamField>

<ParamField path="Wiederholung" type="number">
  Lege die Anzahl der Wiederholungen fest.
</ParamField>

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