FreshNews.ai
Demander

Installation du Widget JavaScript

Guide étape par étape pour installer le widget JavaScript FreshNews.ai sur votre site web pour des performances E-E-A-T et SEO optimales.

🔧 Developer Shortcut (Cursor / Copilot Ready)

Using Cursor or AI-assisted development? Generate the integration automatically.

Pourquoi cette méthode ?

C'est la méthode d'intégration principale et recommandée car elle fournit une valeur E-E-A-T (Expérience, Expertise, Autorité, Confiance) optimale.

  • Optimisé E-E-A-T : Le contenu est rendu directement sur votre domaine (pas dans un iframe), permettant à Google de l'indexer et de l'attribuer correctement
  • Avantages SEO : Les moteurs de recherche voient le contenu comme faisant partie de votre site, améliorant l'autorité de votre domaine
  • Contrôle Total : Personnalisez le style, la marque et le rendu pour correspondre parfaitement à votre site
  • Meilleures Performances : Pas de surcharge iframe, chargements de page plus rapides

Étapes d'Installation

1

Configuration DNS (La Base)

Pour la production, vous devez utiliser un domaine personnalisé CNAME (par exemple, signals.votredomaine.com). Le locataire est automatiquement résolu depuis le domaine, vous n'avez donc pas besoin de fournir un slug de locataire.

CNAME est requis pour la production. Remplacez 'signals.votredomaine.com' par votre domaine personnalisé CNAME réel.

signals.votredomaine.com → CNAME → ingest.freshnews.ai
2

Installation du Script (Head et Performances)

Ajoutez le script d'intégration et le CSS optionnel à la section <head> de votre page. Utilisez 'defer' pour une exécution plus rapide.

<!-- Performance: Pre-connect to API and R2 for faster loading -->
<link rel="preconnect" href="https://signals.your-domain.com" />
<link rel="preconnect" href="https://pub-xxxxx.r2.dev" />

<!-- Optional: Basic styling -->
<link rel="stylesheet" href="https://signals.your-domain.com/embed/insights.css" />

<!-- Required: Embed script - Use 'defer' in <head> for fastest execution -->
<script src="https://signals.your-domain.com/embed/insights.js" defer></script>

Important : Remplacez 'signals.votredomaine.com' par votre domaine personnalisé CNAME réel. Le widget résoudra automatiquement le locataire depuis votre domaine.

3

Placement du Widget (Modes Liste vs. Article)

Placez le conteneur du widget où vous souhaitez que le contenu apparaisse. Choisissez entre liste d'aperçus, liste de signaux ou mode article unique.

Mode A : Liste de Signaux

Affiche une liste de signaux quotidiens. Parfait pour une page de signaux ou une section de signaux sur la page d'accueil.

<div
  data-freshnews-widget="insights"
  data-mode="signals-list"
  data-api-base="https://signals.your-domain.com"
  data-link-base="https://your-site.com/signals"
  data-embed-nav="true"
  data-kind="daily"
  data-limit="20"
  data-language="en"
></div>

Note: For CNAME custom domains, no data-tenant attribute is needed. Only add data-tenant="your-slug" for localhost or testing with signals.freshnews.ai.

4

Gérer les Actualisations/Chargements Directs (Utilisateurs Next.js et Frameworks)

Lors de l'utilisation de data-embed-nav="true", le widget met à jour l'URL via history.pushState. Lors d'une actualisation ou d'un chargement direct, votre application a besoin d'une route qui correspond au modèle d'URL de l'article.

Cette étape n'est nécessaire que si vous utilisez un framework comme Next.js, Remix ou similaire. Si vous utilisez du HTML simple, vous pouvez ignorer cette étape.

Lorsqu'un utilisateur clique sur un article, le widget met à jour l'URL vers /[lang]/signals/[slug] (ou /[lang]/insights/[slug]). Si l'utilisateur actualise ou charge directement cette URL, votre application doit avoir un gestionnaire de route pour cela. La route doit rendre la même page que votre page de liste - le widget lira le slug de l'URL et affichera l'article côté client.

Exemple Next.js App Router :

// app/[lang]/signals/[slug]/page.tsx
// Rendre la même page que app/[lang]/signals/page.tsx
// Le widget lit le slug de window.location.pathname

export default function SignalArticlePage({ params }) {
  // Rendre le même composant que votre page de liste
  return <SignalsPageContent locale={params.locale} />
}

Fonctionnalités Haute Performance

Stale-While-Revalidate

Chargements instantanés avec fraîcheur. Le widget affiche le contenu mis en cache immédiatement (délai de 0ms), puis récupère des données fraîches en arrière-plan pour des mises à jour douces.

Écrans Squelette

Pas de décalage de mise en page. Le widget affiche des écrans squelette animés pendant le chargement au lieu du texte 'Chargement...' pour une meilleure performance perçue.

Récupération Parallèle

La marque et les articles sont récupérés en parallèle (non bloquant), donc les articles sont rendus immédiatement même si l'API de marque est lente.

Comment les Nouveaux Articles Apparaissent

Rendu Instantané (délai de 0ms)

Le widget utilise la mise en cache LocalStorage pour afficher le contenu immédiatement. Lors de la première visite, les articles se chargent instantanément depuis le cache (délai perçu de 0ms), puis des données fraîches sont récupérées en arrière-plan.

Actualisation Douce

La récupération en arrière-plan assure la fraîcheur sans perturber l'expérience utilisateur. Les nouveaux articles apparaissent de manière transparente au fur et à mesure de leur publication, sans décalage de mise en page ni indicateurs de chargement.

Avantage de Découverte

💡 Pourquoi cela compte pour l'IA : Les moteurs génératifs (GEO) et les moteurs de réponses (AEO) recherchent des structures HTML rapides et autoritaires. L'approche "Stale-While-Revalidate" de notre widget garantit que les robots d'exploration IA trouvent votre contenu immédiatement, tandis que vos utilisateurs bénéficient d'une expérience de chargement instantanée.

Ressources Supplémentaires

Pour la documentation détaillée de l'API, consultez la documentation EMBED-API.md. Pour le dépannage, contactez-nous à contact@freshnews.ai.

← Installation