Boutique Telegram (Mini App intégrée au bot)

Transformez votre bot Telegram en véritable boutique intégrée. Construisez un catalogue produits multipage soigné — avec photos, vidéos, pages thématiques, un assistant IA par produit et une prise de commande légère — qui s’ouvre à l’intérieur de Telegram dès que votre client appuie sur le bouton menu de votre bot. Pas d’app store, pas de site séparé, pas de checkout à gérer. Une simple pression, et votre client parcourt déjà votre boutique.

Gratuit sur tous les plans, y compris l’essai. Construit dans un compositeur visuel par glisser-déposer disponible dans Intégrations → bot Telegram → Configurer la mini app : 12 types de blocs, 6 thèmes, chat IA par produit, CTA de commande qui transfèrent à un humain dans votre inbox.

Ce que vous pouvez construire

Quelques formes courantes que prend la boutique intégrée en production :

• Boutique en ligne — bannière hero + grille de produits + chat par produit (« Est-ce disponible en taille M ? ») + formulaire de demande de commande. Les commandes arrivent dans votre inbox ; un coéquipier répond depuis là.
• Carte de restaurant — multipage (Entrées / Plats / Boissons) + galerie photo + bloc Cart review + champ adresse de livraison au checkout.
• Catalogue de cours ou de services — fiches produit pour chaque cours avec un bloc Video en intro, des témoignages, et un CTA back-to-bot « Réserver un appel ».
• Site vitrine — hero + page à propos + galerie + carte de contact + FAQ — sans aucun produit. La boutique devient une brochure mobile élégante qui vit à l’intérieur de votre bot.
• Landing de capture de leads — une page, un hero, un formulaire, un CTA. Le « tunnel Telegram » le plus léger possible.

Commencez avec une seule page, et faites évoluer vers un catalogue multipage quand vous serez prêt.

Pourquoi ça compte

• Vos clients ne quittent jamais Telegram. Pas d’installation d’app, pas de domaine à retenir, pas de tunnel de checkout à abandonner. La boutique s’ouvre dans la WebView de Telegram et hérite du thème, de la langue et de la connexion de l’utilisateur.
• Une seule pression depuis une conversation. Le bouton menu à côté du compositeur se câble automatiquement sur votre boutique dès que vous connectez le bot. Le libellé bascule automatiquement sur « Shop » dès que vous publiez un produit — aucune configuration BotFather requise.
• Chat produit nativement IA. Le chat par produit est limité aux documents que vous attachez à ce produit — l’assistant peut répondre en toute confiance à « quelle est la politique de retour de cette robe ? » sans laisser fuiter d’informations provenant d’autres produits.
• Transfert de commande à un humain réel. Les formulaires de commande légers (mode inquiry ou cart) arrivent dans votre Inbox sous forme de transfert structuré, en gardant la DM Telegram du client ouverte pour le suivi.
• Gratuit sur tous les plans. L’essai a une limite de 5 pages / 25 blocs par page / 100 docs produit ; tous les plans payants suppriment ces limites. La tarification est par organisation — ajouter un deuxième bot Telegram ne change pas le prix de votre palier.

En un coup d’œil

• Multipage, par glisser-déposer. Les utilisateurs finaux appuient sur l’icône hamburger (en haut à gauche) pour changer de page. Si vous ne publiez qu’une seule page, elle se charge en plein écran.
• 12 types de blocs — Hero, Product card, Product grid, Carousel, Gallery, FAQ, Testimonial, CTA back-to-bot, Contact, Video, Rich text, Cart review.
• 6 thèmes (Telegram par défaut + 5 personnalisés) avec surcharges de style par bloc.
• Cycle de vie Draft → Publish avec retour en un clic au dernier snapshot publié.
• Toggle on/off par intégration — désactivez-le et le menu du bot revient au sélecteur de commandes / de Telegram ; l’URL publique renvoie 410 Gone pour que les marque-pages obsolètes ne laissent pas fuiter de contenu.
• Coquille sensible à la locale (anglais, espagnol, portugais brésilien, français, russe) — suit automatiquement la langue Telegram de l’utilisateur, ou épinglez une locale unique.
• Help Center intégré — une surface FAQ épinglée pour les questions ponctuelles, toujours à une pression. Voir ci-dessous.
• Pas de paiements, pas de stocks, pas de livraison — c’est une surface catalogue + capture de leads soignée, pas une stack e-commerce complète. Associez-la à un humain dans votre inbox et vous avez une boucle de vente complète.

