Widgets

Welo Widgets Page

Look at all the welo Badges available, how to integrate them and much more, choose the one that best suits your business.

On this page you will find all the Welo widgets, what you can customize and how to integrate them properly.
‍
The name of your company, the link to your Welo Page and the other data to be replaced are available directly in your dashboard.

If you have doubts or don't know how to proceed, our dedicated support is at your disposal. Write to us and we will help you.

To install Welo Badge You must enter 2 lines of code on your site.
‍
The widget will appear at the bottom left: first as hoop, then after a few seconds it expands and shows the messages, clicking it opens your Welo Page in popups, without letting the user log out of your site.

Where to insert the codeEnter the snippet before closing the tag </body> of your site.

What you need to change in the snippet:

⚠️ I valori devono essere inseriti dentro le virgolette " ".
Non rimuovere mai le virgolette.


1) Data-URL (MANDATORY) It is the link of the Your Welo Page, you must replace:
INSERT_HERE_YOUR_WELO_PAGE with the link to your Welo Page:
https://www.welobadge.com/nome-azienda

‍
2) Data-company (RECOMMENDED) It is the Name of the company which will be shown in the widget messages, you must replace:
INSERT_HERE_THE_COMPANY_NAME

‍
with the real name (e.g. Amazon).

html Paste before </body>
<script
src="https://www.welobadge.com/widgets/welobadge-us.js"
data-url="INSERT_HERE_YOUR_WELO_PAGE"
data-company="INSERT_HERE_THE_COMPANY_NAME"
defer></script>
<a
href="https://www.welobadge.com"
target="_blank"
rel="sponsored noopener"
style="position:absolute;left:-9999px;">
  Verified by Welo</a>

Reviews widget

This widget allows you to show on your site number of verified reviews and average rating of your company on Welo.

Enter this snippet at the exact point where you want the widget to appear (footer, product page, Trust section, etc.):

html Paste where you want the widget to appear
<div class="welo-widget" data-welo="SLUG-OF-YOUR-COMPANY"></div>
<script
src="https://www.welobadge.com/widgets/widget.js"
data-align="center"
defer></script>

‍Replace SLUG-OF-YOUR-COMPANY With slug assigned by Welo (examples: welo, amazon, ebay etc...)

The Slug is the final part of the name assigned by Welo, used in the widget, corresponds to /company-name And it is Case Sensitive.

⚠️ Must be written all in lowercase,
‍
Correct example:
Pennywise
Wrong example: Pennywise
‍
Find the slug exact: in your Welo dashboard or in the link of your Welo Page

As an example: https://www.welobadge.com/Welo
‍
The part after the last “/” It is the Your company slug.
‍
The number of reviews and the rating are updated automatically every day.
‍
You don't need to reinstall anything, if you want to force an immediate refresh: change the parameter ? v= (e.g. ? v=1737) or clear the browser cache
Ctrl + F5 (Windows)/ Cmd + Shift + R (Mac)

⚙️ Customizable parameters

Data-Align
‍

Define where you want the badge to be displayed horizontally.
You can choose between:

‍Left to align it to the left
‍Center To keep it in the center
‍Right To move it to the right

If you don't specify anything, the badge is automatically placed in the center.

Widget Video Reviews

This widget allows you to show on your site the reviews verified by Welo in video format + images, with a premium and interactive design.

It's perfect for: Homepage/Product Page/Checkout/ Trust Section/Reviews, Landing page, Footer (or just before the footer) The widget automatically updates with the content available for your company on Welo.

html Paste where you want the widget to appear
<div class="welo-media-widget"
data-welo="SLUG-DELLA-TUA-AZIENDA"
data-country="EN"
data-only="media"
data-limit="12"
data-show-text="true"
data-theme="light"
data-url="https://www.welobadge.com/SLUG-DELLA-TUA_AZIENDA"></div>
<script src="https://www.welobadge.com/widgets/media-widget.js?v=4" defer></script>

‍Replace SLUG-OF-YOUR-COMPANY With slug assigned by Welo (examples: welo, amazon, ebay etc...)

Lo Slug is the final part of the name assigned by Welo, used in the widget, corresponds to /company-name And it is Case Sensitive.

⚠️ Must be written all in lowercase,
‍
Correct example:
welo
Wrong example: Welo
‍
Find the slug exact: in your Welo dashboard or in the link of your Welo Page

As an example: https://www.welobadge.com/Welo
‍
The part after the last “/” It is the Your company slug.
‍

⚙️ Customizable parameters

