Intro
How to get the badge
How to integrate it (embed)
Cancel Subscription
How to integrate it on Website Builders
Widget Page

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 left 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>
<a href="https://www.welobadge.com" 
  target="_blank" 
  rel="sponsored noopener" 
  style="position:absolute;left:-9999px;">Verified by Welo</a>

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 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/68f3a60b8464f4b683e4f84b_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/68f3a60b8687f0e7876ab676_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/68f3a60b5ea873d2f39ef288_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: 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/68f3a60b8abeb45efd67f9bd_Group%201597880551.png" alt="Welo Badge" />
    </a>
  </body>