Dit artikel gaat over de registratiepagina die in juni 2025 werd geïntroduceerd. Lees dit artikel als je nog de vorige versie gebruikt.

Gebruik je nog de vorige versie maar wil je overstappen op de nieuwe? Bekijk dit artikel.

Wil je dat mensen zich via je eigen website voor je webinars inschrijven, dan is het embedformulier je beste vriend. Hiermee plaats je het registratieformulier op vier verschillende manieren op je website:

Als knop
Deze optie is een knop die het registratieformulier opent. Je kunt die op een vaste plaats op je website zetten of als overlay die zichtbaar blijft terwijl bezoekers door de pagina scrollen.

Als inline embed
Deze optie is het registratieformulier zelf. Je kunt het op een vaste plaats op je website zetten.

Als aangepaste link
Deze optie is een eenvoudige hyperlink die het registratieformulier opent. You can place it in a set location on your website.
Als widget
Deze optie is een balk of tegel met webinarinformatie. Je plaatst die als overlay op je website; de overlay blijft zichtbaar terwijl bezoekers door de pagina scrollen.

De inline embed en de formulieren die verschijnen wanneer je de opties knop, aangepaste link en widget gebruikt, gebruiken de themakleuren van je account. Volg de stappen in dit artikel om ze te wijzigen.

Let op! Wanneer je een embedcode genereert, krijgt die een unieke identificatiecode. Deze code staat in de embedcode en kan maar één keer per pagina worden gebruikt. Je kunt dezelfde embedcode dus niet meerdere keren op één pagina plaatsen. Wil je hetzelfde embedformulier op meerdere plaatsen op één pagina gebruiken, genereer dan een nieuwe embedcode zodat de identificatiecode anders is. Vernieuw de pagina en kopieer de nieuwe code.

Een embedformulier maken

Volg deze stappen om een embedformulier te maken:

Zoek je webinar in je webinaroverzicht en klik op de titel
Klik op de knop ‘Webinar bewerken’
Ga naar ‘Registratie’
Ga naar ‘Embed’
Selecteer het type embedformulier dat je wilt gebruiken: knop, inline embed, aangepaste link of widget.
Pas het gekozen embedformulier aan. Beschrijvingen van alle opties vind je hier.
Wanneer je klaar bent, kopieer je de code door op het pictogram met twee pagina’s te klikken en plaats je die in de HTML-code van je website.
Vergeet de wijzigingen aan je website niet op te slaan!

Dat is alles! Als je alles juist hebt gedaan, verschijnt de embed nu op je website.

Aanpassingsopties

Registratieformulier (alle types)

Je kunt het registratieformulier aanpassen dat wordt geopend wanneer iemand op je embed klikt. Je kunt het volgende aanpassen:

Taal
Vormgeving
Kleuren
Bevestigingspagina

Lees verder om te ontdekken hoe je dit allemaal wijzigt.

De taal van je embedformulier wijzigen

Standaard gebruikt je embedformulier de taal van je webinar. Je kunt het ook instellen op de browsertaal van de bezoeker of op een vaste taal uit een lijst. Je wijzigt deze instelling via het keuzemenu ‘Embedtaal’ nadat je een embedtype hebt geselecteerd.

Een afbeelding van het keuzemenu Embedtaal

Het thema van je embedformulier wijzigen

Standaard gebruikt je embedformulier het standaardthema van je account (licht of donker). Je kunt het ook instellen op het systeemthema van de bezoeker of op een vast thema. Je wijzigt deze instelling via het keuzemenu ‘Embedthema’ nadat je een embedtype hebt geselecteerd.

Een afbeelding van het keuzemenu Embedthema

De kleuren van je embedformulier wijzigen

Standaard gebruikt je embedformulier de themakleuren van je account. Je kunt dit voor elk afzonderlijk embedformulier overschrijven met aangepaste kleuren. Vink hiervoor het vakje naast ‘Aangepast thema overschrijven’ aan en selecteer de gewenste kleuren. Voor widgets bepaalt dit ook de kleur van de widget zelf. Wil je je exacte merkkleuren gebruiken in plaats van een volgens de kleurentheorie aangepaste versie, schakel dan ‘Exacte merkkleuren gebruiken’ in de kleurkiezer in. Zo worden de ingevoerde HEX-kleuren exact toegepast in de embedomgeving.

Voor exacte merkkleuren moet ‘Embedthema’ ingesteld zijn op ‘Licht’ of ‘Donker’, en niet op ‘Systeemthema van bezoeker gebruiken’. Anders kan het thema automatisch wisselen, wat de weergave van je merkkleuren kan beïnvloeden.