Comment les clients la trouvent

Quand quelqu’un ouvre votre bot Telegram, il voit le bouton menu à côté du compositeur. Une pression ouvre votre boutique en plein écran à l’intérieur de Telegram. Le libellé du bouton est :

• « Shop » — défini automatiquement si votre boutique publiée contient une product card ou une product grid
• « Open » — défini automatiquement sinon
• Ce que vous avez tapé — si vous définissez un libellé personnalisé dans le compositeur (toute chaîne de 1 à 32 caractères survit à chaque publication jusqu’à ce que vous la vidiez)

L’URL de la boutique a la forme https://storefront.cuneiform.chat/{your-org-slug} (avec ?i={integration_id} ajouté seulement si votre organisation a plus d’un bot Telegram). Copiez cette URL depuis la fiche d’intégration pour des QR codes, des publicités, ou pour enregistrer un lien de lancement direct BotFather t.me/<bot>/<app> (voir le playbook BotFather sur la fiche du bot).

Prérequis

• Une intégration Telegram connectée. La boutique se monte par-dessus — il n’y a pas d’intégration séparée à ajouter.
• (Optionnel) Images de produits, textes de produits, entrées FAQ, et documents de base de connaissances à câbler dans le chat par produit.

Démarrage rapide (5 minutes)

Le chemin le plus court entre « j’ai connecté un bot » et « mon premier client parcourt la boutique » :

1. Allez dans Intégrations → votre bot Telegram → Configurer la mini app. Le compositeur s’ouvre en état Draft.
2. Cliquez sur « + Ajouter une page » dans le rail gauche. Nommez-la (par ex. « Accueil »).
3. Ajoutez un bloc Hero — titre, sous-titre, image de fond 16:9 (déposez une photo, le recadreur s’ouvre automatiquement).
4. Ajoutez une Product card — nom, prix, image 1:1, description courte. Activez AI chat et attachez un doc (une fiche technique PDF, votre politique de livraison — n’importe quoi depuis votre KB).
5. Ajoutez un Order CTA sur ce produit — choisissez le mode inquiry, choisissez les champs du formulaire (name est toujours requis).
6. Cliquez sur Publish. Le bouton menu du bot se ré-étiquette automatiquement en « Shop » puisque vous avez un produit.
7. Ouvrez votre bot dans Telegram. Appuyez sur « Shop ». Appuyez sur votre produit. Appuyez sur « Ask a question ». Appuyez sur « Order this ». Soumettez. Vous verrez le transfert arriver dans votre Inbox en quelques secondes.

C’est la boutique minimale viable. Ajoutez plus de pages, plus de produits, des thèmes, des vidéos et un Help Center au fur et à mesure de votre croissance.

Le compositeur

Le compositeur se trouve à Intégrations → [votre bot Telegram] → Configurer la mini app (aussi accessible via le menu à trois points sur la fiche du bot). C’est une disposition à 3 panneaux :

Une barre d’outils collante en haut comporte : un badge de statut (Draft / Published), un menu ⋯ (Annuler les modifications / Revenir à la version publiée), Enregistrer comme brouillon, et Publier.

Draft vs Published

• Enregistrer comme brouillon — vos modifications sont enregistrées mais les clients voient toujours la dernière version publiée.
• Publier — votre brouillon devient en ligne ; un « snapshot publié » figé est automatiquement enregistré pour vous permettre un rollback ultérieur.
• Annuler les modifications — jette les modifications locales non enregistrées et recharge la dernière version enregistrée (aucun appel serveur).
• Revenir à la version publiée — copie le snapshot publié dans votre brouillon de travail et le republie. Désactivé pour les organisations qui n’ont jamais publié auparavant.

Si vous cliquez sur Enregistrer comme brouillon alors que vous êtes actuellement Published, une boîte de dialogue de confirmation « dépublier » s’affiche (avec un indice pour revenir en arrière).

Les 12 types de blocs

Déposez n’importe lequel de ces blocs sur une page de la boutique :

Chaque bloc prend également en charge des surcharges de style par bloc — couleur de fond, couleur de texte, taille de police — multipliées avec le thème de la page. Utilisez-les avec parcimonie ; le thème gère le look par défaut.

Thèmes

Choisissez un thème par page. Le thème contrôle le fond, la couleur du texte, la couleur d’accent et la police.

Là où vous ne choisissez pas de thème, vous obtenez le Telegram par défaut — votre boutique semble toujours native à l’application Telegram du client.

Contrôles par intégration

Chaque intégration Telegram a des paramètres indépendants, limités à ce seul bot. Ajouter un deuxième bot Telegram à la même organisation lui donne ses propres toggles indépendants. Les trois vivent dans le rail gauche du compositeur sous Mini app settings.

Toggle on/off de la boutique

• Par défaut : on.
• Le désactiver fait deux choses à la fois :
  1. Le bouton menu du bot est réinitialisé au sélecteur de commandes / par défaut de Telegram — la boutique n’est plus accessible depuis l’UI du bot.
  2. Si un client a toujours l’URL de la boutique en marque-page et l’ouvre directement, la coquille affiche un message « currently unavailable » (le serveur renvoie 410 Gone pour que les caches obsolètes ne puissent pas laisser fuiter de contenu après la désactivation).
• Le toggle confirme une fois avec une boîte de dialogue avant de désactiver.
• Le réactiver restaure le bouton menu du bot (libellé automatique ou votre surcharge, selon ce qui est défini).

Surcharge du libellé du bouton menu

• Par défaut : dérivation automatique à chaque publication — « Shop » si votre boutique contient un bloc produit, sinon « Open ».
• Définissez un libellé personnalisé (1 à 32 caractères) pour figer le texte du bouton — la dérivation automatique est ignorée à partir de ce moment, même après des changements de contenu ou une republication.
• Videz le champ (chaîne vide) pour revenir à la dérivation automatique.
• Utilisez un libellé personnalisé si votre audience ne parle pas anglais — le libellé automatique par défaut est uniquement en anglais.

Langue de l’UI de la boutique

La coquille utilise par défaut la langue Telegram du client pour son chrome. Si vous avez rédigé votre boutique dans une seule langue, vous pouvez épingler la langue du chrome de la coquille : choisissez en, es, pt (brésilien), fr, ou ru. Laisser ce champ vide conserve le comportement de détection automatique.

Cela n’affecte que le chrome de la coquille (tiroir, boutons système, en-tête du Help Center) — tout ce que vous avez tapé dans un titre de hero, un nom de produit, ou un bloc rich-text est rendu tel quel.

Chat IA par produit

N’importe quelle product card peut devenir un produit chattable. Chaque product card porte une rangée de deux boutons dans le compositeur pour gérer les documents qui alimentent son chat :

• Attach docs — ouvre un sélecteur qui vous permet de choisir parmi n’importe quel dossier de votre base de connaissances. Les documents déjà attachés à ce produit sont affichés désactivés pour vous empêcher de les attacher deux fois. Besoin d’un nouveau fichier ? Utilisez l’action Upload new en ligne dans le sélecteur — il atterrit dans votre KB et est automatiquement sélectionné.
• Linked docs (N) — ouvre un gestionnaire qui liste tout ce qui est actuellement attaché. De là, vous pouvez délier un doc de ce produit (le doc reste dans votre KB et sur tous les autres produits auxquels il est lié) ou sauter dans la vue Knowledge Base pour l’éditer. Le gestionnaire affiche également une bande « Also linked to : … » lorsque le même doc alimente d’autres produits.

