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 dedicated page.

Welo Classic Badge

This is the welo Classic Badge, you can integrate it by copying the following code:

<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/67bf3724126e0f9a5e788bb0_Group%201597880512.png" alt="Welo Badge" />
    </a>
  </body>

Welo Classic Round Badge

This is the welo Classic Badge, you can integrate it by copying the following code:

<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/67bf3723728501c8816fe6e5_Group%201597880445.png" alt="Welo Badge" />
    </a>
  </body>

Welo Badge Minimal

This is the welo Classic Badge, you can integrate it by copying the following code:

<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/67bf3723c0db1b6da6576fd8_Group%201597880552.png" alt="Welo Badge" />
    </a>
  </body>

Welo Certificates

This badge is great for companies that want to show their certificates.

<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: 300px;
        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/67bf37234328f77db83b2b99_Group%201597880551.png" alt="Welo Badge" />
    </a>
  </body>

How to Integrate It on Website Builders

Introduction (homepage)

Intro

Widjet Welo