Embeddable Widgets

Quick Start

Get a widget running on your site in under 2 minutes.

1. Get an API key — Go to Settings → API & Integrations and create a new API key.
2. Copy your stylist/salon ID— Find it in the URL of your public profile (e.g. /stylists/abc-123).
3. Paste this snippetinto your website's HTML:

<iframe
  src="https://ratemystylist.com/embed/badge/YOUR_STYLIST_ID?key=rms_YOUR_KEY"
  style="width:100%;border:none;overflow:hidden"
  loading="lazy"
></iframe>

<script>
  window.addEventListener("message", function(e) {
    if (e.data?.type === "rms-resize") {
      document.querySelectorAll('iframe[src*="/embed/"]').forEach(function(f) {
        if (e.source === f.contentWindow) f.style.height = e.data.height + "px";
      });
    }
  });
</script>

The resize script is optional but recommended — it automatically adjusts the iframe height to fit the widget content.

Available Widgets

The :id parameter is the stylist profile ID (UUID) for stylist widgets, or the salon ID for salon widgets.

Authentication

Every widget request requires a valid API key. Keys are passed via the key query parameter or the Authorization header.

Query Parameter (recommended for iframes)

/embed/badge/STYLIST_ID?key=rms_YOUR_API_KEY

Authorization Header (for API calls)

Authorization: Bearer rms_YOUR_API_KEY

Customization

Accent Color

Override the default pink accent color by adding the accent query parameter with a hex color code (3 or 6 digits, no # needed):

<!-- Indigo accent -->
<iframe src="/embed/booking/ID?key=rms_KEY&accent=4f46e5" ...></iframe>

<!-- Teal accent -->
<iframe src="/embed/badge/ID?key=rms_KEY&accent=0d9488" ...></iframe>

<!-- Short hex (3 digits) -->
<iframe src="/embed/profile/ID?key=rms_KEY&accent=e60" ...></iframe>

The accent color automatically derives hover, light background, and text variants. No additional configuration needed.

CSS Variables

The following CSS custom properties are set on the widget body and drive all brand colors:

Accessibility

All widgets include built-in accessibility features:

• WCAG-compliant visible form labels and required field indicators
• Focus-visible ring outlines on all interactive elements
• Minimum 12px font size throughout (WCAG AA)
• SVG star rating icons (not text characters)
• prefers-reduced-motion support — animations are suppressed automatically
• Semantic HTML with proper ARIA attributes

Auto-Resize

Widgets emit a postMessage whenever their content height changes. Add this listener to your page to auto-resize the iframe:

window.addEventListener("message", function(event) {
  if (event.data?.type === "rms-resize") {
    // Find the iframe that sent the message
    document.querySelectorAll('iframe[src*="/embed/"]').forEach(function(frame) {
      if (event.source === frame.contentWindow) {
        frame.style.height = event.data.height + "px";
      }
    });
  }
});

Message Format

Height updates fire on initial load and whenever the DOM changes (e.g. booking step transitions, loading states).

API Reference

In addition to iframe widgets, you can call the REST API directly to build custom integrations. All endpoints require an API key via the Authorization: Bearer header.

Stylist Endpoints

Salon Endpoints

Booking POST Body

{
  "serviceId": "service-uuid",
  "date": "2026-04-10",
  "startTime": "2026-04-10T14:00:00.000Z",
  "guest": {
    "name": "Jane Doe",
    "email": "jane@example.com",
    "phone": "+15551234567"
  },
  "notes": "First visit, prefer low-maintenance style"
}

Query Parameters

Error Responses

Rate Limits

API calls are metered monthly per key. The counter resets on the 1st of each month. When you exceed your limit, all requests return 429 Too Many Requests until the next period.

Check your current usage in Settings → API & Integrations. Each API key shows its call count for the current period.

Domain Allowlist

Restrict which domains can use your API key. When configured, requests without a matching Origin or Referer header are rejected with 403.

["example.com", "staging.example.com", "localhost"]

• Domain matching is exact (no wildcards)
• If the allowlist is empty, all origins are accepted
• Free tier: 1 domain, Pro: 5 domains, Business: unlimited
• Manage domains in Settings or via the API keys PUT endpoint

Subscription Tiers

Upgrade your tier in Settings → Subscription Tiers.