Quand un client appuie sur le produit, un chat intégré au panneau s’ouvre. Le chat est limité aux seuls documents liés à ce produit unique — l’assistant ne laissera pas fuiter de réponses provenant des fichiers d’autres produits. Les conversations sont diffusées en direct (SSE) et stockées dans une collection dédiée par intégration.

Quelques éléments importants à connaître :

• Un seul doc peut alimenter plusieurs produits. Partagez un seul PDF « Livraison et retours » sur chaque produit au lieu de l’uploader cinq fois.
• Le déliage est par produit. Retirer un doc d’une product card le laisse intact dans votre KB et sur tous les autres produits qui y sont liés. Pour supprimer un doc partout, supprimez-le depuis la page Knowledge — tous les liens produits associés sont nettoyés automatiquement.
• Les docs atterrissent dans un dossier Showcase Products par défaut quand vous utilisez l’upload en ligne depuis le sélecteur, mais vous êtes libre de les organiser n’importe où dans votre KB.

Des limites de palier s’appliquent au nombre total de docs produit que vous pouvez attacher (voir Limites de palier).

Demandes de commande & panier (optionnel)

Vous pouvez attacher un Order CTA à n’importe quelle product card ou product grid. C’est purement un transfert de message structuré — pas de paiements, pas de stocks, pas de fulfillment.

Deux modes

• Mode inquiry — le client appuie sur « Order this » → un formulaire s’ouvre avec le produit pré-rempli → il soumet → un transfert atterrit dans votre inbox.
• Mode cart — le client appuie sur « Add to cart » → le produit est ajouté à un panier local (vit uniquement dans son navigateur, indexé sur votre intégration) → il révise sur la page panier (un bloc Cart review) et passe à la caisse → un transfert multi-lignes atterrit dans votre inbox.

Champs du formulaire

Choisissez n’importe quel sous-ensemble de name, phone, email, notes, delivery_address. name est toujours requis quel que soit ce que vous sélectionnez.

Ce qui se passe après la soumission

1. Une nouvelle conversation est créée dans votre inbox avec le résumé de commande formaté comme premier message.
2. Un handoff est créé — un membre d’équipe humain est signalé pour prendre le relais. Les lignes d’article et les informations de contact sont attachées en tant que métadonnées structurées.
3. Le système envoie instantanément un message localisé « Got your order » en retour à la DM Telegram du client, ce qui maintient la fenêtre de réponse de 24 heures de Telegram ouverte pour que les réponses de votre équipe depuis l’inbox routent proprement vers le client.
4. La vue détaillée de l’inbox affiche un Order Request Panel dédié avec lignes d’article, prix, informations de contact et notes proprement disposées.

Anti-spam / anti-doublon

• Chaque client peut soumettre au maximum 10 commandes par minute ; chaque tenant au maximum 100 par minute.
• Les doubles pressions dans les 60 secondes sur la même commande exacte sont dédupliquées ; deux commandes différentes dans les 60 secondes passent.

Help Center intégré

Chaque boutique est livrée avec un petit Help Center — une page d’assistance épinglée à la fin du menu des pages, toujours à une pression pour les clients qui ont besoin d’une FAQ ou veulent poser une question au bot. Rédigé depuis un panneau dédié (Intégrations → fiche du bot → Help Center), il accueille jusqu’à environ 50 entrées avec réorganisation par glisser. Deux modes d’entrée : curated (réponse markdown rendue en ligne, zéro coût LLM) et agent (appuyer envoie une question pré-rédigée dans le chat du bot). Vous pouvez également faire remonter un sous-ensemble de ces entrées en ligne sur une page de la boutique via le bloc FAQ — utile pour placer quelques réponses clés à côté des fiches produit.

