Layout widget personalizzato Oct8ne

Layout widget personalizzato Oct8ne

Uno sviluppatore può creare dei link  personalizzati per accedere al covisore di oct8ne. 

Ciò consente una grande libertá quando si tratta di aggiungere elementi visivi accattivanti  che incoraggino i visitatori del sito a contattare gli agenti di vendita e ottenere consigli sui loro acquisti. 

Quando ci sono agenti connessi, tutti gli elementi del DOM marcati con la classe CSS "oct8ne-widget-on" saranno visibili. Non ci sono limitazioni sul tipo di elemento HTML o sulla sua posizione nel layout di pagina: questa classe può essere applicata a immagini, blocchi HTML come DIV o SPAN o a qualsiasi altro tipo di tag e questi possono essere posizionati in qulasiasi punto della web. La seguente parte di codice mostra un elemento di questo tipo e la sua personalizzazione usando gli stili in linea:


<body>

  ...

  <div class="oct8ne-widget-on" 
        style="display: none; 
               position: fixed; top: 0; right: 0; z-index: 9999">
      Parla con un esperto
   </div>

  ...

</body>


Quando il visitatore cliccherá sull'elemento, il visore di oct8ne si aprirà e inizierá una sessione di chat  con l'agente disponibile in quel momento.

Nota bene: È necessario assicurarsi che questi elementi siano inizialmente invisibili sulla pagina utilizzando stili in linea o fogli CSS, ad esempio impostando il loro stile in display: none. oct8ne li visualizzerà solo se rileverá agenti connessi e disponibili sulla piattaforma. 


Allo stesso modo, oct8ne mostrerà tutti gli elementi in cui la CSS class "oct8ne-widget-off" appare quando non ci sono agenti connessi. Il seguente blocco di codice contiene un esempio di implementazione di questo link nella pagina e la sua personalizzazione tramite il foglio di stile: 


HTML:

<body>

  ...

  <div class="oct8ne-widget-off" id="no-agents">
       <p> Scrivici 
          <small>Ti contatteremo appena possibile</small>
       </p>

   </div>

  ...

</body>

CSS:

#no-agents {
   display: none;
   position: fixed;
   z-index: 9999;
   right: 0;
   top: 0;
 }


Nota bene: È necessario assicurarsi che questi elementi siano inizialmente invisibili sulla pagina utilizzando stili in linea o fogli CSS, ad esempio impostando il loro stile in display: none. oct8ne li visualizzerà solo se rileverá agenti connessi e disponibili sulla piattaforma.


Se un visitatore clicca su questi elementi, si aprirà il modulo di contatto oct8ne.

Gli elementi possono coesistere sulla stessa pagina che utilizza entrambe le classi per visualizzare un messaggio o l'altro a seconda che ci siano agenti disponibili o meno:

<body>

  ...

  <div class="oct8ne-widget-on" style="display: none">
      Parla con un esperto
   </div>

  <div class="oct8ne-widget-off" style="display: none">
      Scrivici
   </div>

  ...

</body>


Le classi possono anche essere combinate nello stesso elemento per renderle visibili indipendentemente dal fatto che gli agenti siano disponibili o meno, con lo stesso testo e le stesse caratteristiche: 

<body>

  ...

  <div class="oct8ne-widget-on oct8ne-widget-off">
     Contattaci!
   </div>

  ...

</body>




    • Related Articles

    • Trigger personalizzati o custom

      I triggers di Oct8ne offrono la possibilità di interagire con il visitatore nel momento in cui sono state precedentemente definite circostanze specifiche nella sezione "Trigger" all'interno della dashboard di Oct8ne (ad esempio: tempo sulla pagina o ...

    • Informazioni contestuali

      Oct8ne consente di raccogliere una serie di dati che è possibile visualizzare nel pannello Oct8ne, nella sezione record e nel coviewer dell'agente. Queste sono informazioni aggiuntive che ogni client può trasferire a Oct8ne. Questi dati possono anche ...