À quoi ça sert
Au lieu de re‑rédiger un devis à chaque deal HubSpot, vous créez un modèle dans Infrasign avec des emplacements pour les infos qui changent (nom du client, montant, société). Quand un deal est prêt à être devisé, vous cliquez « Pousser sur HubSpot » : Infrasign récupère les données du deal, les insère dans le modèle, génère le PDF prêt à signer, et ajoute le lien de signature dans la timeline du deal. Le commercial ne quitte jamais HubSpot.
Choisir le format : PDF ou HTML
Quand vous créez un nouveau modèle, vous choisissez son format source. Les deux atteignent le même résultat (un PDF prêt à signer) mais s'éditent très différemment.
| Format PDF | Format HTML | |
|---|---|---|
| Input | Vous uploadez un PDF déjà mis en page (papier en‑tête, signature corporate) | Vous écrivez du HTML directement dans le dashboard, avec {{variables}} inline dans le texte |
| Mise en forme | Fidèle à votre PDF d'origine (logo, polices, charte graphique) | Styles HTML de base (titres, paragraphes, tableaux). Moins maîtrisé visuellement |
| Variables | Positionnées précisément (x, y, page) via éditeur visuel | Inline dans le texte — reflow automatique selon la longueur |
| Idéal pour | Devis avec charte graphique stricte, modèles existants en Word/PDF | Devis rapides avec contenu très variable (lignes de produits, tableaux dynamiques) |
Créer un modèle PDF
Allez dans Dashboard → Modèles → bouton « + Nouveau modèle »
Choisissez le format PDF, donnez un nom (ex. « Devis commercial standard »), uploadez votre PDF source (un PDF vide laissant la place pour les valeurs des variables).
Cliquez « Éditer » sur le modèle créé
L'éditeur visuel s'ouvre. Le PDF source est affiché, page par page.
Placez vos variables
Cliquez sur « + Variable » en haut. Puis cliquez sur le PDF à l'endroit où le texte doit apparaître. Une fenêtre vous demande la clé (ex. client_name, deal_amount) et un libellé. Un marqueur jaune se pose. Répétez pour chaque variable.
Placez la zone de signature
Cliquez sur « + Zone signature » puis sur le PDF, à l'emplacement de la signature. Un rectangle bleu en pointillés se pose (taille standard 200×50 pt, modifiable plus tard).
Enregistrez
Bouton « Enregistrer » en bas du modal. Votre modèle est prêt à être poussé.
client_name, deal_amount, etc.). Comme ça la fusion se fait automatiquement au push, sans avoir à mapper à la main.
Créer un modèle HTML
Modèles → + Nouveau modèle → format HTML
Donnez un nom, puis dans la zone Contenu HTML, écrivez votre devis en HTML. Les variables s'insèrent inline avec {{nom_de_la_variable}}.
Exemple complet
<h1>Devis pour {{client_name}}</h1>
<p>Émis le : 21/05/2026</p>
<h2>Société destinataire</h2>
<p>
<strong>{{company_name}}</strong><br>
Contact : {{client_name}} — {{client_email}}
</p>
<h2>Prestations</h2>
<table>
<tr><th>Description</th><th>Montant HT</th></tr>
<tr><td>Prestation {{deal_name}}</td><td>{{deal_amount}} €</td></tr>
</table>
<hr>
<p><strong>Total HT : {{deal_amount}} €</strong></p>
<p>Délai de validité : 30 jours.</p>h1, h2, h3 (couleur navy), table (bordures sobres), strong, p, hr, code. Vous pouvez surcharger avec une balise <style>…</style> en haut de votre HTML pour customiser.
Cliquez « Créer »
Le modèle apparaît dans la liste avec un badge HTML indigo.
Pour modifier plus tard : bouton « Éditer HTML »
Un modal s'ouvre avec votre HTML actuel, modifiez à volonté et enregistrez.
Connecter HubSpot
Il faut le faire une seule fois par utilisateur. C'est l'utilisateur qui autorise Infrasign à accéder à son portail HubSpot — vous gardez le contrôle de vos données, vous pouvez révoquer à tout moment.
Dashboard → onglet Intégrations → carte « HubSpot CRM »
Cliquez « Connecter »
Une popup HubSpot s'ouvre. Choisissez le portail HubSpot que vous voulez connecter (si vous en gérez plusieurs) et autorisez l'accès. La popup se ferme automatiquement.
Le statut passe à « Connecté » (vert)
Vos modèles ont maintenant un bouton « Pousser sur HubSpot » actif.
Pousser un devis sur un deal
Récupérez l'ID du deal HubSpot
Dans HubSpot, ouvrez le deal. L'ID est dans l'URL : app.hubspot.com/contacts/<portal>/record/0-3/123456 — le dernier nombre.
Dans Infrasign → Modèles → bouton « Pousser sur HubSpot » sur le modèle voulu
Collez l'ID du deal. Optionnellement, indiquez un email de signataire si vous voulez forcer un destinataire différent du contact du deal.
Cliquez « Envoyer »
Infrasign récupère les infos du deal (montant, contact, société), fusionne avec votre modèle, génère le PDF, et crée l'enveloppe de signature.
Une Note apparaît dans la timeline du deal HubSpot
Avec le lien de signature à transmettre au client. Le contact du deal reçoit aussi un email d'invitation.
Ce qui se passe ensuite
- Le client signe : OTP par SMS (sécurité eIDAS), il dessine ou tape sa signature, valide.
- La Note HubSpot est mise à jour automatiquement : statut « signé » avec horodatage.
- Le PDF signé est attaché à votre espace Infrasign + envoyé par mail au signataire et à vous.
- Un certificat de preuve eIDAS est généré (audit trail complet : IP, scroll, durée de lecture, hash SHA‑256). Pièce maîtresse en cas de contestation.
Référence des variables HubSpot
Si vous utilisez ces clés dans votre modèle, elles seront remplies automatiquement à partir des infos du deal HubSpot. Vous pouvez en inventer d'autres si vous les renseignez à la main au push.
| Clé | Source HubSpot | Exemple |
|---|---|---|
deal_name | Nom du deal | Devis acquisition Q3 |
deal_amount | Montant du deal | 15000 |
deal_stage | Étape pipeline | presentationscheduled |
deal_close_date | Date de closing prévue | 2026-08-31 |
client_name | Prénom + nom du contact | Jean Dupont |
client_firstname | Prénom seul | Jean |
client_lastname | Nom seul | Dupont |
client_email | Email du contact | jean@exemple.fr |
client_phone | Téléphone du contact | +33612345678 |
company_name | Société associée au deal | Acme SAS |
company_domain | Domaine de la société | acme.fr |
Aller plus loin — pousser depuis HubSpot
Le flow décrit ci-dessus part d'Infrasign (vous tapez l'ID du deal). Trois options permettent d'inverser le sens et de tout déclencher depuis HubSpot directement :
1. Carte sidebar Infrasign (UI Extension)
Une carte React s'affiche sur la page d'un deal HubSpot, liste vos modèles Infrasign,
et permet d'envoyer le devis pour signature sans changer d'onglet. C'est l'expérience la plus fluide
(équivalent PandaDoc). Installation via le HubSpot CLI — voir hubspot-extension/README.md dans le code source.
2. Webhook automation HubSpot
Configurez un workflow HubSpot qui déclenche un webhook quand un deal change d'étape
(par exemple « passage en étape Devis à envoyer »). L'URL à indiquer côté HubSpot :
https://infrasign.fr/api/hubspot/webhook. Côté Infrasign, activez autoPush
et choisissez votre modèle par défaut — chaque deal qui traverse l'étape déclenchera un envoi
automatique. Le webhook est idempotent : un deal qui a déjà une enveloppe n'en aura pas une deuxième.
3. Bouton custom HubSpot avec deeplink
Le plus simple : créez un bouton « Action » natif HubSpot sur la fiche deal qui pointe vers
https://infrasign.fr/dashboard#templates?dealId={{deal.id}}.
Le commercial clique, le dashboard Infrasign s'ouvre directement sur l'onglet Modèles avec
l'ID du deal déjà pré-rempli — il ne reste qu'à choisir le modèle et envoyer.
FAQ & dépannage
Le bouton « Pousser sur HubSpot » est grisé
Vous n'avez pas encore connecté HubSpot (ou votre plan ne le permet pas — HubSpot est inclus dans l'offre Business). Allez dans Intégrations pour vérifier.
HubSpot affiche « erreur d'autorisation »
Vérifiez que le compte HubSpot que vous autorisez est bien celui que vous voulez connecter. Si l'erreur persiste, déconnectez puis reconnectez depuis la carte Intégrations.
Une variable n'apparaît pas dans le PDF généré
Cas PDF : vérifiez la position dans l'éditeur visuel (la variable s'affiche en haut à gauche du marqueur).
Cas HTML : vérifiez l'orthographe exacte de la clé entre {{ et }}. Espaces tolérés ({{ client_name }} marche), mais pas les tirets ni les caractères spéciaux dans la clé.
Le PDF généré (format HTML) a une mise en page bizarre
Le rendu HTML→PDF utilise Chromium en arrière‑plan. Les CSS modernes (flex, grid, transforms) sont supportés. Si vous voulez plus de contrôle, ajoutez votre propre balise <style> en haut de votre HTML.
Mon client signe mais le statut ne se met pas à jour côté HubSpot
La mise à jour de la Note timeline est best‑effort : si HubSpot est indisponible au moment de la finalisation, elle est tentée silencieusement. Le statut Infrasign est toujours à jour côté Infrasign. Vous pouvez aussi configurer un webhook dans votre app HubSpot pour être notifié directement par Infrasign.
Puis‑je partager mes modèles avec mon équipe ?
Oui : à la création du modèle, cochez « Partager avec mon organisation ». Tous les utilisateurs actifs de votre organisation Infrasign le verront et pourront l'utiliser. Seul le propriétaire peut le modifier ou le supprimer.
Un autre CRM que HubSpot ?
Salesforce est également intégré (même flow) — voir l'onglet Intégrations. Pour d'autres CRM, utilisez notre API REST directement (création d'enveloppe depuis un modèle).
Une question pas couverte ? Écrivez‑nous — réponse sous 24 h ouvrées.