Salta al contenuto
Nota bene: la traduzione in italiano di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.

Creare inviti all'azione (CTA)

Ultimo aggiornamento: 3 settembre 2025

Disponibile con uno qualsiasi dei seguenti abbonamenti, tranne dove indicato:

Utilizzate lo strumento delle chiamate all'azione (CTA) per creare pulsanti CTA, banner o pop-up da aggiungere alle vostre pagine HubSpot e attirare nuovi visitatori. È possibile aggiungere CTA anche a pagine esterne.

Prima di aggiungere una CTA a una pagina esterna, è necessario installare il codice di tracciamento HubSpot o installare il plugin HubSpot WordPress sul proprio sito WordPress. Dopo aver aggiunto una CTA, è possibile indirizzare i visitatori verso pagine specifiche, link a riunioni o URL esterni.

Sui dispositivi mobili, è possibile scegliere di attivare un layout reattivo o di nascondere la CTA su schermi piccoli nelle opzioni della CTA. Dopo aver pubblicato la CTA, imparate a creare un test A/B per la vostra CTA e ad analizzarne le prestazioni.

Progettare una CTA

Nell'editor CTA, personalizzare il design della CTA per attirare i visitatori. Quando si creano le CTA, si può anche utilizzare lo smart content per visualizzare versioni diverse della CTA in base alla categoria dell'utente. Per saperne di più sull'uso dei contenuti intelligenti nelle CTA.

  1. Nel tuo account HubSpot, passa a Marketing > CTA.
  2. In alto a destra, fare clic su Crea.
  3. In alto, selezionare la scheda Pop-up o la scheda Embed e pulsanti.
    • Le CTA a comparsa includono i seguenti tipi:
      • Banner: un banner permanente fissato nella parte superiore o inferiore della pagina. Il banner rimarrà quando i visitatori scorreranno la pagina.
      • Casella di pop-up: una casella di pop-up che appare in base a un orario prestabilito.
      • Slide-In: un banner che scorre da un angolo del sito. Il banner rimane mentre i visitatori scorrono la pagina.
    • Le CTA di tipo embed e button includono i seguenti tipi:
      • Embedded: un banner, una call-to-action o un pulsante che potete utilizzare sul vostro sito web o nelle e-mail di HubSpot per portare i potenziali clienti a pagine specifiche.
      • Immagine incorporata: un'immagine da utilizzare nelle pagine o nelle e-mail di HubSpot.
  4. Scegliete un modello in base al tipo di CTA che volete creare.
    • Ogni modello di CTA avrà moduli personalizzabili come immagini e campi di testo.
    • Ad esempio, è possibile selezionare un modello Click to chat per lanciare un link a WhatsApp, un modello Meeting Popup per visualizzare la pagina di prenotazione di una riunione o un modello Event per consentire ai visitatori di registrarsi a una conferenza o a un workshop,
  5. Nel pannello di sinistra, dalla scheda Aggiungi , aggiungete i moduli e modificate il layout della vostra CTA:
    • Per aggiungere altri contenuti alla CTA, fare clic e trascinare un nuovo modulo direttamente nel pannello destro dell'editor.
      • È possibile aggiungere un solo modulo Modulo (Nuovo editor) o Riunione a una CTA. Una singola CTA non può contenere sia un modulo che un modulo riunione.
      • Alcuni moduli possono essere aggiunti una sola volta, come il timer per il conto alla rovescia o i moduli video.
      • È possibile aggiungere video alle CTA; per saperne di più sui requisiti per l'aggiunta di video alle CTA.
    • Per modificare il layout della CTA, passare il mouse su un modulo e fare clic e trascinarlo in una nuova posizione.
    • Per duplicare il modulo, passare il mouse sul modulo e fare clic sull'icona duplicate.
    • Per eliminare il modulo, passare il mouse sopra il modulo e fare clic sull'icona deletedelete.

cta-drag-drop.

    • Per modificare un modulo, fare clic sul modulo.
      • Nel pannello di sinistra è possibile modificare il contenuto e il design del modulo.
      • Per chiudere una CTA a comparsa dopo che il visitatore ha inviato il modulo, durante la personalizzazione del modulo è possibile attivare l'interruttore Chiudi dopo l'invio .

