Develop Calendly Component to Open Links in Modal Overlay

[JimSeven]

Problem

Note

Welches Problem soll behoben werden? Warum genau brauchen wir eine Lösung?

Derzeit öffnen sich Calendly-Links auf der 21st digital Website in einem neuen Tab, was die Benutzererfahrung stört. Um eine nahtlosere und integrierte Benutzererfahrung zu bieten, sollten diese Links in einem modalen Overlay auf derselben Seite geöffnet werden.

User Story

Note

Beschreibt aus Sicht des Users wie genau diese Lösung genutzt wird

Als Website-Nutzer möchte ich, dass Calendly-Links in einem modalen Overlay anstelle eines neuen Tabs geöffnet werden, damit ich Termine buchen kann, ohne die aktuelle Seite zu verlassen, was eine reibungslose und unterbrechungsfreie Benutzererfahrung gewährleistet.

Vorhaben

Note

Was genau haben wir mit diesem Ticket vor?

Wir werden eine Komponente entwickeln, die alle Calendly-Links in einem modalen Overlay auf der 21st digital Website öffnet. Diese Overlay kann vom Nutzer jederzeit geschlossen werden.

Abgrenzung

Note

Zeigt potenzielle "Don’t dos" auf und grenzt die Aufgabe von anderen ab.

• Keine vollständige Überarbeitung der bestehenden Seitenstruktur.
• Keine Änderungen an den bestehenden Backend-Funktionen.
• Keine Implementierung zusätzlicher Funktionen außerhalb der Calendly-Integration.

Akzeptanzkriterien

Note

Was genau muss erfüllt sein, dass dieses Ticket als fertig angesehen werden kann. Akzeptanzkriterien müssen überprüfbar sein. Sie sollten auf das "Was" und nicht das "Wie" abzielen.

1. Modal Implementation:

   • Alle Calendly-Links auf der Website öffnen sich in einem modalen Overlay anstelle eines neuen Tabs.
   • Das modale Overlay zeigt die Calendly-Buchungsschnittstelle korrekt an.
   • Das modale Overlay verfügt über eine gut sichtbare und zugängliche Schließen-Schaltfläche oder -Funktion.

2. Responsiveness:

   • Das modale Overlay ist vollständig responsiv und funktioniert auf verschiedenen Geräten (z.B. Mobil, Tablet, Desktop) einwandfrei.

3. User Experience:

   • Das modale Overlay kann vom Benutzer leicht geschlossen werden, sodass dieser zu seinem vorherigen Zustand auf der Seite zurückkehren kann.
   • Der Buchungsvorgang innerhalb des Modals ist reibungslos und intuitiv.

4. Testing and Validation:

   • Die Implementierung wird in allen gängigen Browsern getestet, um die Kompatibilität sicherzustellen.
   • Feedback von Benutzern wird eingeholt, um sicherzustellen, dass die Modalfunktionalität ihren Bedürfnissen und Erwartungen entspricht.

[robocopklaus]

@JimSeven ist schon implementiert, nur noch nicht für CTA Button im Header