Come apro Fin con una domanda precompilata?

Usa l'API JavaScript di Intercom: Intercom('showNewMessage', 'La tua domanda qui'). Apre il Messenger con la domanda precompilata, così l'utente deve solo premere invio per ottenere una risposta immediata da Fin.

Posso usare le domande precompilate con Fin AI su qualsiasi sito?

Sì, purché tu abbia il Messenger Intercom installato e Fin AI abilitato. L'API JavaScript funziona su qualsiasi pagina in cui è caricato lo snippet di Intercom.

Le domande precompilate contano come resolution di Fin?

Sì. Se Fin risolve la domanda precompilata senza passaggio a un umano, conta come una resolution standard di Fin. I pulsanti precompilati sono quindi un modo efficace per aumentare il tasso di resolution, indirizzando gli utenti verso domande che Fin gestisce bene.

Posso tracciare quali pulsanti precompilati gli utenti cliccano di più?

Sì. Puoi aggiungere il tracciamento eventi a ciascun pulsante usando gli eventi personalizzati di Intercom o la tua piattaforma di analytics. Questi dati ti aiutano a capire le domande più comuni e a ottimizzare la knowledge base di conseguenza.

Come aggiungere pulsanti che aprono Fin con domande precompilate

Vuoi rendere più facile per i visitatori ottenere aiuto? Aggiungendo pulsanti che aprono l'assistente AI Fin di Intercom con domande precompilate, puoi guidare gli utenti verso risposte immediate e ridurre le frizioni del supporto.

Cosa imparerai

Il comando JavaScript principale per aprire Fin con un messaggio
Più approcci di implementazione (HTML, JavaScript, React)
Stile e best practice
Risoluzione dei problemi più comuni

Prerequisiti

Prima di implementare questa funzionalità, assicurati di avere:

Un account Intercom attivo con Fin abilitato (serve aiuto? Scopri i nostri servizi di implementazione Intercom)
Il Messenger Intercom installato sul tuo sito
Conoscenze base di HTML e JavaScript

Il comando principale

La magia avviene con un singolo comando JavaScript:

window.Intercom('showNewMessage', 'La tua domanda precompilata qui');

Questo comando fa due cose:

Apre il Messenger di Intercom
Precompila il campo del messaggio con il testo specificato

L'utente può semplicemente premere invio (o modificare prima il messaggio) per avviare una conversazione con Fin.

Metodi di implementazione

Metodo 1: Semplice pulsante HTML

Il modo più rapido per aggiungere questa funzionalità è un handler onclick inline:

<button onclick="window.Intercom('showNewMessage', 'Come reimposto la mia password?')">
  Aiuto per il reset della password
</button>

Metodo 2: Funzione JavaScript con controllo di sicurezza

Per maggiore affidabilità, crea una funzione riutilizzabile che verifica se Intercom è caricato:

function askFin(question) {
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  } else {
    console.warn('Intercom is not loaded yet');
    // Fallback: apri la pagina contatti o mostra un avviso
    window.location.href = '/contact';
  }
}

Poi usala nel tuo HTML:

<button onclick="askFin('Come aggiorno il mio piano?')">
  Chiedi degli upgrade
</button>

Metodo 3: Più pulsanti di domande rapide

Crea una sezione tipo FAQ con più pulsanti preconfigurati:

<div class="quick-questions">
  <h3>Domande rapide</h3>
  <button onclick="askFin('Come si inizia?')">
    🚀 Per iniziare
  </button>
  <button onclick="askFin('Quali sono i vostri piani tariffari?')">
    💰 Prezzi
  </button>
  <button onclick="askFin('Come contatto il supporto?')">
    📞 Contatta il supporto
  </button>
  <button onclick="askFin('Dove trovo la documentazione?')">
    📚 Documentazione
  </button>
</div>

Metodo 4: Implementazione React

Se usi React, ecco un approccio a componente pulito:

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>
  );
};

// Utilizzo
<AskFinButton question="Come integro Slack?">
  Domanda sull'integrazione Slack
</AskFinButton>

💡 Suggerimento TypeScript

Aggiungi questa dichiarazione di tipo per evitare errori TypeScript:

// In un file .d.ts o in cima al tuo componente
declare global {
  interface Window {
    Intercom: any;
  }
}

Aprire Fin senza messaggio precompilato

Se vuoi solo aprire il messenger senza precompilare testo:

// Apri il messenger (mostra le conversazioni recenti)
window.Intercom('show');

