Référence des blocs de l'éditeur in-app

Référence pour chaque bloc que vous pouvez ajouter sur le canevas de l’éditeur intégré.

Chaque type de bloc a un objectif différent dans le message :

• Titre : titres et en-têtes courts
• Texte : corps du texte et descriptions plus longues
• Bouton : un appel à l’action cliquable
• Image : images de la Médiathèque, téléchargement ou URL
• Vidéo : une miniature de vidéo cliquable qui ouvre une vidéo YouTube ou Vimeo
• Carte : une image avec un titre, du texte et un bouton dans une seule mise en page
• Séparateur : une ligne qui sépare les sections
• Colonnes : mises en page côte à côte (2, 3 ou 4 colonnes égales, ou des divisions 33/67 et 67/33)
• Minuteur : un compte à rebours pour les offres et les dates limites
• Menu : une rangée ou une colonne de liens de navigation ou de contact
• Social : des icônes qui renvoient vers vos profils sociaux
• HTML : HTML personnalisé, tel qu’un formulaire, un sondage ou une vidéo intégrée
• Produits : une grille de cartes de produits de votre Catalogue de produits ou du panier abandonné d’un utilisateur

Comment configurer les blocs de l’éditeur

Faites glisser un bloc sur le canevas depuis l’onglet Blocs, ou cliquez dessus pour l’ajouter à la fin. Sélectionnez le bloc pour ouvrir ses paramètres dans le panneau de droite et configurer le contenu, les liens, la taille et l’espacement.

Conseil

Chaque bloc dispose également de paramètres de Visibilité et de Condition d’affichage. Utilisez-les pour masquer un bloc sur téléphone ou ordinateur, ou pour ne l’afficher qu’à des utilisateurs spécifiques. En savoir plus

Titre et texte

Les blocs Titre et Texte contiennent le texte que les utilisateurs lisent dans le message in-app. Modifiez le texte sur le canevas et mettez-le en forme avec la barre d’outils.

Cliquez sur un bloc Titre ou Texte pour modifier son contenu sur le canevas. Sélectionnez du texte pour faire apparaître la barre d’outils de formatage : gras, italique, souligné, alignement, un bouton de lien et un menu déroulant de style de texte.

Les Tags de fusion sont des espaces réservés qui insèrent une valeur de Tag du profil de l’utilisateur dans le message, afin que chaque abonné voie un texte personnalisé. Pour en ajouter un, sélectionnez le texte, cliquez sur Tags de fusion dans la barre d’outils, et choisissez un Tag de votre compte. En savoir plus sur les messages in-app personnalisés

Image

Un bloc Image affiche une image dans le modèle in-app.

Sélectionnez-le sur le canevas pour ouvrir les paramètres de l’Image dans le panneau de droite.

• Ajouter une image / Remplacer l’image : cliquez sur Ajouter une image lorsque le bloc est vide, ou sur Remplacer l’image lorsqu’une image est déjà définie. Vous pouvez télécharger un fichier ou en choisir un dans votre Médiathèque.
• URL de l’image : collez un lien hébergé vers l’image.
• Texte alternatif : décrivez l’image pour l’accessibilité.
• Prompt : l’instruction de génération par IA pour une image que vous avez créée avec Générer avec l’IA.
• Largeur (px) / Hauteur (px) : fixez l’image à une taille en pixels. Laissez un champ vide pour qu’elle se dimensionne automatiquement.
• Rayon du coin (px) : arrondissez les coins de l’image.
• Alignement : gauche, centre ou droite.

Dans Lien, définissez un Type d’action (par exemple Ouvrir un site web ou URL ou Deeplink) et son URL pour ouvrir quelque chose lorsque l’image est touchée, et une Cible du lien pour l’ouvrir dans le même onglet ou un nouveau.

Dans Espacement, activez la Marge intérieure pour ajouter de l’espace autour de l’image. Utilisez Tous les côtés pour la même marge de chaque côté, ou activez Plus d’options pour définir chaque côté séparément.

Vidéo

Un bloc Vidéo ajoute une vidéo YouTube ou Vimeo au message sous forme de miniature cliquable. Le message affiche une image fixe avec une superposition ▶. En la touchant, la vidéo s’ouvre dans l’application YouTube ou Vimeo ou dans le navigateur.

