Intégrations

Les intégrations vous permettent de placer un formulaire SupDesk directement sur votre propre site web. Les visiteurs rejoignent votre liste d’attente, vous écrivent ou s’inscrivent à une bêta sans jamais quitter votre site.

Vous cherchez une bulle de discussion plutôt qu’un formulaire ? Le chat en direct a son propre chargeur (chat.js) et son propre extrait — voir Chat en direct.

Trois formulaires peuvent être intégrés :

Ajouter une intégration

L’extrait de chaque formulaire est généré pour vous dans la console : copiez-le et collez-le dans votre page, à l’endroit où le formulaire doit apparaître.

• Liste d’attente — section Liste d’attente du projet, sous la carte de configuration
• Contact — page Paramètres du projet, sous Intégrer le formulaire de contact
• Bêta — page du programme bêta, sous Intégration

Un extrait ressemble à ceci :

<script src="https://acme.supdesk.app/embed.js"
        data-supdesk="contact"
        data-title="Contacter Acme" data-height="520" async></script>
<noscript>
  <iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
          style="border:0" title="Contacter Acme"></iframe>
</noscript>

Le script insère le formulaire à l’emplacement de la balise et ajuste sa hauteur au fil des changements — par exemple lorsque des erreurs de validation apparaissent, ou lorsqu’il se réduit à une courte confirmation après l’envoi. Le bloc <noscript> est un iframe simple : le formulaire fonctionne donc aussi pour les visiteurs sans JavaScript.

Tout est servi depuis votre propre domaine de portail. Si vous avez un domaine personnalisé, la console vous fournit les extraits sur ce domaine ; sinon ils utilisent votre sous-domaine *.supdesk.app.

Domaines personnalisés et domaines racine

Votre domaine personnalisé et l’origine vers laquelle pointe votre extrait doivent partager le même domaine racine pour que le cadre de l’intégration puisse communiquer avec le chargeur. La console génère toujours l’extrait avec votre origine de portail active : un extrait copié après la configuration de votre domaine personnalisé ne demande donc aucune réflexion — le script et le formulaire sont tous deux servis depuis votre domaine personnalisé, même origine.

Le cas à surveiller est un extrait copié avant l’ajout d’un domaine personnalisé. Les requêtes vers votre ancienne origine sont redirigées vers le domaine personnalisé, et le chargeur n’accepte cette redirection que lorsque les deux partagent un domaine racine — par exemple un sous-domaine de portail feedback.apibot.dev et un domaine personnalisé www.apibot.dev vivent tous deux sur apibot.dev. Si votre domaine personnalisé se trouve sur une racine entièrement différente, la redirection est inter-domaines et l’intégration ne fonctionnera pas : recopiez l’extrait depuis la console une fois votre domaine personnalisé actif.

Attributs

Vous pouvez placer plusieurs intégrations sur une page — donnez à chacune sa propre balise <script>.

Content Security Policy

Si votre site envoie un en-tête Content-Security-Policy, autorisez l’origine de votre portail dans deux directives, faute de quoi le navigateur bloquera l’intégration :

script-src https://acme.supdesk.app;
frame-src  https://acme.supdesk.app;

Utilisez ici votre domaine personnalisé si vos extraits en utilisent un. Rien d’autre n’est nécessaire : l’intégration ne charge aucun script tiers dans votre page et n’effectue aucune requête réseau propre.

Protection anti-spam

Les formulaires intégrés bénéficient des mêmes protections que votre portail : ils sont limités en débit par visiteur et par projet, et si vous avez configuré Turnstile pour le projet, le défi apparaît aussi dans l’intégration.

Comme votre clé Turnstile est enregistrée pour votre propre domaine et que les intégrations sont servies depuis ce même domaine, votre clé fonctionne sans configuration supplémentaire.

Confidentialité et connexion

Les formulaires intégrés ne lisent ni n’écrivent jamais de session de portail : par conception, les navigateurs n’envoient pas ces cookies à un cadre situé sur la page d’un tiers. Chaque intégration fonctionne donc d’abord par e-mail : le visiteur saisit une adresse e-mail et reçoit un lien par courriel.

Cela a une conséquence à connaître au moment de placer une intégration : le visiteur termine le parcours dans un onglet de navigateur classique, et non dans votre page.

• Liste d’attente — l’inscription est enregistrée immédiatement ; l’e-mail contient la position et le lien de parrainage personnel
• Bêta — l’e-mail contient le lien d’acceptation qui procède à l’inscription
• Contact — le message arrive aussitôt dans votre boîte de réception ; l’e-mail sert d’accusé de réception et permet de consulter vos réponses

Les entrées de liste d’attente créées via une intégration sont enregistrées avec la source embed, ce qui vous permet de les distinguer des inscriptions du portail dans le tableau des entrées et dans les exports CSV.

Ce que voient les visiteurs

L’intégration n’affiche que le formulaire lui-même — sans en-tête, pied de page ni navigation du portail. Elle reprend la couleur de marque de votre projet et hérite donc de votre couleur d’accent sans aucun travail de style de votre côté.

Les pages intégrées ne sont pas indexées par les moteurs de recherche ; les pages publiques de votre portail sont les versions canoniques et indexables.

Ancien extrait de liste d’attente

Avant l’existence du chargeur de script, l’intégration de la liste d’attente était un simple iframe pointant vers /waitlist/embed :

<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
        style="border:0" title="Liste d'attente"></iframe>

Cela continue de fonctionner — vous n’avez rien à changer. Le remplacer par l’extrait actuel vous apporte l’ajustement automatique de la hauteur ; la height fixe de l’ancien iframe en est le seul véritable inconvénient.