> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/erweiterungen/floating-widget.md).

# Floating-Widget

Mit ThemeWare® kannst du das "Floating-Widget" unserer Shopware 5 Themes auch in deinem Shopware 6 Shop nutzen, um beispielsweise Kontaktinformationen präsent darzustellen.

<figure><img src="/files/mktNnXrwaL3dt9Fgyrpa" alt=""><figcaption><p>ThemeWare® "Floating-Widget"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Das Floating-Widget wird angezeigt, wenn die Konfiguration "Floating-Widget anzeigen" aktiviert ist. Den Inhalt pflegst du über Textbausteine.
{% endhint %}

***

## Konfiguration

### **Theme-Konfiguration**

1. Wechsel in den Tab "**Erweiterungen**"
2. Öffne den Bereich "**Floating-Widget**"
3. Aktiviere das Floating-Widget mit der Konfiguration "**Floating-Widget anzeigen**"
4. Speicher deine Änderungen nach der Bearbeitung

### **Inhalt**

* Passe Titel und Text des Floating-Widgets über die folgenden Textbausteine an:
  * `twt.extension.floatingWidget.title`
  * `twt.extension.floatingWidget.body`
* Optional: Passe die Link-URL über den Textbaustein `twt.extension.floatingWidget.link` an (wird nur genutzt, wenn die Konfiguration "Widget verlinken" aktiviert ist)

{% hint style="info" %}
**Hinweis**: Wie du Textbausteine bearbeitest erfährst du in folgender Anleitung: [Texte bearbeiten und übersetzen](https://wiki.themeware.design/wissensdatenbank/anleitungen/texte-bearbeiten-und-uebersetzen)
{% endhint %}

{% hint style="success" %}
**Tipp**: Wirkt sich eine Änderung nicht auf die Storefront aus, leere einfach einmal den Shopware Cache: [Shopware Cache leeren / aufwärmen](https://wiki.themeware.design/wissensdatenbank/anleitungen/sonstiges/shopware-cache-leeren)
{% endhint %}

***

## Optionen

* **Floating-Widget anzeigen @Phone (<768px)**
  * Steuert, ob das Widget auf Smartphones (<768px) erscheint.
* **Position**
  * Platziert das Widget "links" oder "rechts".
* **Hover-Effekt**
  * "kein Effekt", "Herausziehen" oder "Deckkraft verringern".
* **Overlay anzeigen (wenn geöffnet)**
  * Legt einen abdunkelnden Overlay über die Seite, solange das Widget geöffnet ist.
* **Geöffnet anzeigen (wenn die Seite geladen wurde)**
  * Öffnet das Widget automatisch beim Laden der Seite.
* **Animieren (wenn die Seite geladen wurde)**
  * "keine Animation" oder "Wackeln (3x)".
* **Widget verlinken**
  * Macht das Widget anklickbar: "nein", "ja" oder "ja (in neuem Tab öffnen)". Die Ziel-URL hinterlegst du über den Textbaustein `twt.extension.floatingWidget.link`.

Darüber hinaus lassen sich Größe, Innenabstand, Ausrichtung und der Abstand zum Seitenrand sowie Farben, Schrift und ein Hintergrundbild anpassen.

***

## Zusammenfassung

#### Theme-Konfiguration

* Tab "Erweiterungen" => Bereich "Floating-Widget" => Floating-Widget anzeigen / Floating-Widget anzeigen @Phone (<768px)
* Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration" => Position / Hover-Effekt / Overlay anzeigen / Geöffnet anzeigen / Animieren / Widget verlinken

#### Textbausteine

* **Titel**
  * `twt.extension.floatingWidget.title`
* **Text**
  * `twt.extension.floatingWidget.body`
* **Link**
  * `twt.extension.floatingWidget.link`
* **Alt-Text** (Bild)
  * `twt.extension.floatingWidget.altText`
* **Aria-Label** (Widget)
  * `twt.extension.floatingWidget.ariaLabel`
* **Aria-Label** (Button)
  * `twt.extension.floatingWidget.closeAriaLabel`
  * `twt.extension.floatingWidget.openAriaLabel`
* **Aria-Label** (Link)
  * `twt.extension.floatingWidget.linkAriaLabel`