Sélectionnez le bloc sur le canevas pour ouvrir ses paramètres :

• URL de la vidéo : collez un lien YouTube ou Vimeo. L’éditeur récupère automatiquement une miniature.
• Texte alternatif : décrivez la vidéo pour l’accessibilité.
• URL de la miniature : conservez la miniature récupérée automatiquement, ou cliquez sur Ajouter une miniature / Remplacer la miniature pour en choisir une dans la Médiathèque, ou collez directement un lien hébergé.
• Superposition du bouton de lecture : activée par défaut. Désactivez pour afficher la miniature simple sans la superposition ▶.
• Largeur (px), Rayon du coin (px) et Alignement : contrôlez l’apparence de la miniature et sa position dans la mise en page.

Carte

Un bloc Carte associe une image à un titre, un texte et un bouton dans une seule mise en page prête à l’emploi, vous évitant ainsi de devoir placer et aligner quatre blocs distincts à la main.

• Mise en page : choisissez de quel côté l’image se trouve par rapport au contenu, ou activez Habiller le texte autour de l’image.
• Image : ajoutez ou remplacez l’image, définissez le texte alternatif, modifiez le Prompt de génération par IA, ajoutez une Marge intérieure et définissez le Rayon du coin (px).
• Taille et ajustement : définissez la Largeur, la Hauteur, le Recadrage (Original ou un ratio fixe) et l’Ajustement (Couvrir ou un point focal) de l’image. Les champs exacts dépendent de la Mise en page que vous avez choisie.
• Lien : faites en sorte que toute la carte ouvre une URL lorsqu’on la touche.

Modifiez le titre, le texte et le bouton de la carte de la même manière que vous modifiez les blocs autonomes Titre, Texte et Bouton.

Bouton

Un Bouton est un appel à l’action cliquable dans le message in-app. Utilisez-le pour ouvrir une URL, exécuter du JavaScript personnalisé ou fermer le message.

Cliquez sur un bloc Bouton pour modifier son étiquette sur le canevas. Utilisez la barre d’outils pour changer la taille de la police, la couleur du texte, le gras, l’italique, le soulignement et l’alignement.

Pour définir ce qui se passe lorsque l’utilisateur touche le bouton :

1. Cliquez sur l’icône de lien dans la barre d’outils pour ouvrir Insérer/Modifier le lien.
2. Choisissez un Type d’action : Ouvrir un site web, URL ou Deeplink ou JavaScript personnalisé.
3. Remplissez les champs pour cette action (voir ci-dessous).
4. Cliquez sur Enregistrer.

Ouvrir un site web

Ouvrir un site web ouvre une page web lorsque l’utilisateur touche le bouton. Entrez l’adresse dans URL, par exemple https://example.com.

URL ou Deeplink

URL ou Deeplink ouvre un lien ou un lien profond lorsque l’utilisateur touche le bouton. Entrez l’adresse dans URL, par exemple un écran d’application : myapp://screen.

Exécuter du JavaScript personnalisé

JavaScript personnalisé exécute du code lorsque l’utilisateur touche le bouton. Entrez le code dans le champ onClick.

Utilisez-le lorsqu’un clic doit faire quelque chose dans Pushwoosh, et pas seulement ouvrir un lien. La personne dans l’application voit toujours un bouton normal. Elle ne voit pas les tags ou les événements. Vous décidez de ce qui se passe ensuite à l’écran : laisser le message ouvert, ou le fermer dans le même onClick.

Méthodes disponibles dans onClick

• pushwoosh.closeInApp() : ferme le message in-app. Omettez-le pour garder le message ouvert après le clic.
• pushwoosh.sendTags({...}) : enregistre des valeurs en tant que tags d’appareil pour des campagnes ultérieures.
• pushwoosh.postEvent(...) : envoie un événement personnalisé, par exemple pour démarrer un Customer Journey.
• pushwoosh.getTags(...) : lit les tags actuels. Utile en HTML personnalisé pour changer ce que le message affiche.
• pushwoosh.getCustomData() : lit les données personnalisées transmises par la notification push qui a ouvert cet in-app.

Exemple : permettre aux utilisateurs de choisir un intérêt et de l’enregistrer pour des campagnes ultérieures

1. Ajoutez une question dans un bloc Texte ou Titre, par exemple : “Quel sport vous intéresse ?”
2. Ajoutez un Bouton par option, par exemple : Yoga et Gym.

