What are they for, and how do you use them?

1. What Is a Widget?

A widget is a small, self-contained piece of functionality that you can drop into any web page without having to build it yourself. Think of it like a pre-built appliance — you do not need to know how a microwave works on the inside; you just plug it in and use it.

On a web page, a widget typically appears as a button, panel, or small interactive element. The RateMe widget is a single block of HTML and JavaScript that you paste into your page once. Your visitor sees a styled button; clicking it takes them directly to your review page on the social platform of your choice.

Why add a RateMe widget to your website?

No development work — paste one snippet and you are done.
Instant engagement — a prominent, clickable button encourages visitors to act while their experience is fresh.
More reviews — reducing the number of steps between your page and the review form significantly increases the number of completed reviews.
Social proof — a growing review count builds trust with future visitors and improves your search ranking.
Fully customisable — the button text, colours, size, and position are all under your control.

2. Configuring Your Tag in the Portal

Before placing the widget on your website you must first create and configure a Tag inside the RateMe portal. A Tag is the configuration record that tells the widget which social platform to link to, which domain it is allowed to run on, and how it should behave.

Step 1 — Select your Tag

Step 2 — Note your UUID

The portal has assigned a UUID (Universally Unique Identifier) to the Tag — a long string of letters and numbers that looks like this:Example UUID

2ee2c984-90e4-447c-aae5-4adf2ef12b7c

Copy this UUID and keep it to hand — you will paste it into the widget snippet when you embed it into your page. Every Tag has a different UUID; using the wrong one will load the wrong configuration.

Step 3 — Set the Website field

The Website field controls which domain is permitted to load this Tag:

Setting	Effect
Left blank	Any web page on any domain can load this Tag. Useful during development and testing.
Your domain entered	Only requests coming from that exact domain are served. All other domains receive an JSON formatted error and the widget will not appear.

⚠️ Warning: Wrong domain = silent failure If an incorrect domain is entered in the Website field the widget will receive a JSON error. Your visitors will not see an error message — the button simply will not work. Always double-check the domain after saving.

💡 Tip: www vs non-www Many browsers automatically redirect a bare domain to its www equivalent. If your widget stops working on certain browsers, try entering www.example.com instead of example.com. To check which version your site uses, open it in Chrome and read the address bar after the page has loaded — use exactly what you see there.

3. Placing the Widget on Your Page

The RateMe widget is a single, self-contained snippet. There is no external script file to load separately. Everything — the container, the link, and the styling — lives in one block of code that you paste into your page once.

How the snippet works

The snippet has two parts working together:

An empty <div> with the id rateme-widget-container — this is the placeholder that marks where the button will appear on your page.
An inline <script> that reads your UUID, builds a styled link pointing to https://rateme.club/r/{uuid}, and injects it into that container.

The complete snippet

Paste this entire block wherever you want the button to appear on your page. Replace the UUID value with your own.Complete widget snippet

<!-- RateMe Widget — paste where you want the button to appear -->
<div id="rateme-widget-container"></div>

<script>
(function() {
  var uuid = '2ee2c984-90e4-447c-aae5-4adf2ef12b7c';   // ← replace with your UUID

  var container = document.getElementById('rateme-widget-container');
  if (!container) return;   // safety check — exits silently if div not found

  container.innerHTML =
    '<a href="https://rateme.club/r/' + uuid + '" ' +
    'target="_blank" rel="noopener" ' +
    'style="display:inline-flex;align-items:center;gap:8px;
           padding:12px 22px;background:#FF6B35;color:#fff;
           border-radius:8px;font-family:sans-serif;font-size:15px;
           font-weight:600;text-decoration:none;border:none;cursor:pointer;">' +
    '⭐ Rate Us' +
    '</a>';
}());
</script>
<!-- End RateMe Widget -->

Customising the button appearance

Because the button is built by the script, all styling sits inside the style="..." string within the container.innerHTML assignment. You can change any of these values to match your site’s design. The table below lists the key properties:

Property	Default value	What it controls
background	#FF6B35	Button background colour
color	#fff	Text and icon colour
padding	12px 22px	Space inside the button
border-radius	8px	Corner roundness (0 = square, 50px = pill)
font-size	15px	Text size
font-weight	600	Text boldness
gap	8px	Space between icon and text