// Apri il messenger con nuovo compositore (vuoto)
window.Intercom('showNewMessage');

Stilizzare i pulsanti

Ecco del CSS per dare ai pulsanti un aspetto professionale:

.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);
}

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

Best practice

Da fare ✅	Da evitare ❌
Mantieni le domande concise e chiare	Usare domande troppo lunghe o complesse
Allinea le domande ai tuoi argomenti FAQ	Precompilare con domande irrilevanti
Posiziona i pulsanti dove gli utenti hanno naturalmente domande	Nascondere i pulsanti in posizioni difficili da trovare
Verifica che Fin possa rispondere alle domande precompilate	Dare per scontato che tutte le domande funzionino bene
Aggiungi un controllo di sicurezza per window.Intercom	Chiamare direttamente senza verificare il caricamento

Aggiungere il tracking analytics

Traccia quali domande gli utenti cliccano per ottenere insight:

function askFinWithTracking(question, category) {
  // Traccia l'evento (esempio con Google Analytics 4)
  if (window.gtag) {
    gtag('event', 'ask_fin_clicked', {
      question: question,
      category: category,
      page: window.location.pathname
    });
  }
  
  // Apri Fin con la domanda
  if (window.Intercom) {
    window.Intercom('showNewMessage', question);
  }
}

Casi d'uso popolari

Pagine dei prezzi — «Quale piano è giusto per la mia squadra?» oppure «Offrite prezzi enterprise?»
Pagine delle funzionalità — «Come funziona [funzionalità]?» oppure «Posso vedere una demo di [funzionalità]?»
Documentazione — «Mi serve aiuto su [argomento]» in fondo agli articoli di aiuto
Flussi di onboarding — «Sono bloccato a questo passo» oppure «Cosa devo fare adesso?»
Pagine di errore — «Vedo un errore e mi serve aiuto» nelle pagine 404 o di errore

Risoluzione dei problemi

⚠️ Problemi comuni

Il pulsante non fa nulla:

Verifica se Intercom è caricato: apri la console del browser e digita window.Intercom. Se restituisce undefined, Intercom non è caricato.
Assicurati che il codice di installazione Intercom sia nella pagina
Controlla la console per errori JavaScript

Intercom si apre ma il messaggio non è precompilato:

Assicurati di usare showNewMessage (non solo show)
Verifica che la tua stringa di domanda non abbia errori di sintassi

Funziona su desktop ma non su mobile:

Assicurati che il pulsante gestisca correttamente gli eventi touch
Verifica che il messenger mobile di Intercom sia abilitato nelle impostazioni

Esempio completo funzionante

Ecco un esempio completo pronto da copiare e incollare:

<!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>Hai bisogno di aiuto?</h2>
    <p>Clicca una domanda qui sotto per parlare con il nostro assistente AI:</p>
    <div class="quick-questions">
      <button class="ask-btn" onclick="askFin('Come si inizia?')">
        🚀 Per iniziare
      </button>
      <button class="ask-btn" onclick="askFin('Quali sono i vostri piani tariffari?')">
        💰 Prezzi
      </button>
      <button class="ask-btn" onclick="askFin('Come contatto il supporto?')">
        📞 Contatta il supporto
      </button>
    </div>
  </div>

  <!-- Il tuo codice di installazione Intercom va qui -->
  
  <script>
    function askFin(question) {
      if (window.Intercom) {
        window.Intercom('showNewMessage', question);
      } else {
        alert('La chat sta caricando, riprova tra un istante.');
      }
    }
  </script>
</body>
</html>

Prossimi passi

Ora che sai aggiungere pulsanti per domande rapide, considera di:

Analizzare i ticket di supporto per identificare le domande comuni
Fare A/B test su diverse formulazioni
Aggiungere i pulsanti prima sulle pagine ad alto traffico
Addestrare Fin con risposte personalizzate per le domande più frequenti
Implementare strategie di supporto proattivo per raggiungere i clienti prima che chiedano

Per saperne di più sulle capacità di Fin e su come trasforma la customer experience, leggi la nostra guida approfondita: Il futuro della customer experience: come gli agenti AI come Fin di Intercom trasformeranno il supporto.

Hai bisogno di aiuto per implementarlo?

Siamo specializzati in implementazioni Intercom e possiamo aiutarti a creare un'esperienza di supporto fluida con Fin AI.

Scopri i nostri servizi di implementazione Intercom →