Dit artikel gaat over de registratiepagina die in juni 2025 geïntroduceerd is. Gebruik je nog de oude? Lees dan dit artikel.

Gebruik je de oude versie nog maar wil je overstappen naar de nieuwe? Dit artikel legt het uit.

Als je wilt dat mensen zich via je eigen website aan kunnen melden voor je webinars is het embedded formulier je beste vriend. Hiermee kan je het registratieformulier op je eigen website plaatsen op vier verschillende manieren:

Als een knop
Deze optie is een knop die het registratieformulier opent. Hij kan op een vaste plek gezet worden of als een overlay die zichtbaar blijft wanneer men door je website scrollt.

Als een inline embed
Deze optie is het registratieformulier zelf. Hij kan op een vaste plek gezet worden op je website.

Als een aangepaste link
Deze optie is een simpele hyperlink die het registratieformulier opent. Hij kan op een vaste plek gezet worden op je website.
Als widget
Een widget is een balk of tegel die een aftelklok naar je webinar laat zien. Je plaatst deze als overlay op je website, zodat hij altijd zichtbaar blijft als bezoekers scrollen.

De inline embed en de formulieren die geopend worden wanneer je de knop, aangepaste link en widget opties gebruikt, gebruiken de themakleuren uit de brandinginstellingen. Volg de stappen in dit artikel om deze te bewerken.

Let op! Elke keer dat je een embedcode aanmaakt, krijgt die een uniek kenmerk mee. Dat kenmerk zit verwerkt in de code en mag maar één keer per pagina gebruikt worden. Je kunt dus niet exact dezelfde embedcode meerdere keren op één pagina plaatsen. Wil je het inschrijfformulier op meerdere plekken op dezelfde pagina tonen? Maak dan een nieuwe insluitcode aan. Zo krijg je een ander uniek kenmerk. Dit doe je door de pagina te verversen en daarna de nieuwe embed te kopiëren.

Een embedformulier maken

Volg de stappen hieronder om een embedformulier te maken:

Zoek het webinar op in het webinar overzicht en klik op de titel
Klik op de ‘Webinar bewerken’ knop
Klik op 'Registratie'
Klik op ‘Embed’
Selecteer het type embedformulier dat je wilt gebruiken: knop, inline embed, aangepaste link of widget.
Personaliseer je gekozen embedformulier. Je vind hier een uitleg van alle opties.
Wanneer je klaar bent kopieer je de code door op het icoontje met twee blaadjes te klikken en deze in de HTML code van je website te plaatsen.
Vergeet de veranderingen aan je website niet op te slaan!

Dat is het! Als alles goed gegaan is staat het embedformulier nu op je website.

Personalisatie-opties

Registratieformulier (alle types)

Je kan het registratieformulier aanpassen dat opent wanneer iemand op je embed klikt. De dingen die je kan bewerken zijn:

De taal
Het thema
De kleuren
De bevestigingspagina

Blijf lezen om erachter te komen hoe je deze dingen verandert.

De taal van je embedformulier veranderen

Standaard gebruikt je embedformulier de taal van het webinar. Je kan hem ook zo instellen dat de taal van de bezoeker’s browser of een andere taal wordt gebruikt. Deze instelling kan je veranderen met het ‘Embed taal’ dropdown menu na het kiezen van een embedtype.

Een afbeelding van het taalmenu voor embed formulieren

Het thema van je embedformulier veranderen

Standaard gebruikt je embedformulier het thema van het account (licht of donker). Je kan hem ook zo instellen dat het systeemthema van de bezoeker’s computer of een bepaald thema wordt gebruikt.

Een afbeelding van het themamenu voor embedformulieren

De kleuren van je embedformulier veranderen

Standaard gebruikt je embedformulier de themakleuren van je account. Je kunt dit per formulier overschrijven met eigen kleuren. Zet hiervoor een vinkje bij ‘Aangepaste thema kleuren’ en kies de kleuren die je wilt gebruiken. Bij widgets bepaalt deze instelling ook de kleur van de widget zelf.

Een afbeelding van de kleurinstellingen met een voorbeeldweergave van het embedformulier

Tip! Er is geen voorbeeld van het formulier zelf wanneer je een knop of aangepaste link embed maakt, maar je kan altijd even switchen naar ‘Inline embed’ om te checken hoe het eruit gaat zien.

Een eigen bevestigingspagina gebruiken voor je embedformulier

Standaard krijgen mensen een bevestiging binnen het embedformulier te zien wanneer ze hun inschrijving afmaken. Je kan ervoor kiezen om een eigen URL in te stellen waar mensen naar doorgestuurd worden bij het afmaken van de inschrijving. Klik hiervoor op ‘Bewerk’ onder ‘Leid kijkers om naar een aangepaste URL na registratie’, vul een URL in en klik dan op ‘Opslaan’.

Een afbeelding van de instelling voor een aangepaste bevestigingspagina bij embedformulieren

Voor knoppen

Inline embed en sticky embed

Er zijn twee soorten embed knoppen: inline embed knoppen en sticky embed knoppen. Beide openen het registratieformulier wanneer erop geklikt wordt, maar ze zien er anders uit op je website.

De inline embed knop plaats je op een bepaalde plek op je website en blijft daar staan, wat betekent dat deze uit beeld verdwijnt wanneer een persoon naar beneden scrollt, bijvoorbeeld.

De sticky embed knop blijft zichtbaar wanneer bezoekers van je website naar boven of beneden scrollen. Deze is altijd in zicht, dus ze kunnen niet vergeten zich in te schrijven! Wanneer je de sticky embed knop gebruikt, kun je ervoor kiezen deze aan de linker- of rechteronderkant van de website te zetten.

Een afbeelding van de selectie voor embed knoptype

Knoptekst en kleuren

De tekst en kleuren van je embedknop kunnen veranderd worden om bij jouw website te passen. Bij het aanmaken van de knop gebruik je de ‘Knoptekst’, ‘Knopkleur’ en ‘Knop tekstkleur’ opties onder ‘Aanpassen’ om deze te veranderen.

Een afbeelding van de instellingen voor knoptekst en knopkleur

Voor inline embeds

Alleen formulier tonen

Standaard bevatten inline embed formulieren het logo van je bedrijf, de titel en de datum/tijd van het webinar. Deze informatie kan je gemakkelijk uit je inline embed weghalen door de ‘Alleen formulier tonen’ optie te gebruiken.

Deze instelling is perfect wanneer je deze informatie op je eigen manier op je website wilt plaatsen.

Afbeelding van een inline embedformulier met de instelling ‘Alleen formulier tonen’ ingeschakeld

Voor aangepaste links

Aangepaste link tekst

De tekst van je aangepaste link kan veranderd worden zodat deze bij jouw webinar past. Bij het aanmaken van de aangepaste link embed gebruik je de ‘Knoptekst’ optie onder ‘Aanpassen’ om deze te veranderen.

Voor widgets

Vaste balk en vaste tegel

Er zijn twee soorten widgets: vaste balken en vaste tegels. Allebei openen ze het registratieformulier wanneer iemand op de knop klikt, maar ze zien er verschillend uit op je website.

De vaste balk is een horizontale balk die bovenaan of onderaan je website staat en daar ook blijft staan.

Een afbeelding van een vaste balk widget

De vaste tegel is een kleinere versie van de widget die minder ruimte inneemt dan de vaste bak. Je kunt hem linksboven, rechtsboven, linksonder of rechtsonder op je website plaatsen, en hij blijft daar zichtbaar.

Een afbeelding van een vaste tegel widget

Zowel de vaste balk als de vaste tegel blijven altijd zichtbaar, ook als bezoekers ver naar beneden scrollen. Ze plakken aan het deel van het scherm dat jij kiest.

Widgetkleuren

In tegenstelling tot andere embed-opties worden de kleuren van widgets bepaald door de themakleuren van je account. Deze kleuren worden ook gebruikt voor het registratieformulier zelf.

Standaard gebruikt je widget de themakleuren van je account. Je kunt dit per widget aanpassen.

Een afbeelding van het aanpassen van de themakleuren voor een widget

Knoptekst

De tekst op de knop van je widget kun je zelf aanpassen, zodat hij goed past bij je webinar. Bij het maken van je widget gebruik je de optie ‘Knoptekst’ onder ‘Aanpassen’ om de tekst op de knop naar wens te veranderen.

Geavanceerde instellingen

Een iframe gebruiken

Je kunt de embedcode ook in een iframe gebruiken, maar dan moet je "srcdoc" gebruiken (zie ook deze link). De embedcode ziet er dan als volgt uit:

<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>
  ' />

Zoals je ziet is <div id="mw_Tv1FSKM6ScX_webinargeek"></div> verdwenen. Dat komt omdat deze verwijderd moet worden als je deze methode gebruikt.

Aangepaste registratielinks voor embedformulieren

Met aangepaste registratielinks kun je meten uit welke bron een registratie komt. Zo kun je bijvoorbeeld aparte links gebruiken voor verschillende social media of advertentiecampagnes. In dit artikel lees je meer over hoe je aangepaste registratielinks maakt.

Die links toepassen in embedformulieren is wat technischer en vraagt iets meer kennis. Maar als je een aangepaste registratielink hebt gemaakt, kun je met de stappen hieronder zorgen dat je embedformulier die link gebruikt:

Maak je aangepaste registratielink zoals uitgelegd in dit artikel en ga daarna naar ‘Embed’ terwijl je je webinar aan het bewerken bent.
Kies het type embed en pas het aan zoals je wilt.
Kopieer de code en plak die ergens waar je de code kunt bewerken.
Voeg een komma (,) toe aan het einde van de regel vóór });, bijvoorbeeld na:
shape: "inline"
Voeg een nieuwe regel toe boven }); en zet daar:
cst: "<jouw linknaam>"
Het stukje dat je invult achter cst: is het vetgedrukte deel van je aangepaste registratielink zoals je hieronder in het screenshot ziet.
Het einde van je code moet er ongeveer zo uitzien. Let erop dt elk type embedformulier een andere laatste regel heeft. Dit voorbeeld is voor een inline embed. Gebruik je bijvoorbeeld een knop-embed, dan kan de voorlaatste regel er zo uitzien: customTextColor: "#ffffff". Dat hangt helemaal af van je instellingen van het embedformulier.
```
   shape: "inline",
    cst: "website"
  });
</script>
```
Kopieer en plak de aangepaste code op de plek waar je het embedformulier wilt plaatsen.

Hieronder zie je een voorbeeld van een inline embedcode waar een aangepaste registratielink in de code is toegevoegd.

<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>

Je eigen knop gebruiken voor embedformulieren

Wil je liever je eigen knop gebruiken voor het inschrijfformulier dat je op je website plaatst? Dat kan! Als de standaardinstellingen niet precies zijn wat je zoekt, kun je dit aanpassen met de ‘Aangepaste link’-embed en een kleine wijziging in de code. Volg deze stappen:

Zoek het webinar op in het webinar overzicht en klik op de titel.
Klik op ‘Webinar bewerken’.
Klik op 'Registratie'.
Klik op ‘Embed’.
Kies ‘Aangepaste link’ als embedtype.
Kopieer de code en plak deze op een plek waar je de code kunt aanpassen.

Vervang nu de eerste regel van de code, die er ongeveer zo uitziet:

<span onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup',

door je eigen knop. Zorg er wel voor dat het ‘onclick’-gedeelte blijft staan. Je code ziet er dan ongeveer zo uit:

<button class="your class names" onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup', [])">Register here</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>

Als je klaar bent, kopieer je de aangepaste code en plak je die in de HTML-code van je website.
Vergeet de veranderingen aan je website niet op te slaan!

Embeds aanpassen met CSS

Sluit de stijl van de WebinarGeek-embed nog niet helemaal aan bij je website? Dan kun je met CSS op je eigen site nog meer aanpassen dan via de webinarinstellingen mogelijk is.

Je kunt bijvoorbeeld deze CSS gebruiken om de hoeken van de knoppen ronder te maken:

*::part(wg-button-primary) {
  border-radius: 4px;
}
*::part(wg-button-secondary) {
  border-radius: 4px;
}

Of gebruik dit om de kleuren van de knoppen te wijzigen:

/* 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);
}

Deze CSS voeg je toe aan de stylesheet van je eigen website, omdat de embeds daar worden geladen.

Let op! De wijzigingen gelden voor alle WebinarGeek-embeds op je website.

Embedformulier