3. Définissez le Type d’action sur JavaScript personnalisé pour chaque bouton.
4. Pour le bouton Yoga, collez ceci dans onClick :

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. Pour le bouton Gym, collez ceci dans onClick :

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

Lorsque l’utilisateur touche Yoga, Pushwoosh écrit le tag interest sur son appareil et ferme l’in-app. Vous pouvez ensuite cibler cet utilisateur dans un segment ou un Customer Journey.

En savoir plus sur la création d'in-apps avec JavaScript

Séparateur

Un Séparateur est une ligne horizontale entre les blocs de contenu. Utilisez-le pour séparer visuellement les sections dans le modèle.

Configurez le style de ligne (Pleine, Tirets, Pointillés), la couleur, l’épaisseur et la largeur dans le panneau des paramètres.

HTML

Le bloc HTML vous permet de coller du HTML personnalisé dans un modèle in-app. Utilisez-le pour un formulaire personnalisé, un sondage ou une vidéo intégrée lorsqu’il n’y a pas de bloc Formulaire dédié pour les messages in-app.

Exemples

Les exemples ci-dessous montrent des façons courantes d’utiliser le bloc HTML dans un modèle in-app : un formulaire de prospect, un sondage et une vidéo intégrée.

Note

Les exemples de formulaire et de sondage enregistrent des tags d’appareil et envoient des événements via Pushwoosh. Créez les événements personnalisés dans votre compte avant de les utiliser dans des campagnes.

Formulaire de prospect

Ce formulaire de prospect écrit le nom et l’e-mail en tant que tags, envoie un événement promo_requested, affiche un message de remerciement, puis ferme l’in-app.

Code HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

Sondage

Ce sondage enregistre l’heure d’entraînement sélectionnée en tant que tag, envoie un événement schedule_survey_completed, affiche un message de remerciement, puis ferme l’in-app.

Code HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

Vidéo

Cet exemple intègre une vidéo YouTube dans le message in-app.

Code HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Menu

Le bloc Menu place plusieurs éléments cliquables dans une rangée ou une colonne. Utilisez-le pour une barre de navigation ou une liste de contacts d’entreprise.

Pour chaque élément de menu, définissez :

• Étiquette : le texte que les utilisateurs voient
• URL : où l’élément s’ouvre
• Cible : même onglet ou un nouvel onglet

Dans les paramètres du bloc, vous pouvez également définir :

• Direction : Horizontale ou Verticale
• Alignement : Gauche, Centre ou Droite
• Séparateur : un séparateur optionnel entre les éléments
• Police, taille, graisse, espacement des lettres et couleurs du lien/texte

Social

Le bloc Social affiche une rangée d’icônes de médias sociaux qui renvoient à vos profils. Utilisez-le pour envoyer les utilisateurs vers Facebook, Instagram, X et d’autres plateformes depuis le message in-app.

Ajoutez des entrées de plateforme, puis définissez l’alignement, la taille de l’icône et l’écart entre les icônes.

Minuteur

Le bloc Minuteur est un compte à rebours dans le message in-app. Utilisez-le pour les offres à durée limitée, les ventes flash et les rappels d’événements.

Pour le configurer :

1. Dans Compte à rebours, définissez la Date de fin et l’Heure de fin, puis choisissez le Fuseau horaire et la Langue pour les étiquettes du minuteur.
2. Activez les Étiquettes pour afficher les légendes “jours / heures / minutes / secondes” sous les chiffres, ou désactivez-les pour n’afficher que les nombres.
3. Dans Apparence, définissez l’Arrière-plan, la Couleur des chiffres, la Couleur des étiquettes et la taille de la police pour les chiffres (40px par défaut) et les étiquettes (16px par défaut).
4. Ajustez l’Espacement (marge intérieure) si nécessaire.

Colonnes

Les Colonnes divisent le canevas en sections côte à côte afin que vous puissiez placer du contenu les uns à côté des autres sur une seule ligne.

Faites glisser l’un de ces blocs sur le canevas :

• 2 colonnes : deux colonnes égales
• 3 colonnes : trois colonnes égales
• 4 colonnes : quatre colonnes égales
• 33 / 67 : colonne de gauche d’environ 33 % de large, droite d’environ 67 %
• 67 / 33 : colonne de gauche d’environ 67 % de large, droite d’environ 33 %

