Cet article concerne la page d’inscription introduite en juin 2025. Consulte cet article cet article si tu utilises encore la version précédente.

Tu utilises encore la version précédente, mais tu souhaites passer à la nouvelle ? Consulte cet article.

Si tu souhaites que les personnes s’inscrivent à tes webinaires via ton propre site web, le formulaire intégré est idéal. Il te permet d’ajouter le formulaire d’inscription à ton site web de quatre façons :

Sous forme de bouton
Cette option est un bouton qui ouvre le formulaire d’inscription. Tu peux le placer à un emplacement précis de ton site web ou en superposition afin qu’il reste visible lorsque les visiteurs font défiler la page.

Sous forme d’intégration en ligne
Cette option correspond au formulaire d’inscription lui-même. Tu peux le placer à un emplacement précis de ton site web.

Sous forme de lien personnalisé
Cette option est un simple lien hypertexte qui ouvre le formulaire d’inscription. Tu peux le placer à un emplacement précis de ton site web.
Sous forme de widget
Cette option est une barre ou une vignette qui affiche des informations sur le webinaire. Tu la places sur ton site web en superposition afin qu’elle reste visible lorsque les visiteurs font défiler la page.

L’intégration en ligne et les formulaires qui s’affichent lorsque tu utilises les options bouton, lien personnalisé et widget reprennent les couleurs du thème de ta marque. Suis les étapes de cet article pour les modifier.

Attention ! Lorsque tu génères un code d’intégration, nous lui attribuons un identifiant unique. Cet identifiant se trouve dans le code et ne peut être utilisé qu’une seule fois par page ; tu ne peux donc pas placer plusieurs fois le même code d’intégration sur une page. Si tu souhaites utiliser le même formulaire intégré à plusieurs emplacements d’une page, génère un nouveau code d’intégration afin que l’identifiant soit différent. Pour cela, actualise la page et copie le nouveau code.

Créer un formulaire intégré

Suis les étapes ci-dessous pour créer un formulaire intégré :

Trouve ton webinaire dans l’aperçu des webinaires et clique sur son titre
Clique sur le bouton « Modifier le webinaire »
Accède à « Inscription »
Accède à « Intégrer »
Sélectionne le type de formulaire intégré que tu souhaites utiliser : bouton, intégration en ligne, lien personnalisé ou widget.
Personnalise le formulaire intégré choisi. Tu trouveras la description de toutes les options ici.
Lorsque tu as terminé, copie le code en cliquant sur l’icône représentant deux pages et place-le dans le code HTML de ton site web.
N’oublie pas d’enregistrer les modifications apportées à ton site web !

C’est tout ! Si tout est correctement configuré, l’intégration s’affiche désormais sur ton site web.

Options de personnalisation

Formulaire d’inscription (tous les types)

Tu peux personnaliser le formulaire d’inscription qui s’ouvre lorsqu’une personne clique sur ton intégration. Tu peux personnaliser les éléments suivants :

Langue
Thème
Couleurs
Page de confirmation

Découvre ci-dessous comment modifier chacun de ces éléments.

Modifier la langue de ton formulaire intégré

Par défaut, ton formulaire intégré utilise la langue de ton webinaire. Tu peux aussi le configurer pour qu’il utilise la langue du navigateur du visiteur ou une langue fixe dans une liste. Après avoir sélectionné un type d’intégration, modifie ce paramètre dans le menu déroulant « Langue d’intégration ».

Image du menu déroulant de langue d’intégration

Modifier le thème de ton formulaire intégré

Par défaut, ton formulaire intégré utilise le thème standard de ton compte (clair ou sombre). Tu peux aussi le configurer pour qu’il utilise le thème système du visiteur ou un thème fixe. Après avoir sélectionné un type d’intégration, modifie ce paramètre dans le menu déroulant « Thème d’intégration ».

Image du menu déroulant de thème d’intégration

Modifier les couleurs de ton formulaire intégré

Par défaut, ton formulaire intégré utilise les couleurs du thème de ton compte. Tu peux les remplacer par des couleurs personnalisées pour chaque formulaire intégré. Coche la case à côté de « Remplacer le thème personnalisé » et sélectionne les couleurs souhaitées. Pour les widgets, cela détermine aussi la couleur du widget. Si tu souhaites utiliser tes couleurs de marque exactes plutôt qu’une version ajustée selon la théorie des couleurs, active « Utiliser les couleurs de marque exactes » dans le sélecteur de couleurs. Les couleurs HEX saisies seront ainsi appliquées telles quelles à l’intégration.

Pour utiliser les couleurs de marque exactes, le « Thème d’intégration » doit être défini sur « Clair » ou « Sombre », et non sur « Correspondre au thème système du visiteur », car le thème pourrait alors changer automatiquement et affecter l’affichage de tes couleurs de marque.

Conseil : Tu ne peux pas prévisualiser le formulaire lorsque tu crées une intégration sous forme de bouton ou de lien personnalisé, mais tu peux passer à « Intégration en ligne », puis revenir en arrière pour voir son apparence.

Utiliser un formulaire d’inscription sur une seule page

Par défaut, tous les types d’intégration utilisent un formulaire d’inscription sur plusieurs pages lorsque le spectateur doit saisir plus que son prénom et son adresse e-mail, y compris lorsqu’il choisit parmi plusieurs dates de diffusion.

Tu peux configurer les intégrations afin que tous les champs d’inscription soient sur une seule page en cochant la case à côté de « Formulaire sur une seule page ».

Utiliser une page de confirmation personnalisée pour ton formulaire intégré

Par défaut, les inscrits voient une confirmation dans le formulaire intégré une fois leur inscription terminée. Tu peux définir une URL personnalisée vers laquelle rediriger les personnes après leur inscription : clique sur « Modifier » sous « Rediriger les spectateurs vers une URL personnalisée après l’inscription », colle l’URL dans le champ « URL personnalisée », puis clique sur « Enregistrer ».

Image du paramètre de page de confirmation personnalisée

Pour les boutons

Intégration en ligne et intégration fixe

Tici 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 tici 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 tici, 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.

Texte et couleurs du bouton

Tu peux modifier le texte et les couleurs de ton bouton intégré pour les adapter à ton site web. Lors de la création du bouton, utilise les options « Texte du bouton », « Couleur du bouton » et « Couleur du texte du bouton » sous « Personnaliser ».

Image des paramètres de texte et de couleur du bouton

Pour les intégrations en ligne

Afficher le logo, le titre et la date

Par défaut, les formulaires intégrés en ligne affichent le logo de ton entreprise, le titre du webinaire et sa date/heure au-dessus du formulaire d’inscription. Tu peux désormais contrôler chacun de ces éléments indépendamment à l’aide des cases « Afficher le logo », « Afficher le titre » et « Afficher la date ». Décoche l’une de ces cases pour masquer l’élément correspondant.

Ces options sont idéales si tu souhaites afficher tout ou partie de ces informations à ta façon sur ton site web, sans que WebinarGeek les duplique dans l’intégration.

Par défaut, l’intégration en ligne a une couleur d’arrière-plan. Si elle ne convient pas à ton site web ou si tu préfères utiliser l’arrière-plan de celui-ci, coche la case à côté de « Arrière-plan transparent ».

Image de l’option « Arrière-plan transparent »

Pour les liens personnalisés

Texte du lien personnalisé

Tu peux modifier le texte de ton lien personnalisé pour l’adapter à ton webinaire. Lors de la création du lien, utilise l’option « Texte du bouton » sous « Personnaliser ».

Image du paramètre de personnalisation du texte du lien

Pour les widgets

Barre fixe et vignette fixe

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

La barre fixe est une barre horizontale qui s’affiche en haut ou en bas de ton site web et reste à cet emplacement.

La vignette fixe, quant à elle, est une version plus petite du widget qui occupe moins d’espace que la barre fixe. Tu peux la placer en haut à gauche, en haut à droite, en bas à gauche ou en bas à droite ; elle reste à cet emplacement.

La barre fixe et la vignette fixe restent toujours visibles, quelle que soit la façon dont les personnes font défiler ton site web. Elles restent fixées à la partie de l’écran que tu choisis.

Couleurs du widget

Contrairement aux autres options d’intégration, les couleurs du widget sont définies par les couleurs du thème de ton compte, qui s’appliquent également au formulaire d’inscription.

Par défaut, ton widget utilise les couleurs du thème de ton compte. Tu peux les remplacer par des couleurs personnalisées pour chaque widget.

Image de la configuration de thème personnalisé d’un widget

Texte du bouton

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

Configuration avancée

Intégrer sous forme d’iframe