You can also change the button label — replace '⭐ Rate Us' with any text or emoji you prefer, for example '😊 Leave a Review' or '⭐ Review Us on Google'.

Example — dark pill button

Variation: dark pill style

<!-- RateMe Widget -->
<div id="rateme-widget-container"></div>

<script>
(function() {
  var uuid = 'YOUR-UUID-HERE';
  var container = document.getElementById('rateme-widget-container');
  if (!container) return;

  container.innerHTML =
    '<a href="https://rateme.club/r/' + uuid + '" ' +
    'target="_blank" rel="noopener" ' +
    'style="display:inline-flex;align-items:center;gap:10px;
           padding:14px 28px;background:#1F4E79;color:#fff;
           border-radius:50px;font-family:sans-serif;font-size:15px;
           font-weight:600;text-decoration:none;cursor:pointer;
           box-shadow:0 4px 14px rgba(0,0,0,0.25);">' +
    '⭐ Leave a Review' +
    '</a>';
}());
</script>
<!-- End RateMe Widget -->

Example — fixed floating badge

To make the button float in a fixed position on screen (e.g. bottom-right corner), wrap the container in a positioned div:Variation: floating badge

<!-- Floating wrapper -->
<div style="position:fixed;bottom:20px;right:20px;z-index:9999;">
  <div id="rateme-widget-container"></div>
</div>

<script>
(function() {
  var uuid = 'YOUR-UUID-HERE';
  var container = document.getElementById('rateme-widget-container');
  if (!container) return;

  container.innerHTML =
    '<a href="https://rateme.club/r/' + uuid + '" ' +
    'target="_blank" rel="noopener" ' +
    'style="display:inline-flex;align-items:center;gap:8px;
           padding:12px 22px;background:#FF6B35;color:#fff;
           border-radius:50px;font-family:sans-serif;font-size:15px;
           font-weight:600;text-decoration:none;cursor:pointer;
           box-shadow:0 4px 14px rgba(0,0,0,0.3);">' +
    '⭐ Rate Us' +
    '</a>';
}());
</script>
<!-- End RateMe Widget -->

💡 The rule of thumb The only part of the snippet you must change is the UUID value. Everything else — the colours, text, size, shape, and position — is optional. As long as the container div has id="rateme-widget-container" and the UUID in the script matches your Tag, the widget will work.

4. Single Social Platform — Skip the Ladder Menu

When you configure your Tag with multiple social platforms, visitors who click the widget are shown a short ladder menu first.

If you configure your Tag with only one social platform (for example, Google), the ladder menu is skipped entirely. A single click on the button takes the visitor directly to your Google review page — no intermediate step, maximum conversions.

💡 When to use a single-platform Tag When you only want to use one review or social site, you can always add others later to broaden your social media coverage. Every extra click reduces conversions, so going straight to the review site may makea small increase in the number of published reviews you receive.

Adding a brand icon to your single-platform button

When sending visitors directly to one platform, we recommend using that platform’s recognisable logo rather than a generic star. This immediately tells visitors where they are going. Two excellent free options are shown below.

Option A — Simple Icons (no setup required)

Simple Icons provides SVG brand logos via a direct CDN URL. Replace the brand name in the URL to switch icons. No account, no library, no setup — just an <img> tag.Simple Icons — Google logo

<!-- RateMe Widget with Simple Icons Google logo -->
<div id="rateme-widget-container"></div>

<script>
(function() {
  var uuid = 'YOUR-UUID-HERE';
  var container = document.getElementById('rateme-widget-container');
  if (!container) return;

  container.innerHTML =
    '<a href="https://rateme.club/r/' + uuid + '" ' +
    'target="_blank" rel="noopener" ' +
    'style="display:inline-flex;align-items:center;gap:10px;
           padding:12px 22px;background:#ffffff;color:#333;
           border:2px solid #e0e0e0;border-radius:8px;
           font-family:sans-serif;font-size:15px;
           font-weight:600;text-decoration:none;cursor:pointer;">' +
    '<img src="https://cdn.simpleicons.org/google" width="22" height="22" alt="Google"/>' +
    'Review us on Google' +
    '</a>';
}());
</script>
<!-- End RateMe Widget -->

You can also tint the icon by appending a hex colour to the URL:Simple Icons — tinted colour

<!-- Google icon in Google-brand blue -->
<img src="https://cdn.simpleicons.org/google/4285F4" width="22" height="22" alt="Google"/>