La plupart des clients n’ont jamais besoin de l’ouvrir — les produits, la galerie et les CTA de commande répondent aux questions du parcours d’achat sur la boutique elle-même.

Images

Quand vous uploadez une image dans le compositeur :

• Formats autorisés : PNG, JPEG, WebP.
• Taille max d’upload : 2 Mo (l’original — ce qui est stocké et servi est beaucoup plus petit).
• Recadreur en ligne s’ouvre automatiquement, verrouillé au bon ratio d’aspect pour l’emplacement (16:9 pour les fonds hero, 1:1 pour les avatars produit / galerie / témoignage).
• Compression automatique : la sortie du recadreur est compressée en WebP dans votre navigateur avant l’upload (hero ≤500 Ko, product/gallery ≤350 Ko, avatar ≤100 Ko).
• Texte d’aide sur les dimensions recommandées est affiché au-dessus de chaque zone de dépôt vide.
• Les URL d’images se rafraîchissent automatiquement toutes les 15 minutes via des URL présignées sécurisées — les clients ne voient jamais vos chemins de stockage bruts.

Le plafond de 2 Mo porte sur l’original que vous uploadez, pas sur ce que les clients voient. Déposez une photo de téléphone 12 MP ou une prise de catalogue en résolution d’impression telle quelle — le recadreur dans le navigateur gère la réduction d’échelle sans perte de qualité visible.

Limites de palier

Disponible sur tous les plans, y compris l’essai gratuit. Le compositeur applique les plafonds.

Remarques :

• Une product grid ou un carousel compte comme 1 bloc dans la limite de blocs par page, quel que soit le nombre d’éléments ou de diapos qu’il contient.
• Quand vous atteignez une limite, le compositeur affiche une modale de mise à niveau.
• La tarification est par organisation, pas par bot. Ajouter un deuxième (ou cinquième) bot Telegram à votre organisation ne change pas le prix de votre palier. Chaque bot a sa propre boutique au sein du même plan ; les plafonds sont partagés entre tous vos bots sous une seule organisation.

Permissions

Les actions d’écriture du compositeur (enregistrer, publier, upload d’image, upload de doc produit, revenir en arrière) requièrent toutes la permission Integration manage pour Telegram. En pratique, cela signifie que les rôles Owner et Admin peuvent rédiger la boutique ; le rôle Member est en lecture seule.

Il n’y a pas de rôle « boutique uniquement » aujourd’hui — Owner et Admin voient tous deux la facturation. Si vous embauchez un prestataire pour construire votre boutique, vos options sont :

• L’ajouter en tant qu’Admin (en sachant qu’il verra aussi la facturation).
• Utiliser une session de partage d’écran où vous restez connecté et le freelance pilote.
• Lui demander de préparer les actifs/textes hors ligne (un document avec tous les textes + images) et vous les collez en tant qu’Owner.

Un rôle granulaire « Integration Editor » est dans la feuille de route.

Performance & fraîcheur

• Cache côté serveur — la réponse publique de la boutique est mise en cache pendant 5 minutes par intégration.
• Le cache est vidé à la publication — au moment où vous cliquez sur Publish (ou Revert), le cache est nettoyé, pour que les clients voient vos changements dès leur prochaine requête de page.
• Support ETag — la coquille utilise HTTP If-None-Match et reçoit un 304 Not Modified rapide si rien n’a changé, ce qui maintient la consommation de données mobile basse.
• Les URL d’images sont valides pendant 15 minutes ; la coquille les re-récupère automatiquement avant leur expiration.

Ce que ça NE fait PAS