Tip! Wanneer je een knop- of aangepaste-link-embed maakt, kun je geen voorbeeld van het formulier zelf bekijken. Je kunt wel overschakelen naar ‘Inline embed’ en weer terug om te zien hoe het eruitziet.

Een registratieformulier op één pagina gebruiken

Standaard gebruiken alle embedtypes een registratieformulier met meerdere pagina’s wanneer de kijker meer moet invullen dan alleen voornaam en e-mailadres, ook wanneer die uit meerdere uitzenddatums kiest.

Je kunt embeds zo instellen dat alle registratievelden op één pagina staan. Gebruik hiervoor het selectievakje naast ‘Formulier op één pagina’.

Een aangepaste bevestigingspagina voor je embedformulier gebruiken

Standaard krijgen inschrijvers na hun inschrijving een bevestiging in het embedformulier te zien. Je kunt een aangepaste URL instellen waarnaar mensen na hun inschrijving worden doorgestuurd. Klik hiervoor op ‘Bewerken’ onder ‘Kijkers na inschrijving doorsturen naar een aangepaste URL’, plak de URL in het tekstvak ‘Aangepaste URL’ en klik op ‘Opslaan’.

Een afbeelding van de instelling voor de aangepaste bevestigingspagina van embedformulieren

Voor knoppen

Inline embed en sticky embed

Thier are two types of embed buttons: inline embed buttons and sticky embed buttons. Both open the registration form when clicked, but they appear differently on your website.

The inline embed button is placed in a specific place on your website and stays thier no matter what, meaning it’ll disappear from a person’s screen if they, for example, scroll down.

The sticky embed button, on the other hand, stays visible as visitors of your website scroll up or down. It’s always thier, so they can’t forget to register! When you use the sticky embed button, you can choose to have it on the bottom left or the bottom right of your website.

Een afbeelding van de selectie van het knoptype

Knoptekst en kleuren

Je kunt de tekst en kleuren van je embedknop aanpassen aan je website. Gebruik tijdens het maken van je knop de opties ‘Knoptekst’, ‘Knopkleur’ en ‘Tekstkleur knop’ onder ‘Aanpassen’.

Voor inline embeds

Logo, titel en datum tonen

Standaard tonen inline embedformulieren het logo van je bedrijf, de webinartitel en de webinar-datum/-tijd boven het registratieformulier. Je kunt elk van deze elementen afzonderlijk beheren met de selectievakjes ‘Logo tonen’, ‘Titel tonen’ en ‘Datum tonen’. Schakel een van deze opties uit om het element in je inline embed te verbergen.

Deze opties zijn ideaal wanneer je een deel of al deze informatie op je eigen manier op je website wilt tonen, zonder dat WebinarGeek die in de embed dupliceert.

De inline embed heeft standaard een achtergrondkleur. Past die niet bij je website of wil je liever de achtergrond van je website gebruiken, maak de achtergrond van de inline embed dan transparant via het selectievakje naast ‘Transparante achtergrond’.

Een afbeelding van de optie ‘Transparante achtergrond’

Voor aangepaste links

Tekst van aangepaste link

Je kunt de tekst van je aangepaste link aanpassen aan je webinar. Gebruik tijdens het maken van je aangepaste link de optie ‘Knoptekst’ onder ‘Aanpassen’.

Een afbeelding van de instelling om de tekst van een aangepaste link aan te passen

Voor widgets

Sticky balk en sticky tegel

Thier are two types of widgets: sticky bars and sticky tiles. Both open the registration form when their button is clicked, but they appear differently on your website.

De sticky balk is een horizontale balk die bovenaan of onderaan je website wordt getoond en op die plaats blijft staan.

Een afbeelding van een sticky-balkwidget

De sticky tegel is daarentegen een kleinere versie van de widget die minder ruimte inneemt dan de sticky balk. Je kunt die linksboven, rechtsboven, linksonder of rechtsonder plaatsen; hij blijft op die plaats staan.

Een afbeelding van een sticky-tegelwidget

Zowel de sticky balk als de sticky tegel blijft altijd zichtbaar, ongeacht hoeveel mensen op je website scrollen. Ze blijven vaststaan op het deel van het scherm dat je kiest.

Widgetkleuren

In tegenstelling tot de andere embedopties worden de widgetkleuren bepaald door de themakleuren in je account, die ook op het registratieformulier zelf worden toegepast.

Standaard gebruikt je widget de themakleuren van je account. Je kunt dit voor elke afzonderlijke widget overschrijven met aangepaste kleuren.

Een afbeelding van de aangepaste thema-instelling voor een widget

Knoptekst

The text on the button of your widget can be changed to suit your webinar. While creating your widget, use the ‘Knoptekst’ option under ‘Cutomize’ to customize the text on the widget’s button to your liking.

Geavanceerde configuratie

Embed als iframe

Je kunt de embedcode ook in een iframe gebruiken, maar daarvoor moet je ‘srcdoc’ gebruiken (zie ook hier). The embed code then looks like this:

<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, ontbreekt de <div id="mw_Tv1FSKM6ScX_webinargeek"></div>. Dat komt omdat die moet worden verwijderd als je deze methode gebruikt.

Een specifieke uitzending vooraf selecteren in de embed

Je kunt de embed een specifieke uitzending vooraf laten selecteren, zodat mensen zich voor één specifieke uitzending inschrijven.

Voeg hiervoor dit toe aan de code:

,
broadcastId: "1234"

Je vindt de uitzendings-ID via Statistieken en vervolgens het laatste nummer in de URL, of door naast de uitzending op opties en daarna op API-referentie te klikken.

Een volledig voorbeeld:

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

Aangepaste registratielinks voor embedformulieren

Aangepaste registratielinks zijn links die je kunt maken om inschrijvingen uit specifieke bronnen te meten. Hiermee kun je verschillende registratielinks gebruiken voor verschillende socialemedia- en/of advertentiecampagnes. Lees meer over aangepaste registratielinks en hoe je ze maakt in dit artikel.

Aangepaste registratielinks toepassen op embedformulieren is iets moeilijker en vereist meer technische kennis. Nadat je een aangepaste registratielink hebt gemaakt, kun je deze stappen volgen om die op je embedformulieren toe te passen:

Nadat je je aangepaste registratielink hebt gemaakt volgens de stappen in dit artikel, ga je tijdens het bewerken van je webinar naar ‘Embed’.
Kies je embedtype en pas het aan.
Copy the code and paste it somewhier you can edit it.
Voeg een komma (,) toe aan het einde van de regel vóór });, bijvoorbeeld na:
shape: "inline"
Maak een nieuwe regel boven }); en voeg dit toe:
cst: "<your custom link name>"
Wat je na cst: moet invullen, is het vetgedrukte deel van je aangepaste registratielink in de schermafbeelding hieronder.
Het einde van je code moet er ongeveer zo uitzien. Elk embedformuliertype heeft een andere laatste regel; dit voorbeeld is voor een inline embed. Als je bijvoorbeeld een knopembed gebruikt, kan de voorlaatste regel customTextColor: "#ffffff" bevatten. Dit hangt volledig af van de aanpassing van je embedformulier.
```
   shape: "inline",
    cst: "website"
  });
</script>
```
Copy and paste the edited code whier you want to place your embed form.

Hieronder staat een voorbeeld van een inline embedcode waarin een aangepaste registratielink is toegepast:

<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

Je kunt je eigen knop gebruiken voor je webinar-embedformulieren als de bestaande opties voor knopaanpassing niet aan je behoeften voldoen. Gebruik daarvoor het embedtype ‘Aangepaste link’ als basis en bewerk de code handmatig. Volg deze stappen:

Zoek je webinar in je webinaroverzicht en klik op de titel
Klik op de knop ‘Webinar bewerken’
Ga naar ‘Registratie’
Ga naar ‘Embed’
Selecteer ‘Aangepaste link’ als embedtype
Copy the code and paste it somewhier you can edit it

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

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

door je eigen knop. Zorg ervoor dat het attribuut ‘onclick’ behouden blijft. De code moet er dan ongeveer zo uitzien:

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

Wanneer je klaar bent, kopieer en plak je de gewijzigde code in de HTML-code van je website
Vergeet de wijzigingen aan je website niet op te slaan!

Embeds aanpassen met CSS

Als de embeds van WebinarGeek niet helemaal aansluiten bij de stijl van je website, kun je CSS op je website gebruiken om ze verder aan te passen dan met de webinarwizard mogelijk is.

Je kunt bijvoorbeeld de volgende CSS gebruiken om de afronding van de knoppen te wijzigen:

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

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

Of deze CSS om de kleuren van de knoppen in het formulier 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);
}

You make these additions to the CSS of your own website, because that’s whier the embeds are placed.

Let op! Deze wijzigingen gelden voor elke WebinarGeek-embed op je website.

Embedformulier