Cet article concerne la page d’inscription introduite en juin 2025. Consulte 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 veux que les personnes 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 site web de quatre façons différentes :

Sous forme de bouton
Cette option consiste en un bouton qui ouvre le formulaire d’inscription. Tu peux le placer à un emplacement défini 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 défini 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 défini sur ton site web.
Sous forme de widget
Cette option est une barre ou une tuile qui affiche des informations sur le 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 s’affichent lorsque tu utilises les options de bouton, de lien personnalisé et de widget utilisent les couleurs du thème de l’identité visuelle 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 fois par page. Tu ne peux donc pas placer le même code d’intégration plusieurs fois sur une même page. Si tu veux utiliser le même formulaire intégré à plusieurs endroits d’une page, tu dois 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 ta liste de 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 feuilles 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 tu as tout fait correctement, le formulaire intégré s’affichera 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. Les éléments personnalisables sont les 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 choisie dans une liste. Tu peux modifier ce paramètre à l’aide du menu déroulant « Langue de l’intégration », après avoir sélectionné un type d’intégration.

Une image du menu déroulant de la langue de l’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. Tu peux modifier ce paramètre à l’aide du menu déroulant « Thème de l’intégration », après avoir sélectionné un type d’intégration.

Une image du menu déroulant du thème de l’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é. Tu peux modifier ce paramètre en cochant la case à côté de « Remplacer le thème par défaut » et en sélectionnant les couleurs que tu souhaites utiliser. Pour les widgets, cela détermine également la couleur du widget lui-même. Si tu souhaites utiliser les couleurs exactes de ta marque plutôt qu’une version ajustée selon la théorie des couleurs, active « Utiliser les couleurs exactes de la marque » dans le sélecteur de couleurs. Ainsi, les couleurs HEX saisies sont appliquées exactement telles quelles à l’environnement intégré.

Pour utiliser les couleurs exactes de la marque, « Thème de l’intégration » doit être défini sur « Clair » ou « Sombre », et non sur « Correspondre au thème système du visiteur », car cette dernière option permet au thème de changer automatiquement et peut affecter l’affichage des couleurs de ta marque.

Conseil ! Tu ne peux pas prévisualiser le formulaire lui-même lorsque tu crées une intégration de type bouton ou lien personnalisé, mais tu peux passer à « Intégration en ligne », puis revenir à l’option précédente pour voir son apparence.

Utiliser un formulaire d’inscription sur une seule page

Par défaut, tous les types d’intégration proposent un formulaire d’inscription sur plusieurs pages lorsque le spectateur doit saisir autre chose que son prénom et son adresse e-mail, notamment s’il choisit entre plusieurs dates de diffusion.

Tu peux configurer les intégrations pour que le formulaire d’inscription regroupe tous les champs d’inscription 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 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 « URL personnalisée », puis en cliquant sur « Enregistrer ».

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

Pour les boutons

Bouton intégré en ligne et bouton intégré fixe

Il existe deux types de boutons intégrés : les boutons intégrés en ligne et les boutons intégrés fixes. Tous deux ouvrent le formulaire d’inscription lorsqu’on clique dessus, mais ils s’affichent 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. Il disparaît donc de l’écran d’une personne si celle-ci, par exemple, fait défiler la page vers le bas.

Le bouton intégré fixe, en revanche, 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à, afin qu’ils n’oublient pas de s’inscrire ! Lorsque tu utilises le bouton intégré fixe, tu peux choisir de le placer en bas à gauche ou en bas à droite de ton site web.

Une image de la sélection du type de bouton

Texte et couleurs du bouton

Tu peux modifier le texte et les couleurs de ton bouton intégré pour les 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 » dans « Personnaliser » pour personnaliser ton bouton selon tes préférences.

Une image des paramètres du texte et de la 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 et l’heure du webinaire au-dessus du formulaire d’inscription. Tu peux désormais contrôler chacun de ces éléments séparément à l’aide des cases à cocher « Afficher le logo », « Afficher le titre » et « Afficher la date ». Décoche l’une de ces options pour masquer l’élément correspondant dans ton intégration en ligne.

Ces options sont idéales si tu veux afficher certaines ou toutes ces informations sur ton site web à ta manière, sans que WebinarGeek ne les duplique dans l’intégration.

L’intégration en ligne est dotée d’une couleur d’arrière-plan par défaut. Si celle-ci 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 comme transparent en cochant la case à côté de « Arrière-plan transparent ».

Une 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. Lorsque tu crées ton lien personnalisé, utilise l’option « Texte du bouton » dans « Personnaliser » pour personnaliser ton lien selon tes préférences.

Pour les widgets

Barre fixe et tuile fixe

Il existe deux types de widgets : les barres fixes et les tuiles fixes. Tous deux ouvrent le formulaire d’inscription lorsqu’on clique sur leur bouton, mais ils s’affichent différemment sur ton site web.

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

La tuile fixe, quant à elle, est une version plus petite du widget qui prend moins de place que la barre fixe. Tu peux la placer en haut à gauche, en haut à droite, en bas à gauche ou en bas à droite, et elle reste à cette position.

La barre fixe et la tuile fixe sont toujours visibles, quelle que soit la longueur de défilement de ton site web. Elles restent fixées à la zone 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 utilise les couleurs du thème de ton compte. Tu peux les remplacer par des couleurs personnalisées pour chaque widget.

Une image de la configuration d’un thème personnalisé pour un widget

Texte du bouton

Tu peux modifier le texte du bouton de ton widget pour l’adapter à ton webinaire. Lorsque tu crées ton widget, utilise l’option « Texte du bouton » dans « Personnaliser » pour personnaliser le texte du bouton du widget selon tes préférences.

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 l’utilisation de « 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 constater, <div id="mw_Tv1FSKM6ScX_webinargeek"></div> a disparu, car il doit être supprimé si tu utilises cette méthode.

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

Tu peux pré-sélectionner une diffusion spécifique dans l’intégration afin de t’assurer que les personnes s’inscrivent à une diffusion en particulier.

Pour ce faire, ajoute ceci au code :

,
broadcastId: "1234"

Tu peux trouver l’identifiant de diffusion dans les statistiques, puis dans le dernier numéro de l’URL. Tu peux aussi cliquer sur les options à côté de la diffusion, puis sur la référence de l’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. Tu peux en savoir plus sur les liens d’inscription personnalisés et sur leur création dans cet article.

Appliquer des liens d’inscription personnalisés à des formulaires intégrés est un peu plus difficile et requiert davantage de connaissances techniques. Toutefois, une fois que tu as créé un lien d’inscription personnalisé, 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.
Copie le code et colle-le dans un endroit 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>"
Après cst:, saisis la partie en gras de ton lien d’inscription personnalisé, comme indiqué 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 de type bouton, l’avant-dernière ligne pourrait plutôt indiquer customTextColor: "#ffffff". 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 auquel un lien d’inscription personnalisé a été appliqué :

<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 les formulaires intégrés de tes webinaires si les options de personnalisation existantes ne répondent pas à tes besoins. Pour cela, utilise le type d’intégration « Lien personnalisé » comme base et modifie manuellement le code. Suis les étapes ci-dessous :

Trouve ton webinaire dans ta liste de 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
Copie le code et colle-le dans un endroit où tu peux le modifier

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

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

par ton propre bouton, tout en veillant à conserver l’attribut « onclick ». Le code doit 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>

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 web pour 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);
}

Ajoute 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 de ton site web.

Formulaire intégré