Intégration de code personnalisé - Aide Webflow
Ajoutez des blocs de code personnalisés à votre site en utilisant l'élément Code Embed pour débloquer toutes sortes de fonctionnalités personnalisées.
<style>, et le JS dans les balises <script>. Vous ne pouvez pas intégrer de langages côté serveur (par exemple, Perl, PHP, Python, Ruby) dans un élément Code Embed.Comment ajouter un élément Code Embed
Vous pouvez intégrer du code tiers ou votre propre code personnalisé n'importe où dans votre design ou dans un élément de texte enrichi.
Comment ajouter du code personnalisé directement à votre design
- Copiez le code que vous souhaitez intégrer dans votre presse-papiers
- Ouvrez le panneau Ajouter et ajoutez un élément Code Embed au Webflow canvas
- Collez le code personnalisé que vous avez copié à l'étape 1
- Enregistrez et fermez la fenêtre modale
<html>, <body> ou <head> dans votre code personnalisé, sinon votre site/web ou mise en page sera cassé.Comment ajouter du code personnalisé à un élément de texte enrichi
- Copiez le code que vous souhaitez intégrer dans votre presse-papiers
- Placez votre curseur dans l'élément de texte enrichi où vous souhaitez ajouter votre code personnalisé
- Cliquez sur l'icône “plus” pour ouvrir le menu d'insertion et cliquez sur le bouton de code personnalisé
- Collez le code personnalisé que vous avez copié à l'étape 1
Comment utiliser du contenu dynamique dans votre code personnalisé
Vous pouvez incorporer des champs de Collection dans le code intégré pour extraire dynamiquement des informations à diverses fins. En savoir plus : Voir les intégrations dynamiques dans le Centre d'aide Webflow.
Comment éditer l'élément Code Embed
Il existe plusieurs façons d'ouvrir l'éditeur de code et de modifier le code dans un élément Code Embed. Vous pouvez :
- Sélectionner l'élément Code Embed sur le canvas et double-cliquer
- Sélectionner l'élément Code Embed sur le canvas et appuyer sur Entrée
- Sélectionner l'élément Code Embed sur le canvas et cliquer sur l'icône de réglage “cog”
- Sélectionner l'élément Code Embed sur le canvas et cliquer sur Ouvrir l'éditeur de code dans le Panneau des paramètres sous Paramètres de Code Embed
Comment définir les dimensions sur l'élément Code Embed
Si le code personnalisé dans l'élément Code Embed ne définit pas explicitement la taille ou les dimensions, le contenu peut souvent occuper toute la largeur de son élément parent. Vous pouvez ajouter height="100%" width="100%" dans votre code personnalisé, ce qui vous permettra d'ajuster la largeur et la hauteur de l'élément intégré et du contenu depuis le panneau de style.
Comment prévisualiser le contenu intégré
Le code personnalisé enveloppé dans des balises <iframe></iframe> ou <style> affichera un aperçu sur le canevas ou dans votre élément de texte enrichi, mais certains codes intégrés ne peuvent être vus que sur le site en ligne. Chaque fois qu'une balise est utilisée dans l'éditeur de code, vous verrez un espace réservé pour cet élément dans le Designer.
Une fois que vous avez prévisualisé, publié ou exporté votre site, le script et le code personnalisé à l'intérieur s'afficheront là où vous l'avez placé.
Tout code ici sera exclu
En savoir plus : Voir Utiliser .webflow.io comme domaine de test pour les tests et les retours.
FAQ et conseils de dépannage
Puis-je utiliser des langages côté serveur dans un élément Code Embed ?
Vous ne pouvez pas intégrer de langages côté serveur (par exemple, Perl, PHP, Python, Ruby) dans un élément Code Embed. L'élément Code Embed ne prend en charge que le HTML, le CSS dans les balises <style>, et le JS dans les balises <script>.
Puis-je augmenter la limite de 50 000 caractères pour l'élément Code Embed ?
Le code personnalisé dans l'élément Code Embed ne peut pas dépasser 50 000 caractères. Si le code que vous souhaitez intégrer est plus long, vous pouvez le stocker sur un autre serveur et référencer le script dans votre intégration. Vous pouvez également minifier votre code personnalisé à l'aide d'un outil tiers ou diviser le code en plusieurs éléments Code Embed (à condition que cela ne casse pas les fonctions JavaScript).
Aidez-moi ! Mon code personnalisé ne fonctionne pas !
Vérifiez que votre code inclut les balises d'ouverture et/ou de fermeture appropriées et n'inclut pas les balises <html>, <body> ou <head>.
Depuis août 2020, les sites Webflow nouvellement publiés incluent jQuery v3.5.1. Importer d'autres versions de jQuery avec du code personnalisé peut provoquer des conflits et un comportement inattendu sur votre site. Les scripts qui affectent les événements DOM comme onClick, onHover, etc., peuvent également provoquer un comportement inattendu.
Il est important de garder à l'esprit que le code personnalisé est une modification avancée qui peut entrer en conflit avec la fonctionnalité sous-jacente de Webflow. En tant que tel, Webflow ne peut garantir la fonctionnalité ou la pleine compatibilité de tout code personnalisé.
Notre équipe de support ne peut pas fournir d'aide directe pour la configuration ou le dépannage du code personnalisé, car ces sujets ne relèvent pas de notre politique de support client. Si vous rencontrez des problèmes avec le code personnalisé, veuillez nous en informer sur le Forum Webflow, où toute la communauté Webflow (y compris le personnel) peut fournir une aide et des ressources supplémentaires.