Ajoutez ensuite du contenu à chaque colonne. Pour modifier l’espacement de toutes les colonnes du modèle, ouvrez Paramètres → Paramètres par défaut des colonnes et ajustez la marge extérieure, la marge intérieure des colonnes et l’écart entre les colonnes.

Produits

Un bloc Produits affiche une grille de cartes de produits à partir d’un modèle partagé. Chaque carte peut inclure une image, un titre, une description, un prix et un bouton d’achat. Le modèle se répète pour chaque produit.

Dans le panneau des paramètres, sous Source, choisissez d’où proviennent les produits :

• Manuel : saisissez les produits à la main, ou cliquez sur Choisir dans le catalogue… pour sélectionner des articles spécifiques de votre Catalogue de produits par ID. Vous pouvez mélanger les deux dans le même bloc.
• Règle de catalogue : extrayez automatiquement les produits par catégorie et ordre de tri, résolus à la volée à partir du catalogue lorsque le message est affiché.
• Panier : affichez les articles du panier abandonné actuel de chaque utilisateur. Comment configurer une campagne de panier abandonné

Note

Règle de catalogue et Panier nécessitent les Modèles de contenu dans votre abonnement, ainsi qu’un jeton d’accès API (Paramètres → Accès API). Si le sélecteur de Source ne bascule pas sur l’un d’eux, ou si le bloc n’affiche pas les produits, contactez le support ou votre gestionnaire de compte, ou créez un jeton et resélectionnez la source.

Une fois que vous avez choisi une source, ces paramètres contrôlent l’apparence de la grille et de ses cartes :

• Nombre de produits (ou Nombre max de produits affichés pour Panier) : combien de cartes afficher.
• Colonnes : 1, 2 ou 3 cartes par ligne.
• Écart : l’espace entre les cartes.
• Limite de la description : la limite de caractères à laquelle le texte de la description est coupé, afin que les cartes conservent une taille cohérente.
• Modèle de carte : choisissez une mise en page, puis définissez l’Arrière-plan de la carte, le Rayon du coin de la carte et la Marge intérieure du contenu pour chaque carte.

Enregistrer et réutiliser les blocs

Enregistrez un bloc pour le réutiliser dans ce modèle in-app ou d’autres au lieu de le reconstruire à chaque fois.

1. Sélectionnez le bloc sur le canevas.
2. Cliquez sur l’icône de signet (Enregistrer le bloc pour réutilisation) dans la barre d’outils du bloc et donnez-lui un nom.

Les blocs enregistrés apparaissent sous Blocs enregistrés en bas de l’onglet Blocs.

• Faites glisser un bloc enregistré sur le canevas, ou cliquez dessus pour l’ajouter à la fin du modèle.
• Cliquez sur le × sur la tuile d’un bloc enregistré pour le supprimer.

Garder les copies synchronisées

Lorsque vous enregistrez un bloc, activez Garder les copies synchronisées pour lier chaque copie insérée à la même source. Modifiez la source une fois, et le changement s’applique partout où ce bloc est utilisé.

Une copie synchronisée est verrouillée sur le canevas. Vous ne pouvez pas la modifier directement. Sélectionnez la copie pour ouvrir ses paramètres :

• Modifier le bloc synchronisé : déverrouillez cette copie pour pouvoir la modifier. une bannière apparaît en haut. Cliquez sur Appliquer à tous pour enregistrer vos modifications sur la source et toutes les autres copies, ou sur Annuler pour les ignorer. Vous ne pouvez déverrouiller qu’un seul bloc synchronisé à la fois.
• Mettre à jour depuis la source : remplacez cette copie par la dernière version de la source.
• Détacher de la source : déliez cette copie de la source pour pouvoir la modifier de manière indépendante.

Note

Chaque fois que vous ouvrez un modèle in-app, Pushwoosh vérifie ses copies synchronisées et met à jour celles qui ne sont pas à jour. Une notification (toast) indique combien ont été rafraîchies. Si la source a un contenu plus récent, les paramètres de la copie affichent un avertissement jusqu’à ce que vous rouvriez le modèle ou cliquiez sur Mettre à jour depuis la source. Si la source a été supprimée, la copie conserve son dernier contenu et vous ne pouvez que la Détacher de la source.