1. Hilfe-Center
  2. Integrationen und Apps
  3. Optionen zum Einbetten

So passen Sie Ihre Einbettung an

Passen Sie Ihre Calendly-Einbettung an Ihre Website an, indem Sie Ereignisinformationen ausblenden, das Cookie-Banner entfernen, die Farben ändern und die Widget-Platzierung anpassen.

Ereignisdetails ausblenden

Sie können persönliche oder Ereignisinformationen ausblenden, damit sie nicht doppelt auf Ihrer Website angezeigt werden.

Was ist versteckt:

  • Ihr Foto
  • Ihr Name
  • Ereignisdauer
  • Ereignisort
  • Ereignisbeschreibung

So verbergen Sie Ereignisdetails beim Erstellen Ihrer Einbettung:

  1. Bevor Sie Ihren Einbettungscode kopieren, wählen Sie Ereignisdetails ausblenden
    • Funktioniert sowohl für Inline- als auch Pop-up-Einbettungen
  2. Wählen Sie Code kopieren.
  3. Fügen Sie den Code in den HTML-Code Ihrer Website ein.

Wenn Sie Calendly bereits eingebettet haben: Fügen Sie diese Abfrageparameter zu Ihrem Calendly-Link hinzu:

Link-Typ Was Sie hinzufügen sollten
Ereignistyp ?hide_event_type_details=1
Landing- oder Teamseite ?hide_landing_page_details=1

Hinweis: Wenn Sie beide verwenden, wird die Beschreibung des Ereignistyps möglicherweise weiterhin angezeigt.

Beispiel:

https://calendly.com/<YOUR_LINK>?hide_event_type_details=1

Das Cookie-Banner ausblenden

Calendly zeigt standardmäßig ein Cookie-Banner an. Wenn Sie es ausblenden, stellen Sie sicher, dass Ihre Website Cookie-Gesetze wie DSGVO oder das kalifornische CCPA verwaltet.

So blenden Sie das Cookie-Banner aus:

  • Wählen Sie Cookie-Banner ausblenden auswählen, bevor Sie Ihren Einbettungscode kopieren.

Wenn Sie Calendly bereits eingebettet haben:

  • Fügen Sie ?hide_gdpr_banner=1 zu Ihrem Calendly-Link hinzu

Beispiel für einen Einbettungscode:

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_EVENT?hide_event_type_details=1&hide_gdpr_banner=1"
style="min-width:320px;height:630px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>

Farben und Schaltflächentext ändern

Wenn Sie ein kostenpflichtiges Abo haben, können Sie das Erscheinungsbild Ihrer Einbettung aktualisieren, indem Sie die Hintergrundfarbe, die Textfarbe, die Schaltflächenfarbe oder die Schaltflächenbeschriftung ändern (nur für Pop-up-Einbettung verfügbar). Sie können dies tun, wenn Sie Ihren Code kopieren oder Ihren vorhandenen Einbettungscode bearbeiten.

Verfügbare Optionen:

  • background_color — Legt den Hintergrund hinter der Einbettung fest

  • text_color — Ändert die Farbe des Textes

  • primary_color — Aktualisiert die Farbe der Schaltflächen und Links

  • button_text – Ersetzt das Standardlabel für die Schaltfläche „Planen“

Tipp zur Barrierefreiheit

Der Text der Schaltfläche "Planen" ändert sich automatisch zu schwarz oder weiß basierend auf der gewählten Schaltflächenfarbe und sorgt für einen besseren Kontrast und eine bessere Lesbarkeit.

Beispiel:

<!-- Calendly badge widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"
async>
</script>
<script type="text/javascript">
window.onload = function() {
Calendly.initBadgeWidget({
url: 'https://calendly.com/<YOUR LINK>',
text: 'Your Button Text Here',
color: '#0069ff',
textColor: '#ffffff'
});
}
</script>
<!-- Calendly badge widget end -->

Benötigen Sie Hilfe bei der Farbauswahl? Probieren Sie eine Kontrastprüfung aus, um sicherzustellen, dass Ihre Optionen zugänglich sind.

Ändern Sie die Position des Widgets

Wenn Sie unseren Popup-Widget-Einbettungscode verwenden, ist die Standardplatzierung des Widgets am rechten unteren Rand der Webseite ausgerichtet. Um die Ausrichtung entweder nach links oder in die Mitte Ihrer Seite zu ändern, fügen Sie einen der unten stehenden CSS-Codes hinzu. Passen Sie dann die linken und rechten Werte an, bis Sie den gewünschten Abstand erreicht haben.

Links:

<!-- Das Abzeichen-Widget nach links ausrichten -->
<style type="text/css"> 
.calendly-badge-widget { 
right: auto ! important; 
left: 20px ! important; 
} 
</style> 
<!-- Ende linksbündige Ausrichtung des Abzeichen-Widgets -->

Center:

<!-- center align the badge widget-->
<style type="text/css">
.calendly-badge-widget { 
left: 50% ! important; 
margin-left: -100px! important; 
}
</style>
<!--end center align the badge widget-->

Vorschau ansehen und Ihre Einbettung anpassen

  • Testen Sie mobile und Desktop-Layouts
  • Verwenden Sie das Prüfungstool Ihres Browsers (Rechtsklick > Untersuchen), um Änderungen auszuprobieren
  • Passen Sie Breite und Höhe an, bis die Einbettung zu Ihrer Website passt
War dieser Beitrag hilfreich?