Documentazione

Framer

Aggiungi il tuo agente a un sito Framer usando il codice personalizzato.

Aggiungi il tuo agente AI a un sito Framer tramite codice personalizzato. Lo snippet si carica su ogni pagina una volta pubblicata.

In Agentkit, apri Channels → Website embed → Chat widget, attiva il canale e copia tutto il codice generato. Include uno script di inizializzazione inline e uno script separato che carica il widget.

Configurazione rapida

  1. Apri il tuo progetto in Framer.
  2. Nella barra laterale sinistra, clicca su Project Settings (l'icona a forma di ingranaggio).
  3. Seleziona la scheda Custom Code.
  4. Per la prima voce clicca su Add Script; altrimenti sull’icona +.
  5. Assegna allo script un nome riconoscibile (ad esempio Widget Agentkit).
  6. Incolla insieme entrambi i tag script generati nel campo Custom Code. Mantieni invariati l’URL dello script e l’ID dell’agente.
  7. Nel posizionamento, scegli End of <body> tag (Body End) — questa è l'opzione consigliata per i widget di chat.
  8. Scegli di caricarlo su All pages.
  9. Clicca su Save.
  10. Clicca su Publish in alto a destra per rendere subito attivo l'aggiornamento.

Non usare un esempio con un solo tag script e non inserire manualmente l’URL del widget. Dopo la pubblicazione, verifica che entrambi i tag <script> generati siano nel sorgente della pagina. Poi apri il widget e invia un messaggio di prova. Guida al widget JavaScript →

Perché a fine <body> e non nell'Head

Framer separa il codice personalizzato in Head Code e End of <body> Code. I widget di chat dovrebbero andare a fine <body> per non ritardare il primo rendering della pagina — questo corrisponde anche all'attributo async sullo script.

Head Code è riservato a ciò che deve essere eseguito molto presto, come i pixel di analytics o il preload dei font.

Installazione su pagine specifiche

Per caricare il widget solo su pagine specifiche:

  1. Seleziona una pagina nel pannello dei layer di Framer.
  2. Apri Page Settings (pannello a destra).
  3. Aggiungi il codice personalizzato lì invece che in Project Settings.

Il codice a livello di pagina viene eseguito solo su quella pagina specifica.

Piani e domini

Dopo la pubblicazione

Il codice personalizzato di Framer non viene eseguito nell'editor o nell'anteprima — solo sul sito pubblicato. Dopo aver cliccato su Save, clicca su Publish e poi apri l'URL live.

Risoluzione dei problemi

Il widget non appare nell'anteprima dell'editor.

  • È normale. Il Custom Code viene eseguito solo sul sito pubblicato.

Il widget non appare nemmeno sul sito pubblicato.

  • Conferma di aver cliccato sia Save sia Publish.
  • Controlla le restrizioni del dominio per il dominio Framer pubblicato.
  • Forza l'aggiornamento (⌘+Shift+R) per bypassare la cache del CDN.

Il widget lampeggia e poi scompare.

  • Controlla se ci sono transizioni di pagina o animazioni di Framer che potrebbero ricaricare il DOM. Il widget dovrebbe rimontarsi a ogni caricamento pagina — se non succede, contatta il supporto.

Test

  1. Apri l'URL pubblicato in una finestra in incognito.
  2. Cerca la chat bubble.
  3. Clicca per aprirla e invia un messaggio di prova.

Prossimi passi