> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # SDK Engage app mobile - Quels sont les composants de l'éditeur d'apparence (iOS & Android) ? Retrouvez dans cet article l'ensemble des options de personnalisation disponibles dans l'éditeur de design, afin de créer vos éléments Engage pour vos applications mobiles. Pour ceux qui sont déjà familiers avec la version web, l'éditeur de design ne devrait pas avoir de secrets pour vous 🙂 Vous pourrez néanmoins découvrir ici quelques spécificités propres au mobile. # Pour bien commencer ... L'apparence d'un élément Engage se construit grâce aux différents composants à votre disposition. Dans Engage, cliquez sur "Créer un élément". Dans le premier bloc qui s'affiche, vous pouvez ajouter un composant, en cliquant sur le ⨁. ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/enregistrement-de-lecran-2026-_17r9rz4.gif =660x300) Vous pourrez ensuite naviguer entre les onglets "Composants basiques" et "Champs de formulaire". Pour accéder aux options d'un élément, cliquez sur l'icône [✏️] de l'élément souhaité. Vous pourrez ensuite modifier les options dans les 3 onglets disponibles: * **Paramètres** : options propres au composant * **Style** : gestion de différentes options de style (couleur de fond, espacements, bordures, ombres, arrondis...) * **Accessibilité** : disponible pour les composants qui nécessitent un paramétrage spécifique, afin de respecter les normes RGAA. Le détail dans cet article : [Comment configurer l'accessibilité des éléments sur Engage ?](https://help.poool.fr/fr/article/comment-configurer-laccessibilite-des-elements-sur-engage-us8x9e/) * **Avancé** : ajouter une condition pour afficher/masquer un composant. # Les composants basiques Un composant est un **élément figé** de votre apparence. Grâce aux différents composants mis à votre disposition, vous pourrez ainsi construire votre apparence bloc par bloc. ​ ## Rangée Ce composant est un bloc qui prend toute la largeur de l'élément. A l'intérieur, on peut faire plusieurs choses: * ajouter un composant * découper en plusieurs colonnes, qui accueilleront des composants, grâce aux petits [+] situés sur les côtés [![](https://storage.crisp.chat/users/helpdesk/website/-/1/6/d/3/16d34320c5be4400/a6f9af39-67ac-4548-89a4-09d935_3nu17w.png)](https://downloads.intercomcdn.com/i/o/1128890636/287b37573be2cb532c156251/image.png?expires=1773414000&signature=c7847b4be7733a63516399a1f4dadf25349a750244a45f7f14295a5eab6dd868&req=dSElHsF3nYdcX%2FMW1HO4zaHw7N9QOCK0Xsrb0Cc9rHlQJRtFhkgTJQeD4SKC%0AUDd3%0A) Vous pouvez ainsi disposer dans une même rangée plusieurs composants côte à côte ou les uns en-dessous des autres. ###### ⚙️ Options de rangée *Direction des colonnes* Définit la façon dont les composants sont placés : elle définit l'axe principal (en ligne ou en colonne) et la direction (normale ou inversée). 👉 Valeurs possibles : En ligne (de gauche à droite) / En ligne inversée (de droite à gauche) / En colonne (de haut en bas) / En colonne inversée (de bas en haut) *Alignement horizontal* Indique la façon dont l'espace doit être réparti entre et autour des composants selon l'axe principal de la rangée. 👉 **Valeurs possibles** : * Gauche / Droite / Centre : les éléments seront groupés à gauche, à droite ou au centre * Espace entre les colonnes : les éléments seront répartis équitablement, le bord du premier est aligné sur le début de la rangée et la fin du dernier est alignée sur la fin de la rangée * Espace autour des colonnes : les éléments seront répartis équitablement, à chaque extrémité, entre le bord de la rangée et le premier/dernier élément on a la moitié de l'espace appliqué entre chaque élément *Alignement vertical* Définit l'alignement vertical des composants dans la rangée selon l'axe principal. 👉 **Valeurs possibles** : En haut / Centré / En bas / Etiré *Espacement inter-colonnes* Active/désactive les espaces entre le colonne et les bords de la rangée. 👉 **Valeurs possibles** : Activé/Désactivé ###### ⚙️ Options de colonne *Taille* Définit la largeur d'une colonne par rapport à l'intégralité de la rangée "découpée". 👉 Valeurs possibles : * Flexible : s'adapte à l'espace disponible * Adaptée au contenu : s'adapte son contenu * x colonne(s) : largeur fixe de x colonne(s) Retrouvez plus d'informations sur comment utiliser les rangées dans cet article [Comment utiliser les rangées pour structurer son élément Engage ?](https://help.poool.fr/fr/article/comment-utiliser-les-rangees-pour-structurer-son-element-engage-1gu1qzq/) ## Liste Ce composant permet d'ajouter une liste à puces. [![](https://storage.crisp.chat/users/helpdesk/website/-/9/f/1/2/9f129f3643e84000/f584525b-e1ed-4b3a-b1d3-82e53d_1tk6ob4.png)](https://downloads.intercomcdn.com/i/o/1128893132/aac8ff5018690d3a6dc21a08/image.png?expires=1773414000&signature=e59e8888210763c4c5c1d76dae3ec32b2e5c6094f60776f5d27a954c51f0cb78&req=dSElHsF3noBcW%2FMW1HO4zaMtbPRGTL6Zsw1wFaGnIuhXNvi6YzClv7XiI5MF%0ArlrBGEWF3yeqobG0axk%3D%0A) ⚙️ **Options** *Icône de l'image* Permet de charger l'icône pour le composant liste. *Options de liste* Permet de renseigner les éléments de la liste. Pour ajouter un élément supplémentaire, cliquez sur [Editer]. 👉 Valeur possible : un texte de votre choix ## Titre Ce composant permet d'ajouter un titre et de choisir son type (Titre 1, 2 etc.) Il permet également de le styliser (mettre en gras, couleurs, taille etc.) | Spécificité SDK App : vous avez aussi la possibilité de charger votre propre police sur ce composant, dans les options de votre apparence. [![](https://storage.crisp.chat/users/helpdesk/website/-/d/d/a/a/ddaa9d8bcd681800/7ab98ffc-df57-4d58-94ed-ee9194_jm2t7x.png)](https://downloads.intercomcdn.com/i/o/1128893683/756ba9c72431a05d8ab907a8/image.png?expires=1773414000&signature=bed227f2185c05d68e64b430465a5dc72c5eabe9365a07713c7077f55fd4ff96&req=dSElHsF3nodXWvMW1HO4zTvGTePpg2wAYNAYXhcQAqu8Y6guKWqCRXO1US8H%0A4itTU9sfDS2%2FBE8gF1M%3D%0A) ⚙️ **Options** *Type* Permet de sélectionner le type de titre du plus grand - Titre 1 (h1) - au plus petit - Titre 6 (h6). 👉 Valeurs possibles : Titre 1 (h1) / Titre 2 (h2) / Titre 3 (h3) / Titre 4 (h4) / Titre 5 (h5) / Titre 6 (h6) *Contenu* Cet espace vous permet d'insérer votre texte et de le styliser grâce à différentes options classiques. 👉 Options possibles : * Gras/Italique/Soulignement * Couleur * Taille * Alignement à gauche/centré/à droite/justifié * Lien ## Texte Ce composant permet d'ajouter un texte. Il permet également de styliser le texte (mettre en gras, couleurs, taille etc.). | Spécificité SDK App, vous avez aussi la possibilité de charger votre propre police sur ce composant, dans les options de votre apparence. [![](https://storage.crisp.chat/users/helpdesk/website/-/2/f/0/c/2f0c3a1138c27600/10575180-bc44-4369-9eb6-e0184a_1vme75x.png)](https://downloads.intercomcdn.com/i/o/1128894196/e96f018a2f7b479bba22ae61/image.png?expires=1773414000&signature=f200fa09419f7d80986ce93ae045d8bc159e390f256fdf53b11663ccf0a07b53&req=dSElHsF3mYBWX%2FMW1HO4zQVjpSN%2FAwsxhqskPBnr6GImKWziEBbKwlmWLntQ%0Apx5FKtIwdxHcy5slUK4%3D%0A) ⚙️ **Options** *Contenu* Cet espace vous permet d'insérer votre texte et de le styliser grâce à différentes options classiques. 👉 Options possibles : * Gras/Italique/Soulignement * Couleur * Taille * Alignement à gauche/centré/à droite/justifié * Lien ## Bouton Ce composant permet d'ajouter un bouton et de styliser le texte qu'il contient. [![](https://storage.crisp.chat/users/helpdesk/website/-/5/9/2/3/5923f88598e69c00/706ecc93-6066-4a7a-b440-3c8a1a_1y48x6o.png)](https://downloads.intercomcdn.com/i/o/1128894743/f207460b8a5337c103012a34/image.png?expires=1773414000&signature=e3314ef18b537a3543df500d0b4dab6638e99e44fdd0f7c6faea19219aeb5898&req=dSElHsF3mYZbWvMW1HO4zWAtbppw067rfXhgRRBLGlrTx4ZgX2OEUSYyRU2Q%0AjTU5uOTXr9nxtnb701Y%3D%0A) Le bouton permet de déclencher une action: * soit ouvrir un lien * soit déclencher un événement Javascript * soit soumettre le formulaire (dans le cas où un champ de formulaire est chargé dans votre apparence) * soit détruire entièrement l'élément ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-06-12-a-09_1krpw0x.png) | Spécificité SDK App, vous avez aussi la possibilité de charger votre propre police sur ce composant, dans les options de votre apparence. ⚙️ **Options** *Contenu* Cet espace vous permet d'insérer le texte qui s'affichera sur votre bouton et de le styliser grâce à différentes options classiques. 👉 Options possibles : * Gras/Italique/Soulignement * Couleur * Taille * Alignement à gauche/centré/à droite/justifié * Lien *Action* Permet de sélectionner l'action réalisée par un clic sur le bouton. 👉 Valeurs possibles : Ouvrir un lien / Déclencher un événement / Soumettre un formulaire / Détruire l'élément __Ouvrir un lien__ Permet de renseigner l'URL vers laquelle les lecteurs seront redirigés après avoir cliqué sur le bouton. ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-06-12-a-09_1ifxkih.png) 👉 Valeur possible : une URL de votre choix __Déclencher un événement__ ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-06-12-a-09_1ivlqlp.png) Permet de déclencher l'événement `click` suite au clic sur le bouton. Documentation technique iOS : https://www.poool.dev/fr/docs/engage/ios/events#evenement-destroy Documentation technique Android : https://www.poool.dev/fr/docs/engage/android/events#click __Soumettre un formulaire__ Cette option est possible dans la mesure où vous intégrez dans votre apparence un champ de formulaire. Permet de déclencher l'événement `formSubmit` * **Documentation technique iOS** : https://www.poool.dev/fr/docs/engage/ios/events#evenement-form-submit * **Documentation technique Android** : https://www.poool.dev/fr/docs/engage/android/events#formsubmit ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-06-12-a-09_1ih98wu.png) __Détruire entièrement l'élément__ Le clic sur le bouton déclenchera la destruction entière de l'élément Engage. Déclenche l'événement `destroy` * **Documentation technique iOS**: https://www.poool.dev/fr/docs/engage/ios/events#evenement-destroy * **Documentation technique Android** : https://www.poool.dev/fr/docs/engage/android/events#destroy ![](https://storage.crisp.chat/users/helpdesk/website/-/5/f/5/0/5f50f52b22503800/capture-decran-2026-06-12-a-09_1iz2cxa.png) *Type d'élément HTML* Permet de sélectionner le type d'élément HTML de votre bouton. Visuellement, votre bouton restera un bouton mais dans le code HTML de votre page, il pourra être un bouton (balise HTML