So fügt man Calendly zu einer Shopify-Website hinzu

Wenn Ihre Calendly-Einbettung nicht auf Ihrer Shopify-Website erscheint, führen Sie diese Schritte aus, um das Problem zu beheben.

Schritt 1 – Bestätigen Sie Ihren Einbettungs-Code und Ihre Theme-Einstellungen

1. Kopieren Sie in Calendly den Inline-Einbettungs-Code für Ihren Ereignistyp.
2. Gehen Sie in Shopify zu Online-Shop > Themes.
3. Suchen Sie Ihr aktives Theme und wählen Sie Aktionen > Code bearbeiten.
4. Wählen Sie eine der folgenden Optionen:
• Fügen Sie einen neuen benutzerdefinierten HTML-Block hinzu oder
• Erstellen Sie eine neue Snippet-Datei.
5. Wenn Sie ein Snippet verwenden, geben Sie ihm einen Namen, auf den Sie später leicht zurückgreifen können (wie Calendly).
6. Fügen Sie den Calendly-Einbettungs-Code in das Snippet oder den HTML-Block ein und wählen Sie Speichern.

Schritt 2 – Verweisen Sie in Ihrer Seitenvorlage auf die Einbettung.

1. Öffnen Sie die Shopify-Seitenvorlage, auf der Sie Ihre Calendly-Einbettung anzeigen möchten.
2. Fügen Sie den folgenden Code am Ende der Datei hinzu:
   
   
   include 'Calendly'
   (Ersetzen Sie 'Calendly' durch den Namen, den Sie verwendet haben, wenn er anders ist.)
3. Speichern Sie Ihre Änderungen.

Einige Shopify-Themes verbergen leere HTML-Elemente, was verhindern kann, dass das Popup geschlossen wird.

Fix: Fügen Sie diesen HTML-Code nach Ihrem Einbettungscode ein:

<style>
 .calendly-overlay .calendly-popup-close,
 .calendly-overlay .calendly-close-overlay {
  display: block ! wichtig;
 }
</style>

Wenn Ihr Kalender abgeschnitten aussieht:

1. Erhöhen Sie die Höhe in Ihrem Einbettungscode:

   <div class="calendly-inline-widget"
   data-url="https​:​//calendl​y.com/YOUR​_EVENT"
   style="min-width:320px;height:1000px;">
   </div>

2. Wenn dies nicht hilft, fügen Sie dieses CSS zu Ihrem Shopify-Theme hinzu:
• Gehen Sie zum Online Store > Code bearbeiten > Assets > theme.scss.liquid
• Fügen Sie unten Folgendes hinzu:

  iframe {
  height: 100vh ! wichtig;
  }

Dadurch wird der iframe gezwungen, die volle Höhe des Bildschirms zu nutzen.