> ## Documentation Index
> Fetch the complete documentation index at: https://zovi.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Ihre Client-App konfigurieren

> Nutzen Sie den App Builder, um die Beauty Circle App Ihrer Clients zu branden, festzulegen, was darin angezeigt wird, Sprachen hinzuzufügen und Ihre Änderungen in etwa einer Minute live zu veröffentlichen.

**App Builder** ist der Bereich, in dem Sie die App gestalten, die Ihre Clients nutzen. Öffnen Sie ihn über **App Customisation** unter **App Builder** in der Seitenleiste. Hier steuern Sie alles rund um **die Beauty Circle App**, die eigene gebrandete Client-App Ihrer Klinik: wie sie aussieht, was sie enthält und welche Sprachen sie spricht. Ihre Änderungen bleiben zunächst als Entwurf gespeichert, bis Sie sie veröffentlichen.

<Note>
  Ihre Clients erhalten die App sowohl als native App für iPhone und Android als auch als Web-App, die sie direkt im Browser nutzen und auf ihrem Startbildschirm ablegen können. Der App Builder konfiguriert beide auf einmal, Sie richten also nie etwas doppelt ein.
</Note>

<Frame caption="Screenshot: App Builder open on the App Customisation tab, with the branding fields on the left and the live phone preview on the right.">
  <img src="https://mintcdn.com/zovi/-jGoPdTQeb9B4m94/images/app-builder.png?fit=max&auto=format&n=-jGoPdTQeb9B4m94&q=85&s=45348389393f8f851c66cbd9f2ac40e8" alt="App Builder with customisation fields and a phone preview" width="1440" height="916" data-path="images/app-builder.png" />
</Frame>

## Was der App Builder steuert

Der App Builder konfiguriert die App, die Ihre Clients installieren und öffnen, nicht das Dashboard, das Sie gerade verwenden. Er hat vier Tabs:

| Tab                   | Was Sie hier einstellen                                             |
| --------------------- | ------------------------------------------------------------------- |
| **App Customisation** | Ihre Marke und Ihr Theme sowie die App-Sprachen                     |
| **Treatments**        | Welche Behandlungen angezeigt werden und wie sie präsentiert werden |
| **Rewards**           | Welche Prämien Ihre Clients sehen                                   |
| **Content**           | Welche Blogartikel und Testimonials angezeigt werden                |

Der App Builder hat außerdem zwei eigene ganzseitige Bereiche: **Navigation**, wo Sie die Tabs anordnen, zwischen denen sich Clients bewegen, und **Notifications**, wo Sie die Push-Nachrichten Ihrer App festlegen.

<Note>
  Hautanliegen werden nicht mehr im App Builder bearbeitet. Ein Anliegen erscheint in Ihrer App, sobald eine aktive Behandlung oder ein aktives Retail-Produkt damit versehen ist. Siehe [Anliegen](/catalog/concerns).
</Note>

## App Customisation

Der Tab **App Customisation** ist Ihr Branding-Bereich. Sobald Sie ein Feld ändern, aktualisiert sich die Telefonvorschau daneben, sodass Sie die App so sehen, wie sie später bei Ihren Clients aussieht:

* **Brand name**: der Name, der in der gesamten App angezeigt wird.
* **Logo**: das Logo Ihrer Klinik.
* **App icon**: das Symbol, das Clients auf ihrem Startbildschirm sehen.
* **Hero banner**: das Titelbild oben in der App.
* **Primary color**: Ihre Hauptmarkenfarbe, die in der gesamten App verwendet wird.
* **Theme**: der Gesamteindruck, live in der Telefonvorschau sichtbar.

<Tip>
  Behalten Sie die Telefonvorschau während der Bearbeitung im Blick. So erkennen Sie am schnellsten ein unschön zugeschnittenes Logo oder eine Primärfarbe, die nicht passt, bevor Sie veröffentlichen.
</Tip>

## Festlegen, was in der App erscheint

Die Tabs **Treatments**, **Rewards** und **Content** bestimmen, was Ihre Clients tatsächlich sehen. Die Inhalte selbst werden an anderer Stelle angelegt. Im App Builder wählen Sie aus, welche davon in der App erscheinen und in welcher Reihenfolge.

* **Treatments**: steuert, wie Ihre Leistungen den Clients angezeigt werden. Verwalten Sie die Leistungen selbst unter [Behandlungen](/catalog/treatments).
* **Rewards**: wählen Sie aus, welche Prämien Ihre Clients sehen können. Erstellen und bearbeiten Sie Prämien unter [Prämien](/loyalty/rewards).
* **Content**: wählen Sie aus, welche Blogartikel und Testimonials angezeigt werden. Erstellen und verwalten Sie diese unter [Blog & Testimonials](/content/blog-testimonials).

### Navigation

Im Editor **Navigation** legen Sie fest, wie sich Clients durch die App bewegen: auf welchen Bereichen sie landen und in welcher Reihenfolge diese erscheinen. Bereiche blenden sich selbst aus, wenn sie nichts zu zeigen haben, eine Klinik ohne Retail-Produkte zeigt also keinen leeren Retail-Tab.

### Notifications

Im Bereich **Notifications** legen Sie die Push-Nachrichten fest, die Ihre App versendet.

## App-Sprachen

Unter **App Customisation** finden Sie **App languages**. So spricht Ihre App mit Ihren Clients in deren eigener Sprache, ohne dass Sie alles selbst übersetzen müssen.

<Steps>
  <Step title="Eine Sprache aktivieren">
    Aktivieren Sie jede Sprache, die Sie unterstützen möchten. Wenn Sie eine Sprache aktivieren, wird Ihr clientseitiger Content automatisch übersetzt.
  </Step>

  <Step title="Eine Standardsprache festlegen">
    Wählen Sie eine Standard-Content-Sprache: die Sprache, die verwendet wird, wenn die Sprache eines Clients nicht aktiviert ist.
  </Step>
</Steps>

<Note>
  Die automatische Übersetzung deckt Ihren clientseitigen Content ab, damit Clients Ihre App in einer Sprache sehen, die sie verstehen. Legen Sie als Standard die Sprache fest, die die meisten Ihrer Clients verwenden.
</Note>

## Was Ihre Clients sehen

Der App Builder beschreibt die Einstellungen. Hier steht das Ergebnis, damit Sie wissen, worauf ein Client tatsächlich schaut, wenn er Sie deswegen anruft.

### Home

Ihr Hero-Banner und Ihre Markenfarben, Aktionskarten (die Überschrift ist das Tap-Ziel, das Kleingedruckte öffnet sich in einem eigenen Dialog) und ein Abschlussblock, der dazu einlädt, Ihren [AI Advisor](/advisor/overview) zu fragen, falls Sie einen haben. Kliniken mit Advisor erhalten in der Kopfzeile ein Sparkles-Symbol anstelle der Suche.

### Shop

Shop ist in Tabs gegliedert, und **jeder Tab blendet sich aus, wenn er nichts zu zeigen hat**:

| Tab                   | Erscheint, wenn                                          |
| --------------------- | -------------------------------------------------------- |
| **Just For You**      | Ihr AI Advisor eingeschaltet ist                         |
| **Discover**          | Immer                                                    |
| **Browse by Concern** | Immer. Hier sind die Anliegen in voller Breite zu finden |
| **Memberships**       | Sie mindestens einen Plan haben                          |
| **Treatments**        | Immer                                                    |
| **Retail**            | Sie Retail-Produkte auf Lager haben                      |

**Discover** läuft in dieser Reihenfolge: ein Advisor-Hero, dann **Our Services**, was in Ihrer Klinik gerade angesagt ist, Ihr Empfehlungsprogramm, Wellness-Lektüre, echte Ergebnisse aus Ihren eigenen Vorher-Nachher-Aufnahmen, ein Geschenkkarten-Banner, ein Behandlungs-Spotlight und ein Teaser für ein zeitlich begrenztes Angebot.

**Our Services** ist ein Menü mit allem, was Sie verkaufen, jeweils eine Zeile: Mitgliedschaften, einzelne Behandlungen, Retail-Produkte, Prämien und Geschenkkarten. Zeilen blenden sich aus, wenn sie leer sind, und jede verwendet Ihr eigenes erstes verfügbares Foto für diese Leistung.

### Klarna

Wo Klarna verfügbar ist, sehen Clients auf den Bildschirmen für Behandlung, Produkt, Warenkorb und Kasse eine Zeile "ab X pro Monat".

<Note>
  Der Betrag ist der niedrigste ehrliche Monatsbetrag, für den die Summe infrage kommt, und wird von Klarna pro Land festgelegt, nicht von Ihnen. In der Schweiz gibt es keine Klarna-Finanzierung, nur "Pay in 3", weshalb dieselbe Behandlung für eine Schweizer Klinik einen höheren Monatsbetrag ausweist als für eine deutsche. Das ist so zu erwarten und kein Fehler.
</Note>

### Die Web-App

Clients, die die App im Browser nutzen, erhalten auf dem Willkommensbildschirm eine Sprachauswahl sowie rechtliche Links, die sich in ihrer eigenen Sprache öffnen. Auf dem Smartphone sieht ein angemeldeter Client wenige Sekunden nach dem Aufruf von Home eine Aufforderung in Ihren Farben, die App zu installieren. Sie trägt Ihre Klinik mit sich, nach der Installation landen Clients also in **Ihrer** App, statt nach einem Klinikcode gefragt zu werden. Sie wird höchstens dreimal im Abstand von vierzehn Tagen angezeigt und nie wieder, sobald jemand darauf tippt. Auf dem Desktop erscheint sie nicht.

## Änderungen veröffentlichen

Ihre Bearbeitungen im App Builder werden zunächst als Entwurf gespeichert, sodass Clients sie erst sehen, wenn Sie sie veröffentlichen. Wenn Sie bereit sind, veröffentlichen Sie alle Änderungen auf einmal.

<Note>
  Das Veröffentlichen ist ausschließlich dem Owner vorbehalten. Nur der Owner der Klinik kann App-Änderungen veröffentlichen. Manager und Staff können Bearbeitungen vornehmen, ein Owner muss sie jedoch live schalten.
</Note>

<Steps>
  <Step title="Ihre Änderungen vornehmen">
    Aktualisieren Sie Ihr Branding, Ihre Tabs, die Navigation oder die Sprachen. Jede Änderung wird als Entwurf gespeichert und wartet darauf, live geschaltet zu werden.
  </Step>

  <Step title="Publish auswählen">
    Wählen Sie **Publish**. Es erscheint die Übersicht **Publish these changes?**, die alles auflistet, was live gehen soll, damit Sie es vorher prüfen können.
  </Step>

  <Step title="Bestätigen und live schalten">
    Bestätigen Sie, um zu veröffentlichen. Ihre Änderungen erreichen die Client-App innerhalb von etwa 60 Sekunden.
  </Step>
</Steps>

<Check>
  Nach der Veröffentlichung sehen Ihre Clients die aktualisierte App innerhalb von rund einer Minute, ganz ohne App-Update oder Neuinstallation.
</Check>

<Frame caption="Screenshot: the 'Publish these changes?' review listing the staged edits, with the option to publish them live.">
  <img src="https://mintcdn.com/zovi/-jGoPdTQeb9B4m94/images/publish-review.png?fit=max&auto=format&n=-jGoPdTQeb9B4m94&q=85&s=fca0b71d8553b2cea8778d25d07ea1a6" alt="The Publish these changes review dialog" width="1440" height="900" data-path="images/publish-review.png" />
</Frame>

## Verwandte Themen

<CardGroup cols={2}>
  <Card title="Ihr AI Advisor" icon="sparkles" href="/advisor/overview">
    Der Assistent, dem Clients in der App begegnen.
  </Card>

  <Card title="Anliegen" icon="tags" href="/catalog/concerns">
    Versehen Sie Behandlungen mit Anliegen, damit Clients nach ihrem Anliegen stöbern können.
  </Card>

  <Card title="Blog & Testimonials" icon="newspaper" href="/content/blog-testimonials">
    Erstellen Sie die Artikel und Bewertungen, die in Ihrer App erscheinen.
  </Card>
</CardGroup>