ctas-create-form-close

  1. Nel pannello di sinistra, fare clic sulla scheda Contenuto per gestire i moduli.
    • Per modificare un modulo, fare clic sul nome del modulo. Nel pannello di sinistra, è possibile modificare il contenuto e il design del modulo. Nei moduli di testo ricco , è possibile utilizzare gli assistenti AI per creare o perfezionare il contenuto delle CTA.
    • Per eliminare un modulo, passare il mouse sul modulo e fare clic sull'icona delete di eliminazione.
  2. Nel pannello di sinistra, fare clic sulla scheda Progettazione per personalizzare e visualizzare l'anteprima della CTA.
    • Per visualizzare l'anteprima della CTA su pagine specifiche, in alto a destra fare clic su Anteprima. Quindi, fare clic sul menu a discesa Anteprima su una pagina specifica e selezionare la pagina di HubSpot di cui visualizzare l'anteprima della CTA.
    • Per personalizzare l'aspetto della CTA, selezionare una delle seguenti opzioni. Quindi, configurare le modifiche nel pannello di sinistra.
      • Posizione: per le CTA con banner adesivo, è possibile selezionare una posizione superiore o inferiore. Per le CTA a scorrimento, è possibile posizionare la CTA in alto a sinistra, in basso a sinistra, in alto a destra o in basso a destra della pagina.
      • Dimensionamento: configura l'altezza della CTA; è possibile attivare l'opzione per impostare automaticamente l'altezza in base al contenuto della CTA.
      • Layout: configura il layout della CTA. È possibile aggiungere un padding al contenuto della CTA. Si può anche attivare l'opzione per abilitare un layout reattivo. Con un layout reattivo, le colonne della CTA si impileranno verticalmente sugli schermi piccoli.
      • Stili: impostare gli stili della CTA, come il carattere principale, il bordo e l'ombra della CTA. È possibile utilizzare font personalizzati con la CTA; per saperne di più sull'utilizzo di font personalizzati con i contenuti di HubSpot.
      • Sfondo: imposta uno sfondo per la CTA; si può scegliere di impostare un colore di sfondo o di caricare un'immagine di sfondo.
      • Opzione di chiusura: per le CTA con riquadro a comparsa, è possibile attivare l'opzione che consente ai visitatori di chiudere la CTA quando fanno clic in un punto qualsiasi al di fuori del riquadro a comparsa. Quando questa opzione è disattivata, i visitatori possono chiudere la CTA solo utilizzando l'icona di chiusura.

Progettare una CTA HTML

Per creare una CTA HTML incorporata personalizzata e applicare temi o CSS personalizzati:

  1. Nel tuo account HubSpot, passa a Marketing > CTA.
  2. In alto a destra, fare clic su Crea.
  3. In alto, fare clic sulla scheda Incorporamenti e pulsanti.
  4. Nel menu della barra laterale sinistra, spostarsi su Avanzate. Selezionare quindi HTML incorporato.
  5. Nel pannello di sinistra, fare clic sul menu a discesa Collegamento a e selezionare un'opzione a cui reindirizzare la CTA:
    • Indirizzo e-mail: creare un link mailto. Per aprire questo link in una nuova pagina, selezionare la casella di controllo Apri link in una nuova scheda.
    • Download di file: collegare la CTA a un file nel file manager. Selezionate un file esistente o caricatene uno nuovo, quindi selezionate la casella di controllo Apri link in una nuova scheda se volete che i visitatori che fanno clic sul pulsante CTA visualizzino l'immagine in una nuova finestra del browser.
    • Collegamento alla riunione: collegare la CTA a un collegamento a una riunione di HubSpot. Fare clic sul menu a tendina Scegli un link alla riunione, quindi selezionare un link alla riunione. Per aprire il link in una nuova pagina, selezionare la casella di controllo Apri il link in una nuova scheda.
    • Una delle vostre pagine: collegate la CTA a una delle vostre pagine HubSpot o a un post del blog. Fare clic sul menu a discesa Pagina e selezionare una pagina o un post. Il link del pulsante CTA sarà legato all'ID della pagina e qualsiasi modifica dell'URL della pagina aggiornerà automaticamente il link del pulsante CTA. Per aprire il link in una nuova pagina, selezionare la casella Apri link in una nuova scheda.
    • URL: collega la CTA a una pagina esterna a HubSpot. Nel campo URL del link, inserire l'URL del sito web a cui si desidera indirizzare i visitatori. Per aprire il link in una nuova pagina, selezionare la casella Apri link in una nuova scheda.
    • CTA: utilizzare la CTA personalizzata per attivare un banner adesivo, una casella pop-up o una CTA a scorrimento.
  6. Nel campo Contenuto del pulsante, inserire il testo della CTA.

