So steuern Sie das Layout und die Größe Ihrer Einbettung

Calendly passt das Kalenderlayout an die Größe seines Containers an. Sie können das Layout und die Größe ändern, um besser zu Ihrer Website oder App zu passen.

Wählen Sie ein Layout basierend auf der Breite aus

Die Inline-Einbettung von Calendly verfügt über drei Layout-Stilarten. Der Stil hängt von der Breite des Containers ab (genannt "übergeordneter Container").

Großes Fensterlayout

Breite des übergeordneten Elements >= 1100px

Wide inline embed.png

Beispiel

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:1100px;height:700px;"></div>

Mittleres Fenster-Layout

Breite des übergeordneten Elements < 1100px und >= 650px

Medium inline embed.png

Beispiel

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:700px;height:700px;"></div>

Kleines Fensterlayout

Breite des Elements < 650px

Small inline embed.png

Beispiel

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:600px;height:700px;"></div>

Scrollleisten entfernen

Wenn Sie eine Scrollleiste innerhalb der Einbettung sehen:

  • Erhöhen Sie die Höhe im Einbettungscode style="min-width:320px;height:750px;"
  • Verwenden Sie data-resize="true" , um die automatische Größenänderung zu aktivieren

Beispiel:

<div 
class="calendly-inline-widget"
data-url="https://calendly.com/your-link"
style="min-width:320px; height:750px;"
data-resize="true">
</div>
<script
type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async>
</script>

Mindestbreite für Mobilgeräte

Calendly benötigt eine Breite von mindestens 320px, um auf Mobilgeräten korrekt angezeigt zu werden.

Wenn die Einbettung dezentriert oder abgeschnitten aussieht:

  • Achten Sie auf zusätzliche Abstände oder Ränder auf Mobilgeräten.
  • Stellen Sie sicher, dass der Container mindestens 320px breit ist.

Testen Sie Ihr Einbettungslayout

Nach dem Hinzufügen der Einbettung:

  • Layout auf Desktop und Mobilgerät prüfen
  • Verwenden Sie das Inspektionstool Ihres Browsers, um eine Vorschau verschiedener Größen anzuzeigen.
  • Passen Sie die Größe oder die Ränder des Containers nach Bedarf an