Mostrare una Barra Fluttuante sul web

Una Floating Bar (barra flottante) è un tipo di contenuto web che viene visualizzato nella parte superiore o inferiore della tua pagina, occupando l'intera larghezza della stessa. Inoltre, questa barra rimane fissa mentre gli utenti navigano nella pagina.

In questo articolo, imparerai a creare una Floating Bar e inserirla nel tuo sito web con Connectif.

  

Tempo di implementazione: 15 min.
Difficoltà: Bassa.
Quando utilizzarlo: Quando desideri evidenziare informazioni importanti senza interrompere la navigazione dell'utente.

PASSO 1: Creazione del contenuto web di tipo Floating Bar

1. Accedi al tuo Negozio di Connectif.

2. Vai su "Contenuto > Contenuto web" e fai clic su   Crea nuovo contenuto.

3. Seleziona il tipo di contenuto Floating Bar e assegnagli un nome.

Mostrare una floating bar sul tuo sito - 1-min.png

4. Nella scheda Generale, regola il colore di sfondo e seleziona la posizione della barra flottante (parte superiore o inferiore della pagina).

Mostrare una floating bar sul tuo sito - 2-min.png

5. Nella scheda Componenti, aggiungi quelli che desideri e modificali. Ad esempio, aggiungi un componente di tipo Testo per inserire un messaggio nella tua Floating Bar.

Mostrare una floating bar sul tuo sito - 3-min.png

6. (Opzionale). Aggiungi un link al testo facendo clic sul pulsante Inserisci link. Puoi anche aggiungere altri elementi, come variabili, se lo desideri.

Mostrare una floating bar sul tuo sito - 4-min.png

 

Nel nostro esempio, aggiungeremo un link alla pagina delle offerte.

7. Regola le opzioni di progettazione del testo come colore, tipografia, margini, ecc.

Mostrare una floating bar sul tuo sito - 5-min.png

8. Fai clic su  Salva per conservare le modifiche al design della Floating Bar.

 

PASSO 2: Creazione del workflow per mostrare la Floating Bar

9. Vai alla sezione Workflows e fai clic su   Crea nuovo workflow.

10. Seleziona   Crea workflow vuoto.

11. Modifica il nodo "Inizio" affinché venga attivato per l'intera lista di contatti, sia esistenti che nuovi, come mostrato nell'immagine.

Mostrare una floating bar sul tuo sito - 6-min.png

12. Aggiungi un nodo di tipo trigger "Alla visita della pagina" e modificalo per scegliere in quali pagine verrà visualizzata la Floating Bar.

Mostrare una floating bar sul tuo sito - 7-min.png

 

Nel nostro esempio, la Floating Bar verrà mostrata in tutte le pagine del sito.

13. Aggiungi un nodo di tipo azione "Invia contenuto web" e, nella sua configurazione, seleziona la tua Floating Bar. Fai clic su Avanti .

Mostrare una floating bar sul tuo sito - 8-min.png

14. Configura quando verrà mostrato il contenuto web al contatto che visita la tua pagina. Ad esempio, "Dopo alcuni secondi", per farlo apparire 5 secondi dopo l'arrivo del contatto sul tuo sito. Fai clic su Avanti .

Mostrare una floating bar sul tuo sito - 9-min.png

15. Mantieni attiva l'impostazione predefinita del nodo per fare in modo che la Floating Bar venga visualizzata solo una volta per contatto, come mostrato nell'immagine.

Mostrare una floating bar sul tuo sito - 10-min.png

16. Fai clic su Applica per salvare la configurazione del nodo.

17. Salva il tuo workflow e attivalo per determinare quando deve iniziare e, opzionalmente, quando deve terminare, per interrompere la visualizzazione della Floating Bar.

Mostrare una floating bar sul tuo sito - 11-min.png

 

Nel nostro esempio, il workflow verrà avviato automaticamente e si fermerà dopo 7 giorni.

 

 

Successo!
La tua Floating Bar è integrata nel tuo sito web.

 


Continua a imparare!

Per sfruttare al massimo il potenziale del tuo account Connectif, ti consigliamo di continuare con i seguenti articoli: