Pagina Dei Widget Welo

In questa pagina troverai tutti i widget welo, cosa protrai modificare e come farlo

Widget Base fisso (consigliato)

Il widget base è lo stesso presente sul nostro sito: un piccolo cerchio fisso e poco invasivo situato in basso a destra. Quando viene cliccato, apre un popup direttamente all’interno della pagina, senza reindirizzare l’utente al sito Welo.
‍
In questo modo, i clienti possono visualizzare la tua Welo Page senza mai lasciare il tuo sito. Per installarlo, ti basterà copiare il codice ricevuto via email (simile a quello qui sotto) e sostituire il link all’interno di data-url con l’URL della tua Welo Page, mantenendo le virgolette ".Il codice va inserito prima della chiusura del tag <body>.
‍
Dovrebbe apparire come questo:

<script 
  src="https://cdn.jsdelivr.net/gh/WeloVerify/welo-badge/welobadge-it.js?v=1" 
  data-url="https://www.welobadge.com/welo-page/tuo-nome-azienda" 
  defer>
</script>

Widget ad immagine

Consigliamo di posizionare i widget in punti strategici come il checkout, i form, la registrazione o il login, per massimizzarne l’efficacia.

Sono completamente personalizzabili: puoi modificarne colori, dimensioni ed effetti.
‍
È sufficiente avere una minima familiarità con il codice, come illustrato nella pagina dedicata.

Welo Badge Classico

Questo è il Badge Classico di welo, puoi integrarlo copiando il seguente codice:


  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        height: auto;
        background-color: #f5f5f7;
      }

      .link-block {
        display: inline-block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        border-radius: 12px;
        transition: transform 0.3s ease;
      }

      .link-block img {
        width: 100%;
        max-width: 200px;
        height: auto;
        transition: filter 0.3s ease, box-shadow 0.3s ease;
      }

      .link-block:hover img {
        filter: brightness(0.9);
      }

      .link-block:hover {
        transform: scale(1.015);
      }
    </style>
  </head>
  <body>
    <a href="https://www.welobadge.com/" class="link-block">
      <img src="https://cdn.prod.website-files.com/672c7e4b5413fe846587b57a/67ab430b246acf8dd48820e1_Group%201597880512.png" alt="Welo Badge" />
    </a>
  </body>

Welo Badge Classico Rotondo

Questo è il Badge Classico di welo, puoi integrarlo copiando il seguente codice:

<head>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        height: auto;
        background-color: #f5f5f7;
      }
      .link-block {
        display: inline-block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        border-radius: 12px;
        transition: transform 0.3s ease;
      }

      .link-block img {
        width: 100%;
        max-width: 200px;
        height: auto;
        transition: filter 0.3s ease, box-shadow 0.3s ease;
      }

      .link-block:hover img {
        filter: brightness(0.9);
      }

      .link-block:hover {
        transform: scale(1.015);
      }
    </style>
  </head>
  <body>
    <a href="https://www.welobadge.com/" class="link-block">
      <img src="https://cdn.prod.website-files.com/672c7e4b5413fe846587b57a/67ab4309a0e3858df0b379f1_Group%201597880445.png" alt="Welo Badge" />
    </a>
  </body>

Welo Badge Minimal

Questo è il Badge Classico di welo, puoi integrarlo copiando il seguente codice:

<head>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        height: auto;
        background-color: #f5f5f7;
      }

      .link-block {
        display: inline-block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        border-radius: 12px;
        transition: transform 0.3s ease;
      }

      .link-block img {
        width: 100%;
        max-width: 200px;
        height: auto;
        transition: filter 0.3s ease, box-shadow 0.3s ease;
      }

      .link-block:hover img {
        filter: brightness(0.9);
      }

      .link-block:hover {
        transform: scale(1.015);
      }
    </style>
  </head>
  <body>
    <a href="https://www.welobadge.com/" class="link-block">
      <img src="https://cdn.prod.website-files.com/672c7e4b5413fe846587b57a/67ab4308f66d6cd9bae8a0cf_Group%201597880552.png" alt="Welo Badge" />
    </a>
  </body>

Welo Certificati

Questo badge è ottimo per aziende che ci tengono a far vedere i certificati ottenuti.

<head>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        height: auto;
        background-color: #f5f5f7;
      }

      .link-block {
        display: inline-block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        border-radius: 12px;
        transition: transform 0.3s ease;
      }

      .link-block img {
        width: 100%;
        max-width: 250px;
        height: auto;
        transition: filter 0.3s ease, box-shadow 0.3s ease;
      }

      .link-block:hover img {
        filter: brightness(0.9);
      }

      .link-block:hover {
        transform: scale(1.015);
      }
    </style>
  </head>
  <body>
    <a href="https://www.welobadge.com/" class="link-block">
      <img src="https://cdn.prod.website-files.com/672c7e4b5413fe846587b57a/67ab431b08b94ebd87d86f10_Group%201597880551.png" alt="Welo Badge" />
    </a>
  </body>

Come Integrarlo sui Website Builder

Introduzione (homepage)

Introduzione

Widjet Welo