Tu peux également utiliser le code d’intégration dans une iframe, mais cela nécessite d’utiliser « srcdoc » (voir aussi ici). ). Le code d’intégration se présente alors ainsi :

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

Comme tu peux le constater, <div id="mw_Tv1FSKM6ScX_webinargeek"></div> a été supprimé, car il doit l’être si tu utilises cette méthode.

Présélectionner une diffusion spécifique dans l’intégration

Tu peux faire en sorte que l’intégration présélectionne une diffusion spécifique afin de garantir que les personnes s’inscrivent à cette diffusion.

Pour cela, ajoute ceci au code :

,
broadcastId: "1234"

Tu trouveras l’ID de la diffusion dans les Statistiques, sous la forme du dernier numéro de l’URL, ou en cliquant sur les options à côté de la diffusion, puis sur la référence API.

Voici un exemple complet :

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

Liens d’inscription personnalisés pour les formulaires intégrés

Les liens d’inscription personnalisés sont des liens que tu peux créer pour mesurer les inscriptions provenant de sources spécifiques. Ils te permettent d’utiliser différents liens d’inscription pour différentes campagnes sur les réseaux sociaux et/ou publicitaires. Pour en savoir plus sur ces liens et sur leur création, consulte cet article.

L’application de liens d’inscription personnalisés aux formulaires intégrés est un peu plus complexe et nécessite davantage de connaissances techniques. Cependant, une fois le lien créé, tu peux suivre les étapes ci-dessous pour l’appliquer à tes formulaires intégrés :

Après avoir créé ton lien d’inscription personnalisé en suivant les étapes de cet article, , accède à « Intégrer » lorsque tu modifies ton webinaire.
Choisis ton type d’intégration et personnalise-le.
Copy the code and paste it somewici you can edit it.
Ajoute une virgule (,) à la fin de la ligne précédant }); , par exemple après :
shape: "inline"
Crée une nouvelle ligne au-dessus de }); et ajoute :
cst: "<your custom link name>"
Ce que tu dois saisir après cst: est la partie en gras de ton lien d’inscription personnalisé, comme dans la capture d’écran ci-dessous.
La fin de ton code doit ressembler à ceci. Note que chaque type de formulaire intégré a une dernière ligne différente et que cet exemple concerne une intégration en ligne. Si tu utilises, par exemple, une intégration sous forme de bouton, l’avant-dernière ligne peut être customTextColor: "#ffffff" à la place. Tout dépend de la personnalisation de ton formulaire intégré.
```
   shape: "inline",
    cst: "website"
  });
</script>
```
Copy and paste the edited code wici you want to place your embed form.

Voici un exemple de code d’intégration en ligne auquel un lien d’inscription personnalisé a été ajouté :

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

Utiliser ton propre bouton pour les formulaires intégrés

Tu peux utiliser ton propre bouton pour tes formulaires intégrés de webinaire si les options de personnalisation existantes ne répondent pas à tes besoins. Pour ce faire, utilise le type d’intégration « Lien personnalisé » comme base et modifie le code manuellement. Suis les étapes ci-dessous :

Trouve ton webinaire dans l’aperçu des webinaires et clique sur son titre
Clique sur le bouton « Modifier le webinaire »
Accède à « Inscription »
Accède à « Intégrer »
Sélectionne « Lien personnalisé » comme type d’intégration
Copy the code and paste it somewici you can edit it

Remplace maintenant la première ligne du code, qui doit ressembler à ceci :

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

par ton propre bouton, en veillant à conserver l’attribut « onclick ». Le code doit alors ressembler à ceci :

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

Lorsque tu as terminé, copie et colle le code modifié dans le code HTML de ton site web
N’oublie pas d’enregistrer les modifications apportées à ton site web !

Personnaliser les intégrations avec CSS

Si les intégrations de WebinarGeek ne correspondent pas tout à fait au style de ton site web, tu peux utiliser du CSS sur ton site afin de les modifier davantage que ne le permet l’assistant de création de webinaires.

Par exemple, tu peux utiliser le CSS suivant pour modifier l’arrondi des boutons :

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

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

Ou celui-ci pour modifier les couleurs des boutons du formulaire :

/* 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 wici the embeds are placed.

Attention ! Ces modifications s’appliquent à toutes les intégrations WebinarGeek de ton site web.

Formulaire intégré