UI •
v1.3.0 @synqro/social-share
Boutons de partage avec résumé IA, share sheet natif sur mobile et toasts auto-traduits.
Ajoute un attribut sur n'importe quel bouton : facebook, linkedin, x, copy, chatgpt, perplexity, claude ou grok. Sur mobile, sl-share-copy ouvre le share sheet natif (WhatsApp, Messages, Mail, toute app installée) — sur desktop, copie dans le presse-papiers. Les boutons IA ouvrent ChatGPT, Perplexity, Claude ou Grok avec un prompt de résumé auto-traduit selon la langue de la page (EN/FR/ES/DE).
Install • À coller dans Project Settings → Custom Code → Footer
HTML
<!-- [Synqro Labs] Social Share -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/social-share@1/dist/index.min.js"></script>Installation
- 1 Ajoute le script à ton projet Webflow. Va dans Project Settings → Custom Code → Footer Code et colle le snippet ci-dessus.
- 2 Ajoute les custom attributes sur les éléments concernés dans le Designer Webflow — voir le tableau ci-dessous.
- 3 Publie ton site. Le script s'initialise automatiquement au DOMContentLoaded.
Configuration
Sélectionne l'élément dans le Designer Webflow et ajoute ces custom attributes dans le panneau Element Settings.
| Attribute | Value | Description |
|---|---|---|
| | (empty) or URL | Partage sur Facebook. |
| | (empty) or URL | Partage sur LinkedIn. Utilise les meta tags OG de la page pour la preview. |
| | (empty) or URL | Partage sur X (Twitter) avec le titre de la page. |
| | (empty) or URL | Ouvre le share sheet natif sur mobile uniquement. Desktop copie toujours dans le presse-papiers. |
| | (empty) or URL | Ouvre ChatGPT avec un prompt pour résumer la page. Le prompt est pré-rempli — l'utilisateur appuie sur Entrée pour envoyer. |
| | (empty) or URL | Ouvre Perplexity avec une recherche pour résumer la page. La recherche se lance automatiquement. |
| | (empty) or URL | Ouvre Claude avec un prompt pour résumer la page. L'utilisateur doit être logué sur claude.ai. |
| | (empty) or URL | Ouvre Grok (xAI) avec un prompt pour résumer la page. |
| | custom prompt | Override du prompt IA par défaut ("Résume cet article :"). Auto-traduit en EN/FR/ES/DE par défaut. |
| | custom text | Texte personnalisé pour le partage X (optionnel, utilise le premier h1 par défaut). |
| | custom toast text | Override du message de succès auto-traduit. Par défaut adapté à la langue de la page. |
| | custom toast text | Override du message d'erreur auto-traduit. |
| | false | Désactive le toast. Les classes temporaires sl-share-copied / sl-share-error restent ajoutées pour Webflow Interactions. |
Exemples
Les quatre boutons — partage la page courante
HTML
<button sl-share-fb>Facebook</button>
<button sl-share-linkedin>LinkedIn</button>
<button sl-share-x>X</button>
<button sl-share-copy>Share / Copy</button>Partager une URL spécifique (utile pour cartes blog/CMS)
HTML
<button sl-share-copy="https://synqro.co/blog/my-post">
Share this post
</button>Désactiver le toast, utiliser des interactions Webflow custom
HTML
<button sl-share-copy sl-share-toast="false">
Share
</button>
<!-- Listen for .sl-share-copied class added for 2 seconds -->Boutons de résumé IA
HTML
<button sl-share-chatgpt>Summarize with ChatGPT</button>
<button sl-share-perplexity>Summarize with Perplexity</button>
<button sl-share-claude>Summarize with Claude</button>
<button sl-share-grok>Summarize with Grok</button>IA avec prompt personnalisé
HTML
<button sl-share-chatgpt sl-share-ai-prompt="Explain this article in simple terms:">
Explain with AI
</button>Tips
- Mobile — sl-share-copy utilise la Web Share API (share sheet natif). Fallback sur clipboard en desktop.
- LinkedIn — assure-toi que ta page a les meta tags OG (og:title, og:description, og:image) via les réglages SEO Webflow.
- i18n — le toast et les prompts IA auto-détectent la langue depuis <html lang="..."> (set par Webflow sur les sites multilangues). Supporté : EN, FR, ES, DE.
- IA — ChatGPT pré-remplit le prompt (l'utilisateur appuie sur Entrée). Perplexity lance la recherche automatiquement. Claude pré-remplit si l'utilisateur est logué sur claude.ai. Grok fonctionne pareil. Gemini ne supporte pas les prompts via URL nativement.