<!-- Other platforms: swap the name in the URL -->
<!-- cdn.simpleicons.org/facebook -->
<!-- cdn.simpleicons.org/tripadvisor -->
<!-- cdn.simpleicons.org/trustpilot -->
<!-- cdn.simpleicons.org/yelp -->

Option B — Font Awesome (most popular icon library)

Font Awesome is the most widely used icon library on the web. Add the stylesheet link to your page <head> once, then reference any icon with a simple <i> tag inside the widget HTML string.Step 1 — add to your <head> once

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"/>

Step 2 — widget snippet with Font Awesome Google icon

<!-- RateMe Widget with Font Awesome Google icon -->
<div id="rateme-widget-container"></div>

<script>
(function() {
  var uuid = 'YOUR-UUID-HERE';
  var container = document.getElementById('rateme-widget-container');
  if (!container) return;

  container.innerHTML =
    '<a href="https://rateme.club/r/' + uuid + '" ' +
    'target="_blank" rel="noopener" ' +
    'style="display:inline-flex;align-items:center;gap:10px;
           padding:12px 22px;background:#4285F4;color:#fff;
           border-radius:8px;font-family:sans-serif;font-size:15px;
           font-weight:600;text-decoration:none;cursor:pointer;">' +
    '<i class=\"fa-brands fa-google\" style=\"font-size:18px;\"></i>' +
    'Review us on Google' +
    '</a>';
}());
</script>
<!-- End RateMe Widget -->

Other Font Awesome social icons

<i class="fa-brands fa-google"></i>       <!-- Google -->
<i class="fa-brands fa-facebook"></i>     <!-- Facebook -->
<i class="fa-brands fa-tripadvisor"></i>  <!-- TripAdvisor -->
<i class="fa-brands fa-yelp"></i>        <!-- Yelp -->
<i class="fa-brands fa-trustpilot"></i>  <!-- Trustpilot -->

💡 Note: quote escaping inside the script string Because the icon tag sits inside a JavaScript string, any double quotes inside the HTML must be escaped as \". You can see this in the Font Awesome example above: class=\"fa-brands fa-google\".

5. Quick Reference Checklist

Log in to the RateMe portal and navigate to the Tags page.
Create a new Tag, give it a name, and save it.
Copy the UUID shown for your new Tag.
Set the Website field to your domain, or leave it blank for unrestricted access during testing.
If setting a domain, confirm whether your site uses example.com or www.example.com by checking the address bar in Chrome after the page loads.
Paste the complete widget snippet into your page HTML at the spot where you want the button to appear.
Replace the UUID value inside the script with the UUID you copied from the portal.
Adjust the style="..." string inside the script to match your site’s design — colours, padding, border-radius, and button text are all yours to change.
If using a single social platform, add a brand icon using Simple Icons or Font Awesome so visitors know where they are headed before they click.
Test in multiple browsers to confirm the button appears and the link works correctly.

RateMe.Club launches Widget for Webpage developers.

What are they for, and how do you use them?

1. What Is a Widget?

Why add a RateMe widget to your website?

2. Configuring Your Tag in the Portal

Step 1 — Select your Tag

Step 2 — Note your UUID

Step 3 — Set the Website field

3. Placing the Widget on Your Page

How the snippet works

The complete snippet

Customising the button appearance

Example — dark pill button

Example — fixed floating badge

4. Single Social Platform — Skip the Ladder Menu

Adding a brand icon to your single-platform button

Option A — Simple Icons (no setup required)

Option B — Font Awesome (most popular icon library)

5. Quick Reference Checklist

Like this:

Leave a Reply Cancel reply

RateMe.Club launches Widget for Webpage developers.

What are they for, and how do you use them?

1. What Is a Widget?

Why add a RateMe widget to your website?

2. Configuring Your Tag in the Portal

Step 1 — Select your Tag

Step 2 — Note your UUID

Step 3 — Set the Website field

3. Placing the Widget on Your Page

How the snippet works

The complete snippet

Customising the button appearance

Example — dark pill button

Example — fixed floating badge

4. Single Social Platform — Skip the Ladder Menu

Adding a brand icon to your single-platform button

Option A — Simple Icons (no setup required)

Option B — Font Awesome (most popular icon library)

5. Quick Reference Checklist

Share this:

Like this:

Leave a Reply Cancel reply