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

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

Si tu veux que les participants s’inscrivent à tes webinaires depuis ton propre site web, le formulaire intégré est ton meilleur allié. Il te permet de placer le formulaire d’inscription sur ton propre site web de quatre façons différentes :

Sous forme de bouton
Cette option est un bouton qui ouvre le formulaire d’inscription. Il peut être placé à un emplacement fixe sur ton site web ou sous forme de superposition qui reste visible lorsque les visiteurs font défiler ta page.

Sous forme d’intégration en ligne
Cette option correspond au formulaire d’inscription lui-même. Tu peux le placer à un emplacement fixe sur 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 fixe sur ton site web.
Sous forme de widget
Cette option est une barre ou une tuile qui affiche les informations du webinaire. Tu la places sur ton site web sous forme de superposition qui reste visible lorsque les visiteurs font défiler ta page.

L’intégration en ligne et les formulaires qui apparaissent lorsque tu utilises les options bouton, lien personnalisé et widget utilisent les couleurs du thème de marque de ton compte. 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 unique se trouve dans le code et ne peut être utilisé qu’une seule fois par page, ce qui signifie que tu ne peux pas placer plusieurs fois le même code d’intégration sur une page. Si tu veux utiliser le même formulaire intégré à plusieurs emplacements sur une page, tu devras générer 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 de tes webinaires et clique sur son titre
Clique sur le bouton « Modifier le webinaire »
Accède à « Inscription »
Accède à « Intégration »
Sélectionne le type de formulaire intégré que tu veux 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.
Une fois terminé, copie le code en cliquant sur l’icône avec deux pages et place-le dans le code HTML de ton site web.
N’oublie pas d’enregistrer les modifications sur ton site web !

Et voilà ! Si tu as tout fait correctement, l’intégration s’affichera maintenant 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. Les éléments personnalisables sont :

Langue
Thème
Couleurs
Page de confirmation

Poursuis ta lecture pour savoir comment modifier chacun de ces éléments.

Modifier la langue de ton formulaire intégré

Par défaut, ton formulaire intégré utilisera 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. Ce paramètre peut être modifié avec le menu déroulant « Langue de l’intégration » après avoir sélectionné un type d’intégration.

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

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

Par défaut, ton formulaire intégré utilisera 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. Ce paramètre peut être modifié avec le menu déroulant « Thème de l’intégration » après avoir sélectionné un type d’intégration.

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

Modifier les couleurs de ton formulaire intégré

Par défaut, ton formulaire intégré utilisera les couleurs du thème de ton compte. Tu peux les remplacer par des couleurs personnalisées pour chaque formulaire intégré. Ce paramètre peut être modifié en cochant la case à côté de « Remplacement du thème personnalisé » et en sélectionnant les couleurs que tu veux utiliser. Pour les widgets, cela détermine aussi la couleur du widget lui-même.

Image des options de couleur du formulaire intégré avec un aperçu du résultat

Astuce ! Tu ne peux pas prévisualiser le formulaire lui-même 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 à quoi il ressemblera.

Utiliser un formulaire d’inscription sur une seule page

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

Les intégrations peuvent être configurées pour que le formulaire d’inscription affiche tous les champs d’inscription sur une seule page, à l’aide de 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 abonnés 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 en cliquant sur « Modifier » sous « Rediriger les spectateurs vers une URL personnalisée après l’inscription », en collant l’URL dans le champ de texte « URL personnalisée », puis en cliquant sur « Enregistrer ».

Image du paramètre de page de confirmation personnalisée pour les formulaires intégrés

Pour les boutons

Intégration en ligne et intégration épinglée

Il existe deux types de boutons intégrés : les boutons intégrés en ligne et les boutons intégrés épinglés. Les deux ouvrent le formulaire d’inscription lorsqu’on clique dessus, mais ils apparaissent différemment sur ton site web.

Le bouton intégré en ligne est placé à un endroit précis de ton site web et y reste quoi qu’il arrive, ce qui signifie qu’il disparaîtra de l’écran d’une personne si elle fait défiler la page vers le bas, par exemple.

Le bouton intégré épinglé, quant à lui, reste visible lorsque les visiteurs de ton site web font défiler la page vers le haut ou vers le bas. Il est toujours là, donc ils ne peuvent pas oublier de s’inscrire ! Lorsque tu utilises le bouton intégré épinglé, tu peux choisir de le placer en bas à gauche ou en bas à droite de ton site web.

Texte et couleurs du bouton

Le texte et les couleurs de ton bouton intégré peuvent être modifiés pour s’adapter à ton site web. Lorsque tu crées ton bouton, utilise les options « Texte du bouton », « Couleur du bouton » et « Couleur du texte du bouton » sous « Personnaliser » pour personnaliser ton bouton comme tu le souhaites.

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 la date/l’heure du webinaire au-dessus du formulaire d’inscription. Tu peux maintenant 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 cet élément dans ton intégration en ligne.

