Componente Sticky Contatto

Cos’è?
La sticky banner è un componente che presenta una posizione fissa (sticky) all’interno del browser mentre l’utente scrolla e naviga all’interno della pagina.

Responsiveness
La sticky banner si adatta a seconda delle dimensioni (sia esso mobile, tablet o desktop).

Dove viene utilizzato?
La sticky banner viene usata per condurre l’utente verso un funnel d’acquisto.

Come funziona?
Può essere utilizzata in due modi principali: direttamente in pagina o tramite un Experience Fragment da inserire in pagina.

1. Direttamente in pagina
   Un aspetto importante da notare è che la sticky banner non va inserita all'interno di una section.
   All'interno dell'editor della pagina desiderata, cliccare su "Drag components here" e selezionare il componente Sticky Banner dal pannello dei componenti.
   Una volta aggiunto, personalizzare il contenuto del banner, inserendo testo e call-to-action in base alle esigenze.
   Nella configurazione del componente, è possibile scegliere lo Sticky Type (ad esempio, "Sticky Contatto", "Mobile" se si desidera inserire un prezzo, oppure "Fisso"). È anche possibile decidere il numero delle CTA da visualizzare.
   Inoltre, si può selezionare lo Sticky Style, dove, flaggando l'opzione "Add Highlighted", si cambia il banner da un formato dark a uno white.
   Questo approccio è particolarmente utile quando si desidera creare e gestire il banner in modo mirato e specifico per una pagina.
   
   
2. Tramite un Experience Fragment
   Il processo inizia creando un nuovo Experience Fragment in AEM. Prima di tutto, accedere alla sezione Experience Fragments e creare un nuovo fragment.
   All'interno dell'XF, ripetere lo stesso procedimento precedente, trascinando il componente Sticky Banner nella sezione "Drag components here". Dopo aver configurato il banner e personalizzato il contenuto secondo le proprie necessità, il passo successivo è inserirlo in una pagina.
   Per farlo, accedere all'editor della pagina, aggiungere il componente Experience Fragment nella sezione "Drag components" e selezionare, sotto la sezione Variation, quello che contiene la sticky banner creata.
   Se non vengono pubblicati sia l'experience che la pagina nell'editor, il contenuto non sarà visibile online.
   Questo metodo consente di gestire e riutilizzare facilmente il componente in più pagine del sito, garantendo una maggiore efficienza nella modifica del contenuto.

È possibile configurare la visualizzazione dei pulsanti all'interno della sticky in base al dispositivo utilizzato. Per farlo, basta cliccare sul pulsante desiderato e selezionare l'icona del pennellino. Nella sezione "Display" è possibile scegliere tra :

• Only Desktop: il pulsante sarà visibile solo su desktop.
• Only Mobile: il pulsante sarà visibile solo su dispositivi mobili.
• Nessuna selezione: il pulsante sarà visibile sia su desktop che su mobile.

Cliccando sul pulsante e poi sulla chiave inglese compariranno i campi da compilare:

• Text: il testo che compare nel pulsante
• Text in Mobile: compilandolo la CTA si vedrà solo da mobile, non sarà necessario flaggare anche "Only Mobile" tramite il pennellino o nello style
• Link: inserire il numero di telefono preceduto da tel:

Inoltre è possibile scegliere se far comparire al click un popup o un form lead. In entrambi i casi, in pagina andrà poi inserito l'experience desiderato relativo al popup o al form leadm configurando poi la sticky con "open as popup" oppure "show form lead".