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

# Customer Service

# Allgemeine Beschreibung

Das "Customer Service" Portlet zeigt deinen Besuchern ein Kontakt-Widget, über das sie deine Support-Kanäle (E-Mail, Telefon, WhatsApp) erreichen, deine Supportzeiten einsehen und zusätzliche Hinweise in aufklappbaren Accordions lesen können.

# Einsatzmöglichkeiten (Inspiration)

* **Kontaktbündelung:** Zeige alle deine Support-Kanäle gebündelt an einer Stelle, z. B. auf der Produktdetailseite.
* **Transparenz zu Erreichbarkeit:** Informiere deine Kunden direkt über deine Supportzeiten inklusive Online-Status.
* **Zusätzliche Hinweise:** Nutze die frei befüllbaren Accordions für FAQ, Rückgabehinweise oder andere ergänzende Informationen.

# Featureübersicht:

* **Mehrere Support-Kanäle:** E-Mail, Telefon und WhatsApp (inkl. vorgefertigtem Chat-Text) sowie optionaler SmartSupp Chat-Trigger.
* **Supportzeiten je Wochentag:** Hinterlege für jeden Wochentag individuelle Zeiten inklusive eines Hinweistextes.
* **Frei gestaltbare Darstellung:** Icon oder Bild, Icongröße, Eckenradius, Schatten und Ausrichtung des Widgets.
* **Erweiterbare Inhalte:** Bis zu zwei zusätzliche Accordions mit eigenem Titel und Richtext-Inhalt.

***

# Settings:

## Allgemein

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f_GUnALsbZyl7m2S/images/opc-plus-customer-service-allgemein.jpg?fit=max&auto=format&n=f_GUnALsbZyl7m2S&q=85&s=f16d214561e8a92e9ad94d16be97a814" alt="Allgemein" width="1428" height="1006" data-path="images/opc-plus-customer-service-allgemein.jpg" />
  </Frame>
</div>

**Titel des Widgets:** Titel, der für den Support angezeigt wird (z. B. "Kundenservice").

**Online-Status:** Lege fest, ob und wo während der Support-Zeiten ein Online-Icon angezeigt werden soll:

* Ja, oben rechts am Widget
* Ja, am Widget-Titel
* Ja, am Avatar
* Nein

**SmartSupp Chat – Widget-Trigger aktivieren:** Wenn du das Chat-Widget von SmartSupp verwendest, kannst du hier den Trigger dafür aktivieren.

***

## Support-Kanäle

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f_GUnALsbZyl7m2S/images/opc-plus-customer-service-support-kanaele.jpg?fit=max&auto=format&n=f_GUnALsbZyl7m2S&q=85&s=b68210d91761a52901ee3e7fe47efbed" alt="Support-Kanäle" width="1427" height="1167" data-path="images/opc-plus-customer-service-support-kanaele.jpg" />
  </Frame>
</div>

**E-Mail:** E-Mail-Adresse für den Support.

**Telefon:** Telefonnummer für den Support (Format-Beispiel: `+4916012312312`).

**WhatsApp:** Whatsappnummer für den Support – lass bei der Nummer Nullen, Klammern, Leerzeichen und Bindestriche aus. Zusätzlich kannst du einen vorgefertigten Text für den Whatsapp-Chat hinterlegen.

***

## Support-Zeiten

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f_GUnALsbZyl7m2S/images/opc-plus-customer-service-support-zeiten.jpg?fit=max&auto=format&n=f_GUnALsbZyl7m2S&q=85&s=0512f62fdb0d7b1117d11a4cd39a306a" alt="Support-Zeiten" width="924" height="752" data-path="images/opc-plus-customer-service-support-zeiten.jpg" />
  </Frame>
</div>

Lege für jeden Wochentag (Montag bis Sonntag) individuell fest, ob und zu welchen Zeiten Support verfügbar ist.

**Support-Zeiten Hinweis:** Freier Richtext-Hinweis, der oberhalb der Support-Zeiten angezeigt wird.

***

## Darstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f_GUnALsbZyl7m2S/images/opc-plus-customer-service-darstellung.jpg?fit=max&auto=format&n=f_GUnALsbZyl7m2S&q=85&s=3978e6cfc6512ed2432b3f5b808256af" alt="Darstellung" width="1430" height="1913" data-path="images/opc-plus-customer-service-darstellung.jpg" />
  </Frame>
</div>

**Bilder oder Icon:** Lade ein Bild hoch oder wähle ein Icon für die Darstellung.

**Icon für Support:** Wähle über den Icon-Picker ein passendes Icon aus (nur bei Auswahl von "Icon" relevant).

**Icongröße für Support in px:** Größe des Icons in Pixel.

**Border Radius des Widgets:** Radius der Ecken in Pixel für das Widget und Bild.

**Schatten:** Soll das Widget einen Schatten haben?

**Horizontale Ausrichtung:** Links, mittig oder rechts ausrichten.

**Volle Breite:** Soll das Widget die volle Breite seines Containers einnehmen?

***

## Freier Inhalt 1 & Freier Inhalt 2

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f_GUnALsbZyl7m2S/images/opc-plus-customer-service-freier-inhalt.jpg?fit=max&auto=format&n=f_GUnALsbZyl7m2S&q=85&s=fbb125505442c2794f9bd028a53dbf28" alt="Freier Inhalt" width="1430" height="1306" data-path="images/opc-plus-customer-service-freier-inhalt.jpg" />
  </Frame>
</div>

Über diese beiden Tabs kannst du bis zu zwei zusätzliche, frei befüllbare Accordions zum Widget hinzufügen (baugleich, jeweils für ein weiteres Accordion):

* **Support-Accordion aktivieren?:** Schaltet das jeweilige zusätzliche Accordion an oder aus.
* **Titel für das Support-Accordion:** Überschrift des Accordions (z. B. "Hier gibts mehr").
* **Inhalt für das Support-Accordion:** Freier Richtext-Inhalt innerhalb des Accordions.

***

# Beispiel

So erscheint das Widget im Frontend als Button auf der Produktdetailseite:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f_GUnALsbZyl7m2S/images/opc-plus-customer-service-beispiel-button.jpg?fit=max&auto=format&n=f_GUnALsbZyl7m2S&q=85&s=5c921f261aa9d0fc004fa4c0455670c2" alt="Beispiel Button" width="1642" height="1168" data-path="images/opc-plus-customer-service-beispiel-button.jpg" />
  </Frame>
</div>

Nach einem Klick öffnet sich das Widget mit Kontaktmöglichkeiten, Supportzeiten und den zusätzlichen Accordions:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f_GUnALsbZyl7m2S/images/opc-plus-customer-service-beispiel-popup.jpg?fit=max&auto=format&n=f_GUnALsbZyl7m2S&q=85&s=2928df5af7aa97266018a47a053b0125" alt="Beispiel Popup" width="1282" height="1542" data-path="images/opc-plus-customer-service-beispiel-popup.jpg" />
  </Frame>
</div>

***