Wie öffne ich Fin mit einer vorausgefüllten Frage?

Verwenden Sie die JavaScript-API von Intercom: Intercom('showNewMessage', 'Ihre Frage hier'). Das öffnet den Messenger mit der vorausgefüllten Frage – der Nutzer klickt nur noch auf Senden und erhält eine sofortige Antwort von Fin.

Kann ich vorausgefüllte Fragen mit Fin AI auf jeder Website nutzen?

Ja, solange der Intercom Messenger installiert und Fin AI aktiviert ist. Die JavaScript-API funktioniert auf jeder Seite, auf der das Intercom-Snippet geladen wird.

Zählen vorausgefüllte Fragen als Fin-Resolutions?

Ja. Wenn Fin die vorausgefüllte Frage ohne menschliche Übergabe löst, zählt sie als reguläre Fin-Resolution. Vorausgefüllte Buttons sind also ein effektives Mittel, Ihre Resolution-Rate zu steigern, indem Sie Nutzer zu Fragen lenken, die Fin gut beantwortet.

Kann ich verfolgen, welche vorausgefüllten Buttons am häufigsten geklickt werden?

Ja. Sie können Event-Tracking pro Button über Intercoms Custom Events oder Ihre Analytics-Plattform hinzufügen. Diese Daten helfen, die häufigsten Fragen zu erkennen und Ihre Wissensdatenbank entsprechend zu optimieren.

So fügen Sie Buttons hinzu, die Fin mit vorausgefüllten Fragen öffnen

Sie möchten es Ihren Besuchern leichter machen, Hilfe zu bekommen? Mit Buttons, die den KI-Assistenten Fin von Intercom mit vorausgefüllten Fragen öffnen, lenken Sie Nutzer zu sofortigen Antworten und reduzieren Support-Reibung.

Was Sie lernen werden

Den zentralen JavaScript-Befehl, um Fin mit einer Nachricht zu öffnen
Mehrere Implementierungsansätze (HTML, JavaScript, React)
Styling und Best Practices
Fehlerbehebung häufiger Probleme

Voraussetzungen

Bevor Sie diese Funktion umsetzen, stellen Sie sicher, dass Sie Folgendes haben:

Einen aktiven Intercom-Account mit aktiviertem Fin (Hilfe nötig? Schauen Sie sich unsere Intercom-Implementierungsservices an)
Den Intercom Messenger auf Ihrer Website installiert
Grundkenntnisse in HTML und JavaScript

Der zentrale Befehl

Die Magie passiert mit einem einzigen JavaScript-Befehl:

window.Intercom('showNewMessage', 'Ihre vorausgefüllte Frage hier');

Dieser Befehl macht zwei Dinge:

Öffnet den Intercom Messenger
Füllt das Nachrichtenfeld mit Ihrem Text vor

Der Nutzer drückt einfach Senden (oder bearbeitet die Nachricht zuerst), um ein Gespräch mit Fin zu starten.

Implementierungsmethoden

Methode 1: Einfacher HTML-Button

Der schnellste Weg ist ein Inline-onclick-Handler:

<button onclick="window.Intercom('showNewMessage', 'Wie setze ich mein Passwort zurück?')">
  Hilfe beim Passwort-Reset
</button>

Methode 2: JavaScript-Funktion mit Sicherheitsprüfung

Für mehr Zuverlässigkeit erstellen Sie eine wiederverwendbare Funktion, die prüft, ob Intercom geladen ist:

function askFin(question) {
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  } else {
    console.warn('Intercom is not loaded yet');
    // Fallback: Kontaktseite öffnen oder Hinweis anzeigen
    window.location.href = '/contact';
  }
}

Dann im HTML verwenden:

<button onclick="askFin('Wie upgrade ich meinen Tarif?')">
  Frage zu Upgrades stellen
</button>

Methode 3: Mehrere Buttons für schnelle Fragen

