Betten Sie Calendly in Ihre Shopify-Website ein, damit Besucher bei Ihnen buchen können, ohne Ihren Shop zu verlassen. Shopify unterstützt Inline-Einbettungen, Popup-Text und Popup-Widgets.
In diesem Leitfaden wird erläutert, wie Sie jeden Einbettungstyp hinzufügen und häufige Anzeigeprobleme lösen.
Bevor Sie beginnen
Generieren Sie zuerst Ihren Calendly-Einbettungscode. Sie können Folgendes einbetten:
- Ein bestimmter Ereignistyp oder
- Ihre Buchungsseite
Unterstützte Einbettungstypen in Shopify
Shopify unterstützt drei Calendly-Einbettungsoptionen:
- Inline-Einbettung – Zeigt Ihren Kalender direkt auf einer Seite an
- Popup-Text – Ein Textlink, der Ihren Kalender in einem Popup-Fenster öffnet
- Popup-Widget – Eine schwebende Schaltfläche, die Ihren Kalender auf jeder Seite öffnet
Eine Inline- oder Popup-Text-Einbettung hinzufügen
So betten Sie Calendly in eine bestimmte Shopify-Seite ein:
- Gehen Sie im Shopify-Admin zu Onlineshop > Anpassen
- Wählen Sie im linken Menü die Option Abschnitt hinzufügen
- Wählen Sie Benutzerdefinierte Flüssigkeit
- Fügen Sie Ihren Calendly-Einbettungscode auf der rechten Seite in das Textfeld ein
- Klicken Sie auf Speichern
Dies funktioniert sowohl für Inline- als auch für Popup-Text-Einbettungscodes.
Ein Popup-Widget über Ihre gesamte Website anzeigen
So zeigen Sie auf jeder Seite eine schwebende Calendly-Schaltfläche an:
- Gehen Sie im Shopify-Admin zu Online Store > Themes
- Suchen Sie Ihr Theme und wählen Sie die Schaltfläche ...
- Wählen Sie Code bearbeiten aus.
- Wählen Sie im linken Menü theme.liquid aus.
- Suchen Sie das <head>-Tag
- Direkt danach einen Zeilenumbruch hinzufügen
- Fügen Sie Ihren Calendly-Popup-Widget-Code ein
- Klicken Sie auf Speichern
Um zu überprüfen, ob es funktioniert, wählen Sie Shop-Vorschau.
Beheben Sie Shopify-Anzeigeprobleme
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
- Kopieren Sie in Calendly den Inline-Einbettungs-Code für Ihren Ereignistyp.
- Gehen Sie in Shopify zu Online-Shop > Themes.
- Suchen Sie Ihr aktives Theme und wählen Sie Aktionen > Code bearbeiten.
- Wählen Sie eine der folgenden Optionen:
- Fügen Sie einen neuen benutzerdefinierten HTML-Block hinzu oder
- Erstellen Sie eine neue Snippet-Datei.
- Wenn Sie ein Snippet verwenden, geben Sie ihm einen Namen, auf den Sie später leicht zurückgreifen können (wie
Calendly). - 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.
- Öffnen Sie die Shopify-Seitenvorlage, auf der Sie Ihre Calendly-Einbettung anzeigen möchten.
- Fügen Sie den folgenden Code am Ende der Datei hinzu:
(Ersetzen Sie
'Calendly'durch den Namen, den Sie verwendet haben, wenn er anders ist.) - 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:
- Erhöhen Sie die Höhe in Ihrem Einbettungscode:
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_EVENT" style="min-width:320px;height:1000px;"> </div> - 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.