Esempi e Configurazione
Guida completa per personalizzare AI Ask Widget
Indice
Quick Start
Installazione Base (ChatGPT)
La configurazione più semplice, solo ChatGPT:
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Your Brand"
defer></script>
Tutte le 5 AI
Configurazione multi-AI completa:
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Ask AI"
data-ai="chatgpt,claude,perplexity,gemini,grok"
defer></script>
AI Supportate
Il widget supporta 5 diverse AI. Puoi usarne una sola o combinarle.
| AI | Chiave | Colore | Descrizione |
|---|---|---|---|
| ChatGPT 🤖 | chatgpt |
● #10a37f | OpenAI ChatGPT - Default widget |
| Claude 🧠 | claude |
● #cc785c | Anthropic Claude — la domanda viene copiata negli appunti e claude.ai si apre pronta per l'incolla (Anthropic ha rimosso il prefill via URL a ott. 2025) |
| Perplexity 🔍 | perplexity |
● #20808d | Perplexity AI Search |
| Google AI Mode ✨ | gemini |
● #4285f4 | La modalità AI della Ricerca Google (udm=50) |
| Grok ⚡ | grok |
● #1da1f2 | xAI Grok (via X) — richiede login con account X |
Opzioni di Configurazione
Tutte le opzioni sono configurabili via attributi data-*:
| Attributo | Default | Descrizione |
|---|---|---|
data-brand |
"Ask AI" |
Nome/brand visualizzato sul pulsante principale |
data-ai |
"chatgpt" |
AI provider(s) da usare. Valori: chatgpt, claude, perplexity, gemini, grok. Usa virgola per multipli. |
data-color |
Auto (colore prima AI) | Colore esadecimale personalizzato (senza #). Es: b942f5 |
data-language |
Auto (dal lang della pagina) |
Lingua interfaccia. Valori: en, it, es, fr, de |
data-position |
"center" |
Posizione del widget: center, right, left |
data-analytics |
"false" |
Con "true" invia l'evento ai_ask_send al dataLayer (GA4/GTM). In ogni caso il widget emette il CustomEvent JS ai-ask:send |
data-questions |
Auto (da lingua) | Domande suggerite personalizzate (CSV o JSON) |
data-context-prefix |
"" |
Prefisso da aggiungere prima della domanda per impostare "AI Persona" |
data-default-question |
Auto (da lingua) | Domanda di fallback se l'utente non scrive nulla |
data-poweredby |
"true" |
Mostra badge "Powered by". Valori: true, false |
data-tools-url |
URL widget | URL personalizzato per il badge "Powered by" |
Esempi Pratici
Multi-AI Personalizzato
Usa 3 AI contemporaneamente con brand, lingua e colore personalizzati.
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Chiedilo all'AI!"
data-ai="chatgpt,claude,perplexity"
data-language="it"
data-color="b942f5"
defer></script>
Solo Claude
Configurazione con una sola AI specifica.
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Ask Claude"
data-ai="claude"
data-language="en"
defer></script>
Domande Personalizzate
Definisci le tue domande suggerite personalizzate.
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Il Mio Blog"
data-language="it"
data-questions="Come applico questa guida?, Esempio pratico?, Casi d'uso?"
defer></script>
AI Persona: Developer Helper
Imposta un contesto/persona per l'AI usando data-context-prefix.
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Dev Assistant"
data-ai="claude"
data-context-prefix="[YOU ARE A SENIOR DEVELOPER. Answer with practical examples.] "
data-language="en"
defer></script>
Senza Badge "Powered by"
Rimuovi il badge "Powered by" per un'integrazione più pulita.
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="My Company"
data-poweredby="false"
defer></script>
Tutte le 5 AI
Configurazione completa con tutte le AI supportate.
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Ask AI"
data-ai="chatgpt,claude,perplexity,gemini,grok"
data-language="it"
defer></script>
Configurazioni Avanzate
Domande in formato JSON
Per domande più complesse, usa il formato JSON:
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Tech Blog"
data-questions='["Spiega in parole semplici", "Mostra un esempio di codice", "Quali sono i pro e contro?"]'
defer></script>
AI Persona per Content Marketing
Esempio di AI persona per un blog di marketing:
<script src="https://www.matteobononi.it/tools/gpt-ask/js/ai-ask.min.js"
data-brand="Marketing Blog"
data-ai="chatgpt"
data-context-prefix="[SEI UN MARKETING STRATEGIST. Rispondi con esempi pratici e metriche.] "
data-language="it"
data-questions="Come applico questa strategia?, ROI stimato?, Case study simili?"
defer></script>
Colori Brand Personalizzati
Alcuni esempi di colori popolari:
b942f5
ef4444
3b82f6
22c55e
Multi-lingua Avanzato
Ogni lingua ha domande suggerite localizzate (mostrate come chips cliccabili), ad esempio:
- Inglese (en): "Explain this page in simple terms", "Summarize the key points", "Give me a practical example"
- Italiano (it): "Spiegami questa pagina in modo semplice", "Riassumi i punti chiave", "Fammi un esempio pratico"
- Spagnolo (es): "Explícame esta página de forma sencilla", "Resume los puntos clave", "Dame un ejemplo práctico"
- Francese (fr): "Explique-moi cette page simplement", "Résume les points clés", "Donne-moi un exemple pratique"
- Tedesco (de): "Erkläre mir diese Seite einfach", "Fasse die wichtigsten Punkte zusammen", "Gib mir ein praktisches Beispiel"
Misurare l'uso del widget (GA4 / GTM)
Con data-analytics="true" il widget invia {event: 'ai_ask_send', ai_provider: '...'} al dataLayer. In alternativa puoi ascoltare l'evento JavaScript:
window.addEventListener('ai-ask:send', function(e) {
console.log(e.detail); // {ai, question, url, version}
});
Privacy e Note
Privacy by Design
Il widget non raccoglie alcun dato. Non traccia utenti, non invia informazioni a server esterni, non usa cookies. È semplicemente un link intelligente che apre l'AI scelta con il contesto della pagina corrente.
Accessibilità Bot AI
Per funzionare al meglio, la tua pagina deve essere accessibile ai bot delle AI:
- Nessun paywall o login obbligatorio
- robots.txt configurato per permettere l'accesso
- Contenuto facilmente scansionabile
