Web Mobile SDK
Getting Started
Embed the HoppaRide booking widget in a web page. The widget loads as a single JS + CSS bundle — no build step or native SDK required.
You’ll need three things:
- A jwt token (
token) — obtained from HoppaRide by your backend (see below). - A Google Maps JavaScript API key, restricted to your page’s origin.
- The bundle URL for
eliferide-sdk.cssandeliferide-sdk.umd.js.
Get a session token
The widget authenticates the passenger with a session token. This token is issued by HoppaRide — your backend requests it, never the browser.
- HoppaRide issues you partner credentials (a partner name + key).
- Your backend calls the HoppaRide token endpoint with those credentials and the passenger’s details (name, email, and a phone number in E.164 format, e.g.
+1234567890) and receives anaccess_token. - Your backend returns that
access_tokento your page, which passes it toinitSDKasses.
Keep your partner credentials on your server — never include them in client-side code. The token endpoint URL is provided to you together with your partner credentials.
Minimal initialization
Load the styles, add a sized mount element, load the bundle, then call initSDK:
<link rel="stylesheet" href="https://YOUR_CDN/eliferide-sdk.css" />
<div id="er-root" style="width:100vw;height:100vh"></div>
<script src="https://YOUR_CDN/eliferide-sdk.umd.js"></script>
<script>
window.ERRideSDK.ERSDKManager.initSDK({
mountEl: '#er-root',
googleApiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
token: 'ACCESS_TOKEN',
currency: 'GBP', // ISO-4217
locale: 'en',
theme: { colorPrimary: '#1565C0', colorSecondary: '#FF7043' },
});
</script>These options are required:
Option | Description |
| CSS selector or element to render into. Must have a definite size. |
| Google Maps JavaScript API key, restricted to your origin. |
| The user's session token, issued by your backend. |
| ISO-4217 code (e.g. |
| Language code (e.g. |
| Primary brand / button colour. |
| Accent colour (links, selected states). |
Working example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Book a ride</title>
<link rel="stylesheet" href="https://YOUR_CDN/eliferide-sdk.css" />
<style>
html, body { margin: 0; height: 100%; }
#er-root { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="er-root"></div>
<script src="https://YOUR_CDN/eliferide-sdk.umd.js"></script>
<script>
// Your backend returns a session token for the signed-in user.
// The phone number used to mint it must be in E.164 format (e.g. +447911123456).
async function getSession() {
const res = await fetch('/api/eliferide/session', { method: 'POST' });
const { access_token } = await res.json();
return access_token;
}
(async () => {
const ses = await getSession();
const handle = window.ERRideSDK.ERSDKManager.initSDK({
mountEl: '#er-root',
googleApiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
ses,
currency: 'GBP',
locale: 'en',
theme: { colorPrimary: '#1565C0', colorSecondary: '#FF7043' },
onLogout: () => location.assign('/login'),
onSessionInvalid: async () => {
handle.updateSession(await getSession()); // re-auth without reloading
},
});
})();
</script>
</body>
</html>Expected result
The widget fills #er-root and opens on the booking home screen: a map and a “Where to?” destination search. From there the passenger can search a destination, view fare quotes, choose a vehicle, pay by card, and follow live driver tracking — all themed with your colours and rendered in your chosen language and currency.
If a required option is missing or invalid, the widget does not start and logs a clear ERRideSDK: … message to the browser console. See Errors & troubleshooting for the full list.
Example structure
The page always has the same four parts, in this order:
<head>
└─ eliferide-sdk.css styles
<body>
├─ <div id="er-root"> sized container the widget renders into
├─ eliferide-sdk.umd.js the bundle (defines window.ERRideSDK)
└─ your script:
1. get a session token from your backend
2. ERSDKManager.initSDK({ … }) → returns a handle
3. use the handle to update or remove the widgetinitSDK returns a handle for controlling the widget at runtime without reloading: updateSession(ses), setLocale(...), setTheme(...) / setPrimaryColor(...), setCurrency(...), setPickup(...) / setDropoff(...), and unmount().
Optional init options include env ('dev' for sandbox, default 'prod'), font, pickup / dropoff to pre-fill a location, and the onLogout, onSessionInvalid, and onExit callbacks.
Reference
Supported currencies
Pass one of these ISO-4217 codes as currency.
Code | Currency | Region |
GBP | Pound sterling | United Kingdom |
USD | US dollar | United States |
EUR | Euro | Eurozone |
CNY | Chinese yuan (Renminbi) | China |
JPY | Japanese yen | Japan |
HKD | Hong Kong dollar | Hong Kong |
THB | Thai baht | Thailand |
VND | Vietnamese đồng | Vietnam |
MXN | Mexican peso | Mexico |
AUD | Australian dollar | Australia |
PHP | Philippine peso | Philippines |
CAD | Canadian dollar | Canada |
KRW | South Korean won | South Korea |
SGD | Singapore dollar | Singapore |
TRY | Turkish lira | Türkiye |
AED | UAE dirham | United Arab Emirates |
SAR | Saudi riyal | Saudi Arabia |
INR | Indian rupee | India |
IDR | Indonesian rupiah | Indonesia |
MYR | Malaysian ringgit | Malaysia |
CHF | Swiss franc | Switzerland |
DKK | Danish krone | Denmark |
SEK | Swedish krona | Sweden |
NOK | Norwegian krone | Norway |
ZAR | South African rand | South Africa |
PLN | Polish złoty | Poland |
Supported languages
Pass one of these codes as locale.
Code | Language |
en | English |
zh | Chinese (Simplified) |
ja | Japanese |
ar | Arabic (right-to-left) |
vi | Vietnamese |
pt | Portuguese |
tr | Turkish |
es | Spanish |
fr | French |
it | Italian |
de | German |
da | Danish |
sv | Swedish |
no | Norwegian |
nl | Dutch |
Errors & troubleshooting
Initialization errors are thrown synchronously and logged to the browser console.
Message / symptom | Cause | Fix |
ERRideSDK: | No session token passed | Pass |
ERRideSDK: | No Maps key passed | Pass |
ERRideSDK: | No currency passed | Pass a |
ERRideSDK: unsupported currency "…" | Code not in Supported currencies | Use a listed ISO-4217 code |
ERRideSDK: | No locale passed | Pass a |
ERRideSDK: unsupported locale "…" | Code not in Supported languages | Use a listed language code |
ERRideSDK: primary colour is required (theme.colorPrimary or themeColorHex) | No primary colour | Set |
ERRideSDK: secondary colour is required (theme.colorSecondary) | No secondary colour | Set |
ERRideSDK: invalid font "…" |
| Use a bundled family name or |
ERRideSDK: | Empty | Omit it, or pass a valid token |
Blank / zero-height widget | Mount element has no size | Give the mount element a definite width and height |
| Maps key not allowed for this origin | Add your origin to the key's HTTP-referrer restrictions |
Session expires during use | Backend returned 401 | Handle |
On this page
- Web Mobile SDK