Dieser Artikel bezieht sich auf die Registrierungsseite, die im Juni 2025 eingeführt wurde. Lies stattdessen diesen Artikel, wenn du noch die vorherige Version verwendest.
Du verwendest noch die vorherige Version, möchtest aber zur neuen wechseln? Lies diesen Artikel.
Wenn sich Personen über deine eigene Website für deine Webinare anmelden sollen, ist das Embed-Formular die ideale Lösung. Du kannst das Anmeldeformular auf vier verschiedene Arten auf deiner Website platzieren:
Als Button
Bei dieser Option öffnet ein Button das Anmeldeformular. Er kann an einer festen Stelle auf deiner Website oder als Overlay platziert werden, das beim Scrollen sichtbar bleibt.
Als Inline-Embed
Bei dieser Option handelt es sich um das Anmeldeformular selbst. Du kannst es an einer festen Stelle auf deiner Website platzieren.
Als benutzerdefinierter Link
Bei dieser Option handelt es sich um einen einfachen Hyperlink, der das Anmeldeformular öffnet. Du kannst ihn an einer festen Stelle auf deiner Website platzieren.
Als Widget
Bei dieser Option handelt es sich um eine Leiste oder Kachel mit Webinarinformationen. Du platzierst sie als Overlay auf deiner Website, das beim Scrollen sichtbar bleibt.
Das Inline-Embed und die Formulare, die bei Verwendung der Optionen Button, benutzerdefinierter Link und Widget angezeigt werden, verwenden die Branding-Theme-Farben deines Kontos. Folge den Schritten in diesen Artikel, um sie zu bearbeiten.
Bitte beachte! Wenn du einen Embed-Code generierst, erhält er eine eindeutige Kennung. Diese Kennung befindet sich im Code und kann nur einmal pro Seite verwendet werden. Daher kannst du denselben Embed-Code nicht mehrfach auf einer Seite platzieren. Wenn du dasselbe Embed-Formular an mehreren Stellen auf einer Seite verwenden möchtest, musst du einen neuen Embed-Code generieren, damit die Kennung anders ist. Aktualisiere dazu die Seite und kopiere den neuen Code.
Embed-Formular erstellen
So erstellst du ein Embed-Formular:
Suche dein Webinar in der Webinarübersicht und klicke auf den Titel.
Klicke auf den Button „Webinar bearbeiten“.
Gehe zu „Anmeldung“.
Gehe zu „Embed“.
Wähle den Typ des Embed-Formulars aus, den du verwenden möchtest: Button, Inline-Embed, benutzerdefinierter Link oder Widget.
Passe das ausgewählte Embed-Formular an. Beschreibungen aller Optionen findest du hier.
Wenn du fertig bist, kopiere den Code, indem du auf das Symbol mit den zwei Seiten klickst, und füge ihn in den HTML-Code deiner Website ein.
Vergiss nicht, die Änderungen an deiner Website zu speichern!
Das war’s! Wenn du alles richtig gemacht hast, wird das Embed jetzt auf deiner Website angezeigt.
Anpassungsoptionen
Anmeldeformular (alle Typen)
Du kannst das Anmeldeformular anpassen, das geöffnet wird, wenn jemand auf dein Embed klickt. Folgende Elemente können angepasst werden:
Sprache
Theme
Farben
Bestätigungsseite
Lies weiter, um zu erfahren, wie du all diese Elemente änderst.
Sprache des Embed-Formulars ändern
Standardmäßig verwendet dein Embed-Formular die Sprache deines Webinars. Du kannst es auch so konfigurieren, dass es die Browsersprache des Besuchers oder eine feste Sprache aus einer Liste verwendet. Diese Einstellung kannst du nach Auswahl eines Embed-Typs über das Dropdown-Menü „Embed-Sprache“ ändern.
Theme des Embed-Formulars ändern
Standardmäßig verwendet dein Embed-Formular das Standard-Theme deines Kontos (hell oder dunkel). Du kannst es auch so konfigurieren, dass es das System-Theme des Besuchers oder ein festes Theme verwendet. Diese Einstellung kannst du nach Auswahl eines Embed-Typs über das Dropdown-Menü „Embed-Theme“ ändern.
Farben des Embed-Formulars ändern
Standardmäßig verwendet dein Embed-Formular die Theme-Farben deines Kontos. Du kannst sie für jedes einzelne Embed-Formular mit benutzerdefinierten Farben überschreiben. Aktiviere dazu das Kontrollkästchen neben „Benutzerdefiniertes Theme überschreiben“ und wähle die gewünschten Farben aus. Bei Widgets bestimmt dies auch die Farbe des Widgets selbst. Wenn statt einer farbtheoretisch angepassten Version deine exakten Markenfarben verwendet werden sollen, aktiviere im Farbwähler „Exakte Markenfarben verwenden“. Dadurch werden die eingegebenen HEX-Farben exakt auf die Embed-Umgebung angewendet.
Für exakte Markenfarben muss das „Embed-Theme“ auf „Hell“ oder „Dunkel“ gesetzt sein, nicht auf „System-Theme des Besuchers übernehmen“, da das Theme sonst automatisch wechseln könnte und dies die Darstellung deiner Markenfarben beeinträchtigen kann.
Tipp! Beim Erstellen eines Button- oder benutzerdefinierten Link-Embeds kannst du keine Vorschau des Formulars anzeigen. Du kannst jedoch zu „Inline-Embed“ wechseln und zurückwechseln, um zu sehen, wie es aussehen wird.
Einseitiges Anmeldeformular verwenden
Standardmäßig verfügen alle Embed-Typen über ein mehrseitiges Anmeldeformular, wenn Zuschauer mehr als nur ihren Vornamen und ihre E-Mail-Adresse eingeben müssen, auch wenn sie zwischen mehreren Ausstrahlungsterminen wählen.
Embeds können so konfiguriert werden, dass das Anmeldeformular alle Anmeldefelder auf einer einzigen Seite enthält. Aktiviere dazu das Kontrollkästchen neben „Einseitiges Formular“.
Benutzerdefinierte Bestätigungsseite für dein Embed-Formular verwenden
Standardmäßig wird Abonnenten nach der Anmeldung eine Bestätigung im Embed-Formular angezeigt. Du kannst eine benutzerdefinierte URL festlegen, zu der Personen nach der Anmeldung weitergeleitet werden. Klicke dazu unter „Zuschauer nach der Anmeldung zu einer benutzerdefinierten URL weiterleiten“ auf „Bearbeiten“, füge die URL in das Textfeld „Benutzerdefinierte URL“ ein und klicke auf „Speichern“.
Für Buttons
Inline-Embed und fixiertes Embed
Es gibt zwei Arten von Embed Buttons: Inline-Embed Buttons und fixierte Embed Buttons. Beide öffnen beim Anklicken das Anmeldeformular, werden aber auf deiner Website unterschiedlich dargestellt.
Der Inline-Embed Button wird an einer bestimmten Stelle auf deiner Website platziert und bleibt dort. Er verschwindet also beispielsweise vom Bildschirm, wenn jemand nach unten scrollt.
Der fixierte Embed Button bleibt dagegen sichtbar, wenn Besucher deiner Website nach oben oder unten scrollen. Er ist immer vorhanden, sodass die Anmeldung nicht vergessen wird. Du kannst auswählen, ob der fixierte Embed Button unten links oder unten rechts auf deiner Website angezeigt wird.
Buttontext und Farben
Text und Farben deines Embed-Buttons können an deine Website angepasst werden. Verwende beim Erstellen des Buttons unter „Anpassen“ die Optionen „Buttontext“, „Buttonfarbe“ und „Buttontextfarbe“, um ihn nach deinen Wünschen anzupassen.
Für Inline-Embeds
Logo, Titel und Datum anzeigen
Standardmäßig zeigen Inline-Embed-Formulare über dem Anmeldeformular das Logo deines Unternehmens, den Webinartitel und Datum/Uhrzeit des Webinars an. Du kannst diese Elemente jetzt einzeln über die Kontrollkästchen „Logo anzeigen“, „Titel anzeigen“ und „Datum anzeigen“ steuern. Deaktiviere eines davon, um das entsprechende Element in deinem Inline-Embed auszublenden.
Diese Optionen eignen sich perfekt, wenn du einige oder alle dieser Informationen auf deiner Website auf eigene Weise anzeigen möchtest, ohne dass WebinarGeek sie im Embed dupliziert.
Das Inline-Embed hat standardmäßig eine Hintergrundfarbe. Wenn diese nicht zu deiner Website passt oder du lieber den Hintergrund deiner Website verwenden möchtest, aktiviere das Kontrollkästchen neben „Transparenter Hintergrund“, um den Hintergrund des Inline-Embeds transparent zu machen.
Für benutzerdefinierte Links
Text für benutzerdefinierten Link
Der Text deines benutzerdefinierten Links kann an dein Webinar angepasst werden. Verwende beim Erstellen des Links unter „Anpassen“ die Option „Buttontext“, um ihn nach deinen Wünschen anzupassen.
Für Widgets
Fixierte Leiste und fixierte Kachel
Es gibt zwei Arten von Widgets: fixierte Leisten und fixierte Kacheln. Beide öffnen beim Anklicken ihres Buttons das Anmeldeformular, werden aber auf deiner Website unterschiedlich dargestellt.
Die fixierte Leiste ist eine horizontale Leiste, die oben oder unten auf deiner Website angezeigt wird und dort bleibt.
Die fixierte Kachel ist dagegen eine kleinere Version des Widgets, die weniger Platz als die fixierte Leiste einnimmt. Die Kachel kann oben links, oben rechts, unten links oder unten rechts platziert werden und bleibt dort.
Sowohl die fixierte Leiste als auch die fixierte Kachel bleiben immer sichtbar, unabhängig davon, wie weit Personen auf deiner Website scrollen. Beide haften an der von dir gewählten Stelle auf dem Bildschirm.
Widget-Farben
Anders als bei den anderen Embed-Optionen werden die Widget-Farben durch die Theme-Farben deines Kontos bestimmt, die auch auf das Anmeldeformular selbst angewendet werden.
Standardmäßig verwendet dein Widget die Theme-Farben deines Kontos. Du kannst sie für jedes einzelne Widget mit benutzerdefinierten Farben überschreiben.
Buttontext
Der Text auf dem Button deines Widgets kann an dein Webinar angepasst werden. Verwende beim Erstellen des Widgets unter „Anpassen“ die Option „Buttontext“, um den Text des Widget-Buttons nach deinen Wünschen anzupassen.
Erweiterte Konfiguration
Embed als iframe
Du kannst den Embed-Code auch innerhalb eines iframe verwenden, dafür musst du jedoch „srcdoc“ verwenden (siehe auch hier). Der Embed-Code sieht dann wie folgt aus:
<iframe srcdoc='
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+"?t="+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, "script", "https://malong.webinargeek.com/malong.embed.js", "mw_12345");
mw_12345("init", {
project: "registration",
identifier: "12345",
shape: "inline"
});
</script>
' />
Wie du vielleicht bemerkst, fehlt das <div id="mw_Tv1FSKM6ScX_webinargeek"></div>, da es bei Verwendung dieser Methode entfernt werden muss.
Embed zur Vorauswahl einer bestimmten Ausstrahlung verwenden
Du kannst das Embed so einstellen, dass eine bestimmte Ausstrahlung vorausgewählt wird, um sicherzustellen, dass Personen sich für genau diese Ausstrahlung anmelden.
Füge dazu Folgendes zum Code hinzu:
,
broadcastId: "1234"
Die Ausstrahlungs-ID findest du entweder über die Statistiken und die letzte Zahl in der URL oder über die Optionen neben der Ausstrahlung und dann „API-Referenz“.
Ein vollständiges Beispiel:
<div id="mw_Tv1FSKM6ScX_webinargeek"></div>
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+'?t='+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, 'script', 'https://malong.webinargeek.com/malong.embed.js', 'mw_Tv1FSKM6ScX');
mw_Tv1FSKM6ScX("init", {
project: "registration",
identifier: "2e467174-46e1-4305-9c33-587f0cd8ad7a",
shape: "inline",
broadcastId: "1234"
});
</script>
Benutzerdefinierte Registrierungslinks für Embed-Formulare
Benutzerdefinierte Registrierungslinks sind Links, die du erstellen kannst, um Anmeldungen aus bestimmten Quellen zu messen. Damit kannst du verschiedene Registrierungslinks für unterschiedliche Social-Media- und/oder Werbekampagnen verwenden. Weitere Informationen über benutzerdefinierte Registrierungslinks und ihre Erstellung findest du in diesen Artikel.
Das Anwenden benutzerdefinierter Registrierungslinks auf Embed-Formulare ist etwas schwieriger und erfordert mehr technisches Wissen. Sobald du einen benutzerdefinierten Registrierungslink erstellt hast, kannst du ihn mit den folgenden Schritten auf deine Embed-Formulare anwenden:
Nachdem du deinen benutzerdefinierten Registrierungslink mit den Schritten in diesen Artikel erstellt hast, gehe beim Bearbeiten deines Webinars zu „Embed“.
Wähle deinen Embed-Typ und passe ihn an.
Kopiere den Code und füge ihn an einer Stelle ein, an der du ihn bearbeiten kannst.
Füge am Ende der Zeile vor
});ein Komma (,) hinzu, zum Beispiel nach:
shape: "inline"Erstelle eine neue Zeile über
});und füge Folgendes hinzu:
cst: "<your custom link name>"
Was du nachcst:eingeben musst, ist der fett gedruckte Teil deines benutzerdefinierten Registrierungslinks, wie im Screenshot unten gezeigt.Das Ende deines Codes sollte ungefähr so aussehen. Beachte, dass jeder Embed-Formulartyp eine andere letzte Zeile hat; dieses Beispiel gilt für ein Inline-Embed. Wenn du beispielsweise ein Button-Embed verwendest, könnte in der vorletzten Zeile stattdessen
customTextColor: "#ffffff"stehen. Das hängt ganz von der Anpassung deines Embed-Formulars ab.shape: "inline",
cst: "website"
});
</script>Kopiere den bearbeiteten Code und füge ihn an der Stelle ein, an der du dein Embed-Formular platzieren möchtest.
Unten findest du ein Beispiel für einen Inline-Embed-Code, auf den im Code ein benutzerdefinierter Registrierungslink angewendet wurde:
<div id="mw_Tv1FSKM6ScX_webinargeek"></div>
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+'?t='+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, 'script', 'https://malong.webinargeek.com/malong.embed.js', 'mw_Tv1FSKM6ScX');
mw_Tv1FSKM6ScX("init", {
project: "registration",
identifier: "2e467174-46e1-4305-9c33-587f0cd8ad7a",
shape: "inline",
cst: "website"
});
</script>
Eigenen Button für Embed-Formulare verwenden
Du kannst für deine Webinar-Embed-Formulare einen eigenen Button verwenden, wenn die vorhandenen Anpassungsoptionen für Buttons deinen Anforderungen nicht genügen. Verwende dazu den Embed-Typ „Benutzerdefinierter Link“ als Grundlage und bearbeite den Code manuell. Folge diesen Schritten:
Suche dein Webinar in der Webinarübersicht und klicke auf den Titel.
Klicke auf den Button „Webinar bearbeiten“.
Gehe zu „Anmeldung“.
Gehe zu „Embed“.
Wähle „Benutzerdefinierter Link“ als Embed-Typ aus.
Kopiere den Code und füge ihn an einer Stelle ein, an der du ihn bearbeiten kannst.
Ersetze nun die erste Codezeile, die etwa so aussehen sollte:
<span onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup',durch deinen eigenen Button und achte darauf, dass das Attribut „onclick“ erhalten bleibt. Der Code sollte dann etwa so aussehen:
<button class="your class names" onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup', [])">Register hier</button>
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+'?t='+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, 'script', 'https://malong.webinargeek.com/malong.embed.js', 'mw_IMdJQyvjVrd');
mw_IMdJQyvjVrd("init", {
project: "registration",
identifier: "12345",
shape: "link"
});
</script>Wenn du fertig bist, kopiere den geänderten Code und füge ihn in den HTML-Code deiner Website ein.
Vergiss nicht, die Änderungen an deiner Website zu speichern!
Embeds mit CSS anpassen
Wenn die Embeds von WebinarGeek nicht ganz zum Stil deiner Website passen, kannst du sie mit CSS auf deiner Website weiter anpassen, als es der Webinar-Assistent erlaubt.
Du kannst beispielsweise das folgende CSS verwenden, um die Rundung der Buttons zu ändern:
*::part(wg-button-primary) {
border-radius: 4px;
}
*::part(wg-button-secondary) {
border-radius: 4px;
}Oder dieses, um die Farben der Buttons im Formular zu ändern:
/* Button */
*::part(wg-button-primary) {
background-color: rgb(0, 208, 255);
color: rgb(0, 0, 0)
}
/* Focus state */
*::part(wg-button-primary):focus-visible {
outline-color: rgb(0, 208, 255);
}
/* State-layer, indicating hover/focus/active state */
*::part(wg-button-primary)::before {
background-color: rgb(0, 0, 0);
}
Diese Ergänzungen nimmst du im CSS deiner eigenen Website vor, da dort die Embeds platziert sind.
Bitte beachte! Diese Änderungen gelten für jedes WebinarGeek-Embed auf deiner Website.