Widget HTML

Développez les capacités de l'Éditeur de site à l'aide de code HTML personnalisé. Ce widget permet d'intégrer un code personnalisé à votre site Web et peut servir à intégrer des widgets tiers, comme des vidéos, des formulaires de contact, etc.

Si l'ajout d'un code personnalisé peut accroître la fonctionnalité de votre site Web, nous vous recommandons d'ajouter uniquement un code provenant d'une source fiable. N'ajoutez un code que si vous savez exactement comment il agit et comment le corriger en cas de problème.

Pour ajouter le widget :

  1. Dans le panneau de gauche, cliquez sur Widgets.
  2. Cliquez sur le widget HTML et faites-le glisser vers votre site.

Pour en savoir plus sur l'ajout de widgets sur votre site, consultez l'article Ajout de widgets.

Éditeur de contenu

Pour accéder à l'éditeur de contenu, effectuez un clic droit sur le widget et sélectionnez Modifier le contenu.

Le widget HTML dispose d'un espace vous permettant d'ajouter du code HTML personnalisé. Il vous suffit de coller ou saisir votre code HTML dans la zone de texte prévue à cet effet.

Éditeur de design

Pour accéder à l'éditeur de design, faites un clic droit sur le widget et cliquez sur Modifier le design.

Pour obtenir des informations sur les options de conception qui ne sont pas spécifiques à ce widget (la disposition, le style et l'espacement, par exemple), voir Conception des widgets.

Attention
  • **Nous ne pouvons pas résoudre les problèmes concernant un code personnalisé !**
  • Les scripts côté serveur (PHP et ASP, par exemple) n'auront aucun effet dans ce widget. Nous recommandons d'utiliser uniquement des scripts côté client (Javascript, HTML).
  • Nous vous conseillons d'effectuer une sauvegarde de votre site avant d'y ajouter un code personnalisé de façon à pouvoir recharger une version antérieure en cas de problème.
  • Notre éditeur utilise le protocole HTTPS. Par conséquent, si votre script charge un fichier non HTTPS externe, celui-ci ne fonctionnera pas.
  • Notre système utilisant jQuery 3.0 pour fonctionner, la mise en œuvre d'une nouvelle version de la bibliothèque jQuery causera généralement l'interruption du fonctionnement de notre éditeur. Nous vous recommandons donc d'ajouter un code personnalisé qui utilise les fonctions dans jQuery 3.0 et de ne pas tenter de réinitialiser la bibliothèque.
  • En cas d'activation de la navigation rapide, il est possible que les événements onload ne se conditionnent pas correctement. Si votre script en utilise, la première étape de résolution des problèmes consiste à désactiver la navigation rapide.

Ajouter des données connectées

Vous pouvez insérer des champs provenant d'une collection ou de la bibliothèque de contenu dans le widget HTML et utiliser le widget avec vos pages dynamiques. Cette fonctionnalité est utile lorsque vous souhaitez inclure un widget HTML à vos pages dynamiques sans avoir à stocker tout le code HTML dans la collection. Seuls les identifiants et données uniques sont stockés dans la collection.

Par exemple, si vous souhaitez intégrer un élément à vos pages dynamiques (comme un podcast SoundCloud, un calendrier externe ou du code personnalisé) mais que celui-ci soit différent sur chacune d'entre elles, vous pouvez stocker l'identifiant dans votre collection et intégrer le code au widget HTML. Pour en savoir plus, consultez la section Connected Data (Données connectées).

Pour ajouter des données connectées :

  1. Faites un clic droit sur le widget HTML et sélectionnez Modifier le contenu.

  2. Collez votre code HTML dans le champ puis supprimez le slug de l'URL (c'est-à-dire la fin de celle-ci) du code. Mettez-le de côté pour plus tard.

  3. Cliquez sur Mettre à jour.

  4. Dans la barre supérieure, cliquez sur Modifier la ligne.

  5. Collez le slug de l'URL mentionné à l'étape 2 dans le champ Paragraphe de section.

  6. Effectuez un clic droit sur le widget HTML pour ouvrir le menu contextuel, puis cliquez sur Modifier le contenu.

  7. Cliquez sur Connecter puis sélectionnez le champ de données auquel vous souhaitez connecter le widget.

  8. Cliquez sur Copier dans le presse-papiers puis collez le contenu copié dans la section de code où se trouvait de slug de l'URL avant que vous ne le supprimiez à l'étape 2.

  9. Cliquez sur Mettre à jour.

Une fois votre widget HTML connecté aux données de la bibliothèque de contenus, une icône bleue de données connectées () apparaîtra.