Gestione degli script eseguibili (Snippet di codice)

Gli script eseguibili sono una funzionalità avanzata che ti consente di integrare ed eseguire codice direttamente nelle conversazioni con il tuo Agente.

Questa potente funzionalità ti consente di:

• Mostrare esempi di codice formattati correttamente

• Eseguire script e modificare l'interfaccia utente in tempo reale

• Creare esperienze interattive e dinamiche

• Fornire dimostrazioni tecniche immediate

Come aggiungere script eseguibili

1. Vai ai Contenuti del tuo Agente e crea o modifica un contenuto

2. Vai alla sezione "Avanzate: script eseguibili" e fai clic su "+ Nuovo snippet"

3. Nel pannello che si apre:

   1. Aggiungi un titolo allo snippet di codice

   2. Inserisci il codice

   3. Decidi se eseguire il codice nella pagina attivando la casella "Inserisci nella pagina ed esegui questo snippet" (disponibile solo per alcuni linguaggi).

   Questa casella ti consente di:

   1. Eseguire sempre lo snippet quando l'utente pone esattamente la stessa domanda del tuo contenuto (o una domanda abbastanza simile)

   2. Far eseguire lo snippet all'IA generativa (a discrezione del modello)

L'IA generativa utilizza il titolo dello snippet per decidere se e quando eseguirlo. Se vuoi che l'IA generativa esegua il tuo snippet, assicurati di scegliere nomi descrittivi e spiega nel prompt quando utilizzare lo snippet.

Linguaggi supportati

Puoi scegliere tra i seguenti linguaggi per il tuo snippet:

Linguaggio	Mostra snippet	Esegui snippet
text	✅	❌
javascript/jsx	✅	✅
typescript/tsx	✅	❌
json	✅	❌
css	✅	✅
xml	✅	❌
bash	✅	❌
python	✅	❌
cpp/csharp	✅	❌
php	✅	❌
ruby	✅	❌
html	✅	❌
markdown	✅	❌

Esempi pratici

• Obiettivo: evidenziare una sezione della pagina web

• Titolo: "Evidenzia la descrizione del prodotto"

• Linguaggio: JavaScript

• Inserisci nella pagina ed esegui questo snippet: casella di controllo selezionata

Codice:

window.evidenziaSezione = function(idSezione) {
    const sezione = document.getElementById(idSezione);
    sezione.style.boxShadow = '0 0 15px 5px #ffff00';
    setTimeout(() => {
        sezione.style.boxShadow = 'none';
    }, 3000);
}

Flusso della conversazione:

1. Utente: "Dove posso trovare la descrizione del prodotto?"

2. Agente:

   1. "La descrizione del prodotto si trova sotto il titolo, in alto a destra. Per aiutarti, l'ho evidenziata per alcuni secondi."

   2. [Inserisce ed esegue lo snippet 'Evidenzia sezione prodotto']

Vantaggi dell'uso di script eseguibili

• Crea interazioni più dinamiche e consapevoli del contesto

• Migliora l'esperienza utente con esempi visivi e interattivi

• Fornisce supporto tecnico immediato e pratico

• Ti consente di personalizzare l'interfaccia utente in tempo reale

• Semplifica la dimostrazione delle funzionalità del sito o dell'applicazione

Combinazioni avanzate di snippet

Gli snippet possono essere combinati strategicamente per creare interazioni più complesse:

Esempio: evidenziazione dinamica delle sezioni

Immagina di creare un'esperienza guidata in cui l'Agente evidenzia diverse parti della pagina durante una conversazione.

Potresti configurare:

1. Uno snippet CSS (tramite la domanda iniziale)

.highlight-pulse {
  animation: pulse 2s infinite;
  border: 2px solid #6366f1;
  border-radius: 4px;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

1. Uno snippet JavaScript (nella stessa domanda di apertura)

// Function to highlight the products section
function highlightProductsSection() {
    const productsSection = document.querySelector('.products-section');
    
    if (!productsSection) return; // Guard clause
    
    // Add the effect
    productsSection.classList.add('highlight-pulse');
    
    // Remove the effect after 5 seconds using requestAnimationFrame
    const startTime = performance.now();
    
    function removeHighlight(currentTime) {
        if (currentTime - startTime >= 5000) {
            productsSection.classList.remove('highlight-pulse');
            return;
        }
        requestAnimationFrame(removeHighlight);
    }
    
    requestAnimationFrame(removeHighlight);
}

1. Uno snippet JavaScript collegato al contenuto con la domanda "Dove si trova la sezione prodotti?"

// Using the function
highlightProductsSection();

In questo modo, quando l'utente apre la chat:

• Lo stile CSS viene iniettato immediatamente

• Viene definita la funzione JavaScript per evidenziare la sezione

Quando l'utente chiede "Dove si trova la sezione prodotti?", l'Agente attiverà il terzo snippet e quindi la funzione che evidenzia la sezione.

Questo approccio è particolarmente utile per:

• Tutorial guidati interattivi

• Onboarding di nuovi utenti

• Assistenza alla navigazione in pagine complesse

• Presentazioni di prodotti o servizi

Considerazioni importanti

1. Sicurezza: quando utilizzi l'opzione di esecuzione degli snippet, assicurati che il codice sia sicuro e non possa essere manipolato per eseguire azioni dannose

2. Trasparenza: fornisci sempre una spiegazione chiara di ciò che lo snippet fa o mostra

3. Accessibilità: non tutti gli utenti potrebbero vedere gli effetti visivi degli snippet, quindi fornisci sempre alternative testuali

4. Prestazioni: evita di sovraccaricare la pagina con troppi snippet eseguibili, che potrebbero rallentare l'esperienza utente

L'uso intelligente di script eseguibili può trasformare il tuo Agente in un potente strumento di supporto. Sperimenta con diversi tipi di snippet per creare un'esperienza utente coinvolgente e personalizzata, migliorando significativamente l'interazione tra gli utenti e il tuo sito web o la tua applicazione.