• Pas de paiements. Les Order CTA sont des transferts de demande, pas des checkouts Stripe / WhatsApp Pay / Telegram Stars.
• Pas de suivi des stocks. Les badges de disponibilité sont des libellés texte libre que vous éditez manuellement.
• Pas de calculs de livraison / validation d’adresse. L’adresse de livraison est collectée en tant que texte libre.
• Pas de comptes clients. Les clients sont identifiés par leur ID utilisateur Telegram ; il n’y a pas de flux de connexion ou d’inscription.
• Pas de formulaires au-delà de Order Inquiry / Cart Checkout. Le bloc contact est un affichage statique ; le bloc rich-text ne rend pas de formulaires.
• Les chemins « ask the bot » du Help Center et de commande refusent les lancements depuis des groupes / canaux avec une erreur polie.

Parcours client de bout en bout

1. Le client ouvre votre bot dans Telegram et appuie sur le bouton menu — libellé « Shop » (dérivé automatiquement des blocs produit) ou ce que vous avez défini comme libellé personnalisé.
2. La boutique se charge à l’intérieur de Telegram. Il voit votre première page.
3. Il balaie votre galerie, regarde votre vidéo, appuie sur un produit.
4. Le produit s’ouvre dans un panneau. Il appuie sur « Ask a question » → un chat IA s’ouvre limité aux documents de ce produit. Il obtient une réponse.
5. Il appuie sur « Order this » → un formulaire apparaît → il remplit nom + téléphone → soumet.
6. Il reçoit instantanément un message « Got your order, we’ll reach out » en retour dans sa DM Telegram.
7. Votre équipe reçoit un nouveau transfert dans l’Inbox avec les détails de la commande. Toute réponse que votre équipe envoie depuis l’inbox atterrit dans la DM du client en temps réel.

Dépannage

Le bouton menu n’ouvre pas la boutique

1. Confirmez que le toggle on/off de la boutique est activé (compositeur → rail gauche → Mini app settings).
2. Déconnectez et reconnectez l’intégration Telegram — le bouton chat-menu est défini lors de l’étape de connexion, et un bot obsolète peut en manquer.
3. Si vous avez défini un bouton menu personnalisé via BotFather, cela écrase la configuration automatique de la plateforme — videz-le via /setmenubutton de BotFather.

Les clients voient « currently unavailable » en ouvrant l’URL directement

Le toggle on/off de la boutique est désactivé — réactivez-le depuis le rail gauche du compositeur.

Les modifications que je viens d’enregistrer n’apparaissent pas pour les clients

Vos modifications sont toujours en brouillon. Cliquez sur Publier dans la barre d’outils du compositeur — le cache du serveur est vidé immédiatement. Si vous avez déjà publié et que les clients voient toujours du contenu obsolète, demandez-leur de tirer pour rafraîchir à l’intérieur de la boutique (Telegram met en cache la WebView).

Le chat produit répond avec les docs d’un autre produit

Vérifiez le gestionnaire Linked docs sur la product card — seuls les docs explicitement liés là alimentent le chat. Si un doc n’apparaît pas, attachez-le via le sélecteur Attach docs.

Le libellé de menu personnalisé n’a pas pris effet

Le champ de saisie du libellé a ses propres boutons Save / Reset (contrairement au toggle on/off, qui s’enregistre automatiquement). Cliquez sur Save après avoir tapé — les frappes partielles n’atteignent jamais Telegram.

Déconnexion

La boutique fait partie de l’intégration Telegram, donc elle disparaît quand vous déconnectez le bot :

• Intégrations → fiche Telegram → menu à trois points → Supprimer

Les pages, blocs et entrées d’aide que vous avez rédigés sont supprimés avec l’intégration. Pour garder le bot connecté mais mettre seulement la boutique hors ligne, basculez le toggle on/off de la boutique sur off à la place.

Lié

• Telegram — l’intégration parente ; la boutique se monte par-dessus
• Saba on Telegram — bot Saba orienté opérateur (fonctionnalité différente, également basée sur Telegram)
• Telegram Business — réponses IA sur le compte personnel d’un utilisateur Premium (fonctionnalité différente)