ctas-create-html

  1. Per personalizzare ulteriormente il design della CTA, fare clic su Avanzate.
  2. Nella pagina Avanzate è possibile aggiungere classi o regole CSS personalizzate:
    • Classi CSS personalizzate: inserire una classe personalizzata per la CTA. Utilizzare le classi personalizzate per applicare stili di design, come le famiglie di caratteri, a più CTA nel sito web. Ogni classe CSS personalizzata deve essere inclusa nel foglio di stile CSS utilizzato nelle pagine di HubSpot.
    • Regole CSS personalizzate: aggiungere regole personalizzate per applicare uno stile in linea specifico alla CTA.
      • Per aggiungere una nuova regola CSS, fare clic su Aggiungi uno o + Aggiungi e configurare il selettore e lo stile.
        • Selettore: inserire un selettore CSS. Questo valore è facoltativo e sarà combinato con il selettore della CTA. Ad esempio, se il selettore inserito è :hover, il selettore combinato diventa ${ctaSelector}:hover
        • Stile: inserire una regola di stile CSS personalizzata da applicare al selettore configurato. È possibile inserire uno stile senza inserire un selettore. Ad esempio, color: yellow;.

cta-html-custom-css

  1. Per modificare una regola CSS esistente, passare il mouse sulla regola e fare clic sull'icona edit.
  2. Per clonare una regola CSS, passare il mouse sulla regola e fare clic sull'icona duplicate clone.
  3. Per gestire la priorità delle regole CSS, fare clic e trascinare ogni regola per disporla in ordine di priorità.
  4. Per rimuovere una regola CSS, passare il mouse sulla regola e fare clic sull'icona delete delete.
  5. Per applicare alle CTA lo stesso HTML e le stesse classi delle CTA precedenti, selezionare la casella di controllo Usa markup precedente. Se nelle pagine sono presenti fogli di stile CSS che definiscono le CTA precedenti, la selezione di questa casella di controllo consentirà alla CTA HTML di adottare gli stessi stili.
  6. Per terminare l'impostazione del design della CTA, fare clic su Salva e applica.

ctas-create-html-legacy-markup

Personalizzare dove e quando viene visualizzato il banner adesivo, il riquadro a comparsa o la CTA a scorrimento.

Se si è impostato un banner adesivo, una casella pop-up o una CTA a scorrimento, è possibile indirizzare i visitatori scegliendo quando far apparire questa CTA sul sito. Per saperne di più sull'aggiunta di CTA alle pagine.

È possibile utilizzare i filtri per combinare più serie di regole su quali visitatori vedano la CTA. Per saperne di più sulla configurazione delle regole di targeting.

Attivazione

Selezionare un trigger di attivazione per determinare quando la CTA verrà visualizzata sulla pagina. La CTA verrà visualizzata una volta soddisfatta la prima attivazione selezionata.

  1. In alto, fare clic sulla scheda Targeting .
  2. Nella sezione Quando deve essere visualizzata, fare clic per attivare l'interruttore accanto ai trigger di attivazione che si desidera utilizzare:
    • Attivazione al clic del pulsante: la CTA apparirà quando un visitatore fa clic su un pulsante. Scoprite come impostare le CTA a comparsa in modo che si attivino al clic di un pulsante. Per impostazione predefinita, questa opzione è sempre attiva.
      • Configurate questa opzione nelle vostre pagine HubSpot con un modulo pulsante predefinito o nelle vostre pagine esterne personalizzando la classe di un pulsante.
      • Per impostare questa attivazione su una pagina esterna, è necessario installare il codice di tracciamento di HubSpot .
    • Trigger on page scroll: la CTA appare quando il visitatore ha superato una determinata percentuale della pagina.
    • Trigger on exit intent: la CTA appare quando il visitatore mostra l'intenzione di uscire.
      • Su desktop, la CTA appare quando il visitatore sposta il cursore sulla barra superiore della finestra del browser.
      • Su mobile, la CTA apparirà quando:
        • Il visitatore seleziona il pulsante indietro del browser, nel tentativo di navigare verso una pagina precedente.
        • Il visitatore riduce a icona lo schermo del browser e poi ritorna sul vostro sito web con lo stesso browser.
    • Attivazione dopo il tempo trascorso: la CTA appare dopo il numero di secondi specificato.
    • Attivazione dopo l'inattività: la CTA apparirà dopo che il visitatore è rimasto inattivo per un determinato numero di secondi.

ctas-create-targeting

URL del sito web

