FreshNews.ai
Zugang

JavaScript-Widget-Installation

Schritt-für-Schritt-Anleitung zur Installation des FreshNews.ai JavaScript-Widgets auf Ihrer Website für optimale E-E-A-T- und SEO-Leistung.

🔧 Developer Shortcut (Cursor / Copilot Ready)

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

Warum diese Methode?

Dies ist die primäre und empfohlene Integrationsmethode, da sie optimalen E-E-A-T-Wert (Erfahrung, Expertise, Autorität, Vertrauen) bietet.

  • E-E-A-T-optimiert: Inhalt wird direkt auf Ihrer Domain gerendert (nicht in einem iframe), sodass Google ihn ordnungsgemäß indexieren und zuordnen kann
  • SEO-Vorteile: Suchmaschinen sehen den Inhalt als Teil Ihrer Website, was die Domain-Autorität verbessert
  • Vollständige Kontrolle: Anpassen von Styling, Branding und Rendering, um perfekt zu Ihrer Website zu passen
  • Bessere Leistung: Keine iframe-Overhead, schnellere Seitenladezeiten

Installationsschritte

1

DNS-Einrichtung (Die Grundlage)

Für die Produktion müssen Sie eine CNAME-Custom-Domain verwenden (z. B. signals.ihredomain.com). Der Mandant wird automatisch aus der Domain aufgelöst, sodass Sie keinen Mandanten-Slug angeben müssen.

CNAME ist für die Produktion erforderlich. Ersetzen Sie 'signals.ihredomain.com' durch Ihre tatsächliche CNAME-Custom-Domain.

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

Skript-Installation (Head & Leistung)

Fügen Sie das Einbettungsskript und optionales CSS zum <head>-Bereich Ihrer Seite hinzu. Verwenden Sie 'defer' für die schnellste Ausführung.

<!-- 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>

Wichtig: Ersetzen Sie 'signals.ihredomain.com' durch Ihre tatsächliche CNAME-Custom-Domain. Das Widget löst den Mandanten automatisch aus Ihrer Domain auf.

3

Widget-Platzierung (Listen- vs. Artikelmodi)

Platzieren Sie den Widget-Container dort, wo der Inhalt angezeigt werden soll. Wählen Sie zwischen Einblicke-Liste, Signale-Liste oder Einzelartikelmodus.

Modus A: Signale-Liste

Zeigt eine Liste von täglichen Signalen an. Perfekt für eine Signalseite oder einen Signalbereich auf der Startseite.

<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

Aktualisierungen/Direkte Ladevorgänge Handhaben (Next.js & Framework-Benutzer)

Bei Verwendung von data-embed-nav="true" aktualisiert das Widget die URL über history.pushState. Bei Aktualisierung oder direktem Laden benötigt Ihre App eine Route, die dem Artikel-URL-Muster entspricht.

Dieser Schritt ist nur erforderlich, wenn Sie ein Framework wie Next.js, Remix oder ähnliches verwenden. Wenn Sie einfaches HTML verwenden, können Sie diesen Schritt überspringen.

Wenn ein Benutzer auf einen Artikel klickt, aktualisiert das Widget die URL zu /[lang]/signals/[slug] (oder /[lang]/insights/[slug]). Wenn der Benutzer diese URL aktualisiert oder direkt lädt, muss Ihre App einen Routen-Handler dafür haben. Die Route sollte dieselbe Seite wie Ihre Listen-Seite rendern - das Widget liest den Slug aus der URL und zeigt den Artikel clientseitig an.

Next.js App Router Beispiel:

// app/[lang]/signals/[slug]/page.tsx
// Rendern Sie dieselbe Seite wie app/[lang]/signals/page.tsx
// Das Widget liest den Slug von window.location.pathname

export default function SignalArticlePage({ params }) {
  // Rendern Sie dieselbe Komponente wie Ihre Listen-Seite
  return <SignalsPageContent locale={params.locale} />
}

Hochleistungsfunktionen

Stale-While-Revalidate

Sofortige Ladezeiten mit Frische. Das Widget zeigt gecachte Inhalte sofort an (0ms Verzögerung) und ruft dann frische Daten im Hintergrund für sanfte Updates ab.

Skeleton-Screens

Kein Layout-Shift. Das Widget zeigt animierte Skeleton-Screens während des Ladens anstelle von 'Lädt...'-Text für eine bessere wahrgenommene Leistung.

Paralleles Abrufen

Branding und Artikel werden parallel (nicht blockierend) abgerufen, sodass Artikel sofort gerendert werden, auch wenn die Branding-API langsam ist.

Wie Neue Artikel Erscheinen

Sofortiges Rendering (0ms Verzögerung)

Das Widget verwendet LocalStorage-Caching, um Inhalte sofort anzuzeigen. Beim ersten Besuch laden Artikel sofort aus dem Cache (0ms wahrgenommene Verzögerung), dann werden frische Daten im Hintergrund abgerufen.

Sanfte Aktualisierung

Die Hintergrundabfrage sorgt für Frische, ohne die Benutzererfahrung zu stören. Neue Artikel erscheinen nahtlos, wenn sie veröffentlicht werden, ohne Layout-Verschiebungen oder Ladeanzeigen.

Entdeckungsvorteil

💡 Warum dies für KI wichtig ist: Generative Maschinen (GEO) und Antwortmaschinen (AEO) suchen nach schnellen, autoritativen HTML-Strukturen. Der "Stale-While-Revalidate"-Ansatz unseres Widgets stellt sicher, dass KI-Crawler Ihren Inhalt sofort finden, während Ihre Benutzer eine sofortige Ladeerfahrung erhalten.

Zusätzliche Ressourcen

Für detaillierte API-Dokumentation siehe EMBED-API.md-Dokumentation. Für Fehlerbehebung kontaktieren Sie uns unter contact@freshnews.ai.

← Installation