Welo Widgets Page

On this page you will find all the welo widgets, what you can modify and how to do it

Image customization

The default widget is the same as the one on our website: a small, fixed, and non-intrusive circle located at the bottom right corner. When clicked, it opens a popup directly within the page, without redirecting the user to the Welo website.
‍
This way, customers can view your Welo Page without ever leaving your site.To install it, simply copy the code received via email (similar to the one below) and replace the link inside data-url with the URL of your own Welo Page, keeping the quotation marks ". The code should be placed just before the closing <body> tag.
‍
It should look like this:

<script 
  src="https://cdn.jsdelivr.net/gh/WeloVerify/welo-badge/welobadge-us.js?v=1" 
  data-url="https://www.welobadge.com/en/welo-page/your-company-name" 
  defer>
</script>

Image widget

We recommend placing the widgets at strategic points such as the checkout, forms, registration or login, to maximize their effectiveness.

They are fully customizable: you can change their colors, sizes and effects.
‍
It is sufficient to have a minimum familiarity with the code, as illustrated in dedicated page.

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>

How to Integrate It on Website Builders

Introduction (homepage)

Intro

Widjet Welo