Aggiungete la logica condizionale per URL specifici di pagine web o valori di parametri di query nella stessa scheda Targeting . Per impostazione predefinita, la CTA viene visualizzata su tutte le pagine.

  1. Per mostrare la CTA quando un visitatore si trova su un URL specifico del sito web, nella sezione URL del sito web :
    • Fare clic sul primo menu a tendina e selezionare URL sito web.
    • Fare clic sul secondo menu a discesa e selezionare una regola di targeting.
    • Inserire i criteri della regola nel campo di testo.
  2. Per mostrare la CTA quando un visitatore si trova su una pagina web il cui URL include parametri di query specifici:
    • Fare clic sul primo menu a discesa e selezionare Parametro di query.
    • Nel primo campo di testo, inserire il nome del parametro di query.
    • Fare clic sul secondo menu a discesa e selezionare una regola di targeting.
    • Nel secondo campo di testo, inserire il valore del parametro di query.
  3. Per aggiungere un'altra regola, fare clic su Aggiungi regola.
  4. Per escludere le chiamate all'azione da alcune pagine, fare clic su Aggiungi regola di esclusione. Ad esempio, è possibile aggiungere un'esclusione per una pagina di informativa sulla privacy.

Visitatori e frequenza

  1. Nella sezione A chi verrà mostrata , impostare il pubblico per la CTA. È possibile scegliere tra le seguenti opzioni:
    • Tutti i visitatori: la CTA verrà visualizzata da tutti i visitatori.
    • Visitatori filtrati: la CTA apparirà solo ai visitatori specificati.
  2. Nella sezione Con quale frequenza verrà visualizzata , impostare la frequenza della CTA. Fare clic sul menu a discesa Mostra di nuovo e selezionare una delle seguenti opzioni:
    • Dopo un determinato periodo di tempo: la CTA apparirà di nuovo dopo il periodo di tempo specificato.
    • Ripeti: la CTA apparirà ogni volta che il visitatore naviga verso le pagine web selezionate ed esegue l'azione di attivazione, anche se ha già interagito con essa.
    • Non mostrare più: non visualizzare mai più la CTA allo stesso visitatore.

ctas-create-specified


Personalizzare le opzioni della CTA

Nelle schedeOpzioni , personalizzare diverse opzioni della CTA, come la visualizzazione o meno della CTA su dimensioni ridotte, le campagne associate e la programmazione della CTA.

  1. Nella parte superiore, fare clic sulla scheda Opzioni .
  2. Per i banner adesivi, i riquadri a comparsa o le CTA a scorrimento, è possibile nascondere la CTA su schermi di piccole dimensioni. Nella sezione Dimensioni schermo ridotte, selezionare la casella di controllo Disattiva su dimensioni schermo ridotte.
  3. Se si dispone di un abbonamento a Marketing Hub Professional o Enterprise, è possibile associare la CTA a una campagna:
    • Per associare la CTA a una campagna esistente, fare clic sul menu a discesa Campagna e selezionare una campagna.
    • Per associare la CTA a una nuova campagna, fare clic sul menu a discesa Campagna e selezionare Crea campagna. Quindi, continuare a impostare la campagna.
    • Se non si è mai creata una campagna, fare clic su Crea una campagna. Quindi, continuare a impostare la campagna.
  4. Configurare il modo in cui si desidera monitorare i clic con la CTA. Selezionare una delle seguenti opzioni:
    • Traccia i clic tramite reindirizzamento: traccia i clic sulla CTA indirizzando i visitatori a un URL iniziale, che associa il clic alla CTA, prima di reindirizzarli alla pagina finale. Questa opzione è selezionata per impostazione predefinita.
    • Traccia i clic attraverso il browser: traccia i clic in modo asincrono attraverso il browser del visitatore. Questa opzione consente di utilizzare i tag di ancoraggio, poiché non ci sono reindirizzamenti, la CTA indirizzerà i visitatori all'URL impostato.
  5. Per i banner adesivi, i riquadri a comparsa o le CTA a scorrimento, è possibile programmare la data di visualizzazione di una CTA:
    • Per programmare quando la CTA inizia a essere visualizzata, attivare l'interruttore Pianifica per dopo. Quindi, selezionare una data e un'ora di inizio.
    • Per programmare quando la CTA smette di essere visualizzata, attivare l'interruttore Imposta data e ora di non pubblicazione . Selezionare quindi una data e un'ora di fine .

ctas-create-options

Pubblicare la CTA

Una volta terminata l'impostazione della CTA, pubblicarla per renderla attiva.

  1. In alto a destra, fare clic su Rivedi e pubblica.
  2. Nel pannello di destra, rivedere la CTA, quindi fare clic su Pubblica ora. La CTA verrà pubblicata automaticamente sulle pagine desiderate.
L'articolo è stato utile?
Questo modulo viene utilizzato solo per il feedback della documentazione. Scopri come ottenere assistenza con HubSpot.