Schaltfläche

Übersicht

Die Avonni Button-Komponente ist dafür konzipiert, Aktionen zu initiieren, wenn der Benutzer darauf klickt. Hochgradig anpassbar verbessert die Button-Komponente die Benutzererfahrung und macht Interaktionen mit Ihrer Website reibungslos und intuitiv. Sie ist ideal für verschiedene Aktionen wie Formularübermittlungen, Navigation, das Starten von Prozessen oder das Auslösen von Modals und Popups.

Tutorials

Link zu Interaktionen

Die Avonni Button-Komponente für Salesforce Experience Cloud-Seiten bietet die Einstellung „Link zu“ für Interaktionen. Mit dieser Funktion können Sie spezifische Aktionen oder Verhaltensweisen festlegen, wenn Benutzer auf die Schaltfläche klicken.

Arten von „Link zu“-Interaktionen

1. Toast anzeigen:

   • Funktionalität: Löst beim Klicken auf die Schaltfläche eine kurze Benachrichtigung oder einen „Toast“ aus.

   • Verwendung in Experience Cloud: Ideal, um sofortiges Feedback oder Bestätigungsnachrichten wie „Aktion erfolgreich“ oder „Erfolgreich gespeichert“ bereitzustellen. Toast-Nachrichten sind unaufdringlich und verschwinden nach ein paar Sekunden, wodurch sie sich für kurze Warnmeldungen eignen.

2. Navigieren:

   • Funktionalität: Leitet den Benutzer auf eine andere Seite oder URL weiter.

   • Verwendung in Experience Cloud: Unentbehrlich, um Benutzer durch eine Abfolge von Schritten zu führen oder sie auf zusätzliche Ressourcen zu verweisen, wodurch die Navigation der Seite und die Benutzerreise verbessert werden.

3. Alarm-Modal öffnen:

   • Funktionalität: Öffnet ein Modal-Fenster, das eine Warnmeldung anzeigt.

   • Verwendung in Experience Cloud: Nützlich, um wichtige Informationen oder Warnungen anzuzeigen, deren Bestätigung durch den Benutzer erforderlich ist, bevor fortgefahren werden kann, z. B. Allgemeine Geschäftsbedingungen oder Datenschutzhinweise.

4. Bestätigungs-Modal öffnen:

   • Funktionalität: Zeigt einen Bestätigungsdialog an, in dem Benutzer gebeten werden, ihre Aktion zu bestätigen.

   • Verwendung in Experience Cloud: Ideal für Aktionen mit erheblichen Folgen (wie das Löschen eines Datensatzes), um sicherzustellen, dass Benutzer informierte Entscheidungen treffen.

5. Flow-Dialog öffnen:

   • Funktionalität: Startet einen Screen Flow, der im Salesforce Flow Builder erstellt wurde.

   • Verwendung in Experience Cloud: Diese Funktion ist perfekt, um Benutzer durch einen mehrstufigen Prozess zu führen oder Informationen über einen strukturierten Flow zu sammeln. Sie kann für Anwendungen wie Kundenumfragen, Dateneingabeformulare oder interaktive Anleitungen verwendet werden.

Durch die Konfiguration der Einstellungen für die „Link zu“-Interaktion an der Avonni Button-Komponente können Sie auf Ihrer Salesforce Experience Cloud-Seite ein dynamischeres und interaktiveres Erlebnis schaffen. Diese Interaktionen machen die Benutzerreise reibungsloser und ansprechender, indem sie sofortiges Feedback geben, durch die Seite navigieren, wichtige Informationen präsentieren, Benutzeraktionen bestätigen oder Benutzer durch einen Prozess führen.

Spezifikationen

Eigenschaften

