SS Labz Portal

Getting Started

Quick Start

Integrate the currency converter widget in minutes. Load the Javascript code bundle and use the custom HTML element tag. 

<!-- 1. Include script at the bottom of the body -->
<script src="widget.js"></script>

<!-- 2. Inject component tag anywhere -->
<currency-converter 
  api-url="https://ss-labz-currency-api.onrender.com"
  default-base="USD"
  default-target="auto">
</currency-converter>

CORS Whitelisting

The proxy backend enforces client security. Inbound HTTP requests from client domains must be registered in the whitelisting database, or else browsers will block access due to CORS restrictions.

To register a new domain origin dynamically, send a `POST` request to `/whitelist` using the correct authorization header: 

curl -X POST https://ss-labz-currency-api.onrender.com/whitelist \
  -H "Content-Type: application/json" \
  -H "X-Admin-Token: admin_secret" \
  -d '{"origin": "https://boutiquehotel.lk", "client_name": "Boutique Hotel Colombo"}'

Frontend Reference

Component Attributes API

Configure the Custom Element behaviour directly via standard HTML attributes:

Attribute Type Description Default
api-url String The baseline domain of your proxy backend. "https://ss-labz-currency-api.onrender.com"
theme String Presets: dark, light, glass, or midnight. "dark"
default-amount Number Starting value inside the amount input field. 100
default-base String Base currency (e.g. USD, EUR, GBP). "USD"
default-target String Target currency code. Set to "auto" to geolocate. "auto"

CSS Custom Variables

Custom properties let client developers style the widget to match their layout color schemes: 

currency-converter {
  --converter-primary: #ec4899;        /* Hover outlines and focus rings */
  --converter-primary-hover: #db2777;  /* Hover button backgrounds */
  --converter-bg: #1e1b4b;             /* Core background color */
  --converter-border: rgba(255,255,255,0.1); /* Dividers and boxes */
  --converter-radius: 20px;            /* Rounded corners */
  --converter-text-primary: #fdf2f8;   /* Core text color */
}

Proxy API Reference

Proxy REST Endpoints

The FastAPI proxy backend exposes the following paths:

  • GET /convert?base={USD}&target={EUR}&amount={100}: Calculates conversions.
  • GET /history?base={USD}&target={EUR}: Returns the 7-day conversion rate timeline.
  • POST /whitelist: Inserts dynamic client origins. Requires X-Admin-Token header.
  • GET /health: System health check.