Welo Widgets Page

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

Image customization

To view the codes, just click on the desired badge: a drop-down menu will open with the code. Remember that you can customize the widget in terms of dimensions, effects and much more through the
‍
This way, customers can view your Welo Page without ever leaving your site.

To install it, just copy the code received via email (similar to the one below) and replace the link with the URL of your Welo Page. The code must be entered before closing the tag <body>.

It should look like this:

<script
src=” https://cdn.jsdelivr.net/gh/WeloVerify/ welo-badge/welobadge-it.js? v=1" data-url=” https://www.welobadge.com/ welo-page/amazon-com” 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