Name	Beschreibung	Verwendung
Beschriftung	Definieren Sie den auf der Schaltfläche angezeigten Text.	Geben Sie ein prägnantes, klares Label ein, das dem Benutzer die Aktion der Schaltfläche anzeigt.
Icon-Name	Wählen Sie ein Symbol aus, das auf der Schaltfläche angezeigt werden soll.	Wählen Sie ein geeignetes Symbol, das die Aktion der Schaltfläche visuell darstellt und das Verständnis des Benutzers verbessert.
Icon-Position	Bestimmen Sie die Position des Symbols innerhalb der Schaltfläche.	Wählen Sie eine Position, die die Schaltfläche visuell ausbalanciert und mit der Designrichtung Ihrer Webseite übereinstimmt.
Variante	Wählen Sie eine vordefinierte Stilvariante für die Schaltfläche.	Wählen Sie eine Variante, die zum Kontext der Aktion der Schaltfläche und zur gesamten Designsprache der Webseite passt.
Horizontale Ausrichtung	Definieren Sie die horizontale Ausrichtung der Schaltfläche innerhalb ihres Containers.	Richten Sie die Schaltfläche aus, um visuelle Harmonie zu erreichen und die Layoutanforderungen der Webseite zu erfüllen.
Dehnen	Bestimmen Sie, ob sich die Schaltfläche dehnen soll, um ihren Container auszufüllen.	Aktivieren Sie diese Option, damit sich die Schaltfläche horizontal erweitert und den verfügbaren Platz innerhalb ihres Containers ausfüllt.
Deaktiviert	Steuern Sie den aktiven oder deaktivierten Zustand der Schaltfläche.	Deaktivieren Sie die Schaltfläche, um Benutzerinteraktionen zu verhindern; nützlich in Situationen, in denen eine bestimmte Aktion nicht anwendbar ist oder vorübergehend verhindert werden soll.

Aussehen

Abstand (Oben, Unten, Links, Rechts)

• Margin-top, Margin-bottom, Margin-left, Margin-right: Diese steuern den Abstand um die Schaltfläche in jede Richtung. Verwenden Sie diese, um Ihre Schaltflächen präzise zu positionieren, Überlappungen mit anderen Elementen zu vermeiden und Raum zum Atmen zu schaffen.

Bezeichnung/Symbol

• Farbe: Die Standardfarbe des Textes oder Symbols der Schaltfläche.

• Farbe Aktiv: Die Farbe, zu der Text/Symbol wechselt, wenn die Schaltfläche angeklickt oder angetippt wird.

• Farbe Hover: Die Farbe, zu der Text/Symbol wechselt, wenn der Benutzer mit der Maus über die Schaltfläche fährt.

• Schriftfamilie: Gibt die Schriftart an, die für das Text-Label der Schaltfläche verwendet wird. Stellen Sie sicher, dass sie mit dem Gesamtdesign Ihrer Seite übereinstimmt und gut lesbar ist.

• Schriftgröße: Steuert die Größe des Label-Textes. Passen Sie sie nach Bedarf für Lesbarkeit und Betonung an.

• Schriftstil: Legt den Stil des Textes fest, z. B. normal, kursiv oder schräg. Verwenden Sie es sparsam für besondere Hervorhebungen.

• Schriftstärke: Gibt die Fettung des Textes an. Erwägen Sie die Verwendung unterschiedlicher Schriftstärken, um primäre und sekundäre Schaltflächen zu unterscheiden.

Hintergrund

• Hintergrundfarbe: Die Standardfarbe des Hintergrunds der Schaltfläche.

• Hintergrundfarbe Aktiv: Die Hintergrundfarbe der Schaltfläche, wenn sie angeklickt oder angetippt wird.

• Hintergrundfarbe Hover: Die Hintergrundfarbe, wenn der Benutzer mit der Maus über die Schaltfläche fährt.

Rahmen

• Randfarbe: Die Farbe des Rahmens der Schaltfläche.

• Rahmenfarbe Aktiv: Die Rahmenfarbe, wenn die Schaltfläche aktiv ist.

• Rahmenfarbe Hover: Die Rahmenfarbe, wenn der Benutzer mit der Maus über die Schaltfläche fährt.

• Randgröße: Die Dicke des Rahmens (in Pixel).

• Rahmenstil: Die Art des Rahmens: solid, dotted, dashed usw.

• Border-Radius: Steuert, wie abgerundet die Ecken der Schaltfläche sind. Höhere Werte führen zu weicheren, runderen Schaltflächen