Erstellen Sie einen hilfreichen FAQ-ähnlichen Bereich mit mehreren vorkonfigurierten Buttons:

<div class="quick-questions">
  <h3>Schnelle Fragen</h3>
  <button onclick="askFin('Wie fange ich an?')">
    🚀 Erste Schritte
  </button>
  <button onclick="askFin('Welche Preispläne haben Sie?')">
    💰 Preise
  </button>
  <button onclick="askFin('Wie kontaktiere ich den Support?')">
    📞 Support kontaktieren
  </button>
  <button onclick="askFin('Wo finde ich die Dokumentation?')">
    📚 Dokumentation
  </button>
</div>

Methode 4: React-Implementierung

Wenn Sie React nutzen, hier ein sauberer Komponenten-Ansatz:

import React from 'react';

interface AskFinButtonProps {
  question: string;
  children: React.ReactNode;
  className?: string;
}

const AskFinButton: React.FC<AskFinButtonProps> = ({ 
  question, 
  children, 
  className 
}) => {
  const handleClick = () => {
    if (window.Intercom) {
      window.Intercom('showNewMessage', question);
    } else {
      console.warn('Intercom not loaded');
    }
  };

  return (
    <button onClick={handleClick} className={className}>
      {children}
    </button>
  );
};

// Verwendung
<AskFinButton question="Wie integriere ich Slack?">
  Frage zur Slack-Integration
</AskFinButton>

💡 TypeScript-Tipp

Fügen Sie diese Typdeklaration hinzu, um TypeScript-Fehler zu vermeiden:

// In einer .d.ts-Datei oder am Anfang Ihrer Komponente
declare global {
  interface Window {
    Intercom: any;
  }
}

Fin ohne vorausgefüllte Nachricht öffnen

Wenn Sie den Messenger nur öffnen möchten, ohne Text vorzubefüllen:

// Messenger öffnen (zeigt aktuelle Konversationen)
window.Intercom('show');

// Messenger mit neuem (leerem) Nachrichten-Composer öffnen
window.Intercom('showNewMessage');

Buttons stylen

Hier ist CSS, damit Ihre Buttons professionell aussehen:

.ask-fin-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #1f8ded 0%, #1a6fc4 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(31, 141, 237, 0.3);
}

.ask-fin-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(31, 141, 237, 0.4);
}

.ask-fin-button:active {
  transform: translateY(0);
}

/* Schnelle-Fragen-Raster */
.quick-questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0;
}

Best Practices

Tun ✅	Nicht tun ❌
Fragen knapp und klar halten	Übermäßig lange oder komplexe Fragen verwenden
Fragen auf Ihre FAQ-Themen abstimmen	Mit irrelevanten Fragen vorbefüllen
Buttons dort platzieren, wo Nutzer natürlich Fragen haben	Buttons an schwer auffindbaren Stellen verstecken
Testen, dass Fin die vorausgefüllten Fragen beantworten kann	Annehmen, dass alle Fragen gut funktionieren
Eine Sicherheitsprüfung für window.Intercom hinzufügen	Direkt aufrufen, ohne zu prüfen, ob geladen

Analytics-Tracking hinzufügen

Verfolgen Sie, welche Fragen Nutzer klicken, um Erkenntnisse zu gewinnen:

function askFinWithTracking(question, category) {
  // Event tracken (Beispiel mit Google Analytics 4)
  if (window.gtag) {
    gtag('event', 'ask_fin_clicked', {
      question: question,
      category: category,
      page: window.location.pathname
    });
  }
  
  // Fin mit der Frage öffnen
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  }
}

Beliebte Anwendungsfälle

Preisseiten — „Welcher Plan passt zu meiner Teamgröße?" oder „Bieten Sie Enterprise-Preise an?"
Feature-Seiten — „Wie funktioniert [Feature]?" oder „Kann ich eine Demo von [Feature] sehen?"
Dokumentation — „Ich brauche Hilfe zu [Thema]" unten in Hilfeartikeln
Onboarding-Flows — „Ich hänge bei diesem Schritt fest" oder „Was soll ich als Nächstes tun?"
Fehlerseiten — „Ich sehe einen Fehler und brauche Hilfe" auf 404- oder Fehlerseiten

Fehlerbehebung

⚠️ Häufige Probleme

Button reagiert nicht:

Prüfen Sie, ob Intercom geladen ist: Öffnen Sie die Browser-Konsole und tippen Sie window.Intercom. Gibt es undefined zurück, ist Intercom nicht geladen.
Stellen Sie sicher, dass Ihr Intercom-Installationscode auf der Seite ist
Prüfen Sie die Konsole auf JavaScript-Fehler

Intercom öffnet sich, aber die Nachricht ist nicht vorausgefüllt:

Stellen Sie sicher, dass Sie showNewMessage verwenden (nicht nur show)
Prüfen Sie, dass Ihr Frage-String keine Syntaxfehler enthält

Funktioniert auf dem Desktop, aber nicht mobil:

Stellen Sie sicher, dass Ihr Button Touch-Events korrekt verarbeitet
Prüfen Sie, ob Intercoms Mobile Messenger in Ihren Einstellungen aktiviert ist

Vollständiges funktionierendes Beispiel

Hier ist ein vollständiges, kopierfertiges Beispiel:

<!DOCTYPE html>
<html>
<head>
  <style>
    .help-section {
      max-width: 600px;
      margin: 40px auto;
      padding: 24px;
      font-family: system-ui, sans-serif;
    }
    .help-section h2 {
      margin-bottom: 16px;
    }
    .quick-questions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .ask-btn {
      padding: 10px 20px;
      background: #1f8ded;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }
    .ask-btn:hover {
      background: #1a6fc4;
    }
  </style>
</head>
<body>
  <div class="help-section">
    <h2>Hilfe benötigt?</h2>
    <p>Klicken Sie auf eine Frage unten, um mit unserem KI-Assistenten zu chatten:</p>
    <div class="quick-questions">
      <button class="ask-btn" onclick="askFin('Wie fange ich an?')">
        🚀 Erste Schritte
      </button>
      <button class="ask-btn" onclick="askFin('Welche Preispläne haben Sie?')">
        💰 Preise
      </button>
      <button class="ask-btn" onclick="askFin('Wie kontaktiere ich den Support?')">
        📞 Support kontaktieren
      </button>
    </div>
  </div>

  <!-- Ihr Intercom-Installationscode kommt hierher -->
  
  <script>
    function askFin(question) {
      if (window.Intercom) {
        window.Intercom('showNewMessage', question);
      } else {
        alert('Der Chat lädt noch, bitte versuchen Sie es gleich erneut.');
      }
    }
  </script>
</body>
</html>

Nächste Schritte

Jetzt, wo Sie wissen, wie Sie Schnellfrage-Buttons hinzufügen, denken Sie an:

Ihre Support-Tickets analysieren, um häufige Fragen zu identifizieren
A/B-Tests mit verschiedenen Formulierungen
Buttons zuerst auf stark frequentierten Seiten hinzufügen
Fin mit benutzerdefinierten Antworten auf Ihre häufigsten Fragen trainieren
Proaktive Support-Strategien implementieren, um Kunden zu erreichen, bevor sie fragen

Mehr über Fins Fähigkeiten und wie es die Customer Experience transformiert, erfahren Sie in unserem ausführlichen Guide: Die Zukunft der Customer Experience: Wie KI-Agenten wie Intercoms Fin den Support verändern werden.

Brauchen Sie Hilfe bei der Umsetzung?

Wir sind auf Intercom-Implementierungen spezialisiert und helfen Ihnen, mit Fin AI ein nahtloses Support-Erlebnis zu schaffen.

Unsere Intercom-Implementierungsservices entdecken →