Ces options sont parfaites lorsque tu veux afficher une partie ou la totalité de ces informations sur ton site web à ta façon, sans que WebinarGeek les duplique dans l’intégration.

L’intégration en ligne comporte une couleur d’arrière-plan par défaut. Si elle ne convient pas à ton site web ou si tu préfères utiliser l’arrière-plan de ton site web, configure l’arrière-plan de l’intégration en ligne pour qu’il soit transparent en cochant 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é

Le texte de ton lien personnalisé peut être modifié pour s’adapter à ton webinaire. Lorsque tu crées ton lien personnalisé, utilise l’option « Texte du bouton » sous « Personnaliser » pour personnaliser ton lien personnalisé comme tu le souhaites.

Pour les widgets

Barre épinglée et tuile épinglée

Il existe deux types de widgets : les barres épinglées et les tuiles épinglées. Les deux ouvrent le formulaire d’inscription lorsque l’on clique sur leur bouton, mais ils apparaissent différemment sur ton site web.

La barre épinglée est une barre horizontale qui s’affiche en haut ou en bas de ton site web et reste à cette position.

La tuile épinglée, quant à elle, est une version plus petite du widget qui prend moins de place que la barre épinglée. Elle peut être placée en haut à gauche, en haut à droite, en bas à gauche ou en bas à droite, et reste à cette position.

La barre épinglée et la tuile épinglée sont toutes deux toujours visibles, quelle que soit la distance parcourue par les visiteurs lorsqu’ils 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éterminées par les couleurs du thème de ton compte, qui sont également appliquées au formulaire d’inscription lui-même.

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

Image de la configuration du thème personnalisé pour un widget

Texte du bouton

Le texte du bouton de ton widget peut être modifié pour s’adapter à ton webinaire. Lorsque tu crées ton widget, utilise l’option « Texte du bouton » sous « Personnaliser » pour personnaliser le texte du bouton du widget comme tu le souhaites.

Configuration avancée

Intégrer sous forme d’iframe

Tu peux aussi utiliser le code d’intégration dans une iframe, mais cela nécessite d’utiliser « srcdoc » (voir aussi ici). Le code d’intégration ressemble alors à ceci :

<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 remarquer, le <div id="mw_Tv1FSKM6ScX_webinargeek"></div> a disparu, car il doit être supprimé si tu utilises cette méthode.

Faire en sorte que l’intégration présélectionne une diffusion spécifique

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

Pour cela, ajoute ceci au code :

,
broadcastId: "1234"

Tu peux trouver l’ID de diffusion soit dans les statistiques, avec le dernier nombre dans l’URL, soit 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érents réseaux sociaux et/ou campagnes publicitaires. Tu peux en savoir plus sur les liens d’inscription personnalisés et leur création dans cet article.

Appliquer des liens d’inscription personnalisés aux formulaires intégrés est un peu plus difficile et nécessite davantage de connaissances techniques. Tu peux toutefois suivre les étapes ci-dessous pour les appliquer à tes formulaires intégrés une fois que tu as créé un lien d’inscription personnalisé :

Après avoir créé ton lien d’inscription personnalisé en suivant les étapes de cet article, accède à « Intégration » lorsque tu modifies ton webinaire.
Choisis ton type d’intégration et personnalise-le.
Copie le code et colle-le quelque part où tu peux le modifier.
Ajoute une virgule (,) à la fin de la ligne avant });, 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: correspond à la partie en gras de ton lien d’inscription personnalisé, comme dans la capture d’écran ci-dessous.
La fin de ton code devrait 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 pourrait indiquer customTextColor: "#ffffff" à la place. Tout dépend de la personnalisation de ton formulaire intégré.
```
   shape: "inline",
    cst: "website"
  });
</script>
```
Copie et colle le code modifié à l’endroit où tu veux placer ton formulaire intégré.

Voici un exemple de code d’intégration en ligne avec un lien d’inscription personnalisé appliqué dans le code :

<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 as la possibilité d’utiliser ton propre bouton pour les formulaires intégrés de ton webinaire si les options de personnalisation de bouton existantes ne répondent pas à tes besoins. Pour cela, tu devras utiliser le type d’intégration « Lien personnalisé » comme base et modifier le code manuellement. Suis les étapes ci-dessous :

Trouve ton webinaire dans l’aperçu de tes webinaires et clique sur son titre
Clique sur le bouton « Modifier le webinaire »
Accède à « Inscription »
Accède à « Intégration »
Sélectionne « Lien personnalisé » comme type d’intégration
Copie le code et colle-le quelque part où tu peux le modifier

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

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

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

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

Une fois terminé, copie et colle le code modifié dans le code HTML de ton site web
N’oublie pas d’enregistrer les modifications sur ton site web !

Personnaliser les intégrations avec CSS

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

Par exemple, tu pourrais 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 dans le 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);
}

Tu ajoutes ces éléments au CSS de ton propre site web, car c’est là que les intégrations sont placées.

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

Embed form