Data-welo (REQUIRED) It's your company's slug.
Example: data-welo=”Welo“
Note: it is case sensitive (welo ≠ Welo).
‍
Data-country (optional) Set the widget language.
Recommended values: IT (Italian)/ EN (English)
Example: DATA-Country="EN”
If you don't set it, the widget tries to understand it from the browser language.

Data-only (optional) Decide what to show in the widget.
Values: “media“= images + video or”videos“= video only
Example: data-only="video”

Data-limit (optional) Maximum amount of content to upload.
Example: data-limit="12"

data-url (optional but recommended) Link to the “See all reviews” button (insert the link of your Welo Page).

data-theme (optional) Sets the widget theme (background and colors). Values: "light" = light background, "dark" = dark background, "auto" = follows the device theme (default).
Example: data-theme="light"

Verified Tags

The Welo Verified Tags they are micro-widgets that you can insert next to phrases, sections or statistics to show that the information, results or partners indicated have been verified by Welo.

These tags increase transparency and help customers understand that the reported data is real, not marketing.

Copy and paste one of the following snippets Where do you want to show the verification (for example next to '+10,000 customers', 'Official XYZ partner', '95% orders delivered on time', etc.).

⚠️ Remember to replace LINK WELO PAGE with the full link to your official Welo verification page.(including https), it should be something like this;

https://www.welobadge.com/Name of your company
‍

Verified results

🟢 Show the badge with the words: “Results verified by Welo” Perfect for numerical data, statistics or business performance.

html Paste before </body>
<script
src="https://www.welobadge.com/widgets/widgetv1.js"
data-url="INSERISCI_QUI_IL_LINK_DELLA_TUA_WELO_PAGE"
data-align="left"
data-lang="US"
defer></script>

Verified partners

🟢 Show the badge with the words: 'Welo Verified Partners' Ideal next to logos or 'Our Partners' sections.

html Paste before </body>
<script
src="https://www.welobadge.com/widgets/widgetv2.js"
data-url="INSERISCI_QUI_IL_LINK_DELLA_TUA_WELO_PAGE"
data-align="left"
data-lang="US"
defer></script>

Verified Information

🟢 Show the badge with the words: “Information verified by Welo” Perfect for business statements (e.g. “100% Made in Italy”, “ISO Certificate”, “Secure Payments”).

html Paste before </body>
<script
src="https://www.welobadge.com/widgets/widgetv3.js"
data-url="INSERISCI_QUI_IL_LINK_DELLA_TUA_WELO_PAGE"
data-align="left"
data-lang="US"
defer></script>

⚙️ Customizable parameters

You can customize the behavior of the widget through simple attributes Date* inside the tag <script>.
‍
You don't need any additional configuration or extra code. Data-URL
It is the link to your official Welo page. It is used to link the badge to your verified analysis.
‍
Example:
https://www.welobadge.com/your-brand
‍

➡️ This parameter is required.
‍

‍Data-Align
‍

Define where you want the badge to be displayed horizontally.
You can choose between:

‍Left to align it to the left
‍Center To keep it in the center
‍Right To move it to the right

If you don't specify anything, the badge is automatically placed in the center.

‍Data-lang
Set the language of the badge text.
‍
You can use:IT for the Italian version
‍US for the English version
‍
If you don't indicate anything, the widget automatically recognizes the browser language and adapts accordingly.

Image widget

We recommend placing the widgets at strategic points such as the checkout, the forms, the registration or the 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

Welo Badge Certified Company

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="INSERT_HERE_YOUR_WELO_PAGE" class="link-block">
      <img src="https://www.welobadge.com/site/assets/d4bc63fcec25e42fddd1.png" alt="Welo Badge" />
    </a>
  </body>
        

Welo Classic Round Badge

Welo badge for certified company with black symbol on white background.

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="INSERT_HERE_YOUR_WELO_PAGE" class="link-block">
      <img src="/site/assets/b52030d0f292f166d719.png" alt="Welo Badge" />
    </a>
  </body>
        

Welo Badge Minimal

Welo logo with Certified Company text on a black and white background.

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="INSERT_HERE_YOUR_WELO_PAGE" class="link-block">
      <img src="/site/assets/d608d2cb671c867c99fe.png" alt="Welo Badge" />
    </a>
  </body>
        

Welo Certificates

Welo badge with 5 tick badges and text that indicates the achievement of 9 out of 9 security certifications.

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="INSERT_HERE_YOUR_WELO_PAGE" class="link-block">
      <img src="/site/assets/e8960a6861105add5304.png" alt="Welo Badge" />
    </a>
  </body>