<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Reflag Browser SDK</title>
</head>
<body style="background-color: white">
<div id="app"></div>
<span id="loading">Loading...</span>
<script>
const urlParams = new URLSearchParams(window.location.search);
const publishableKey = urlParams.get("publishableKey");
const flagKey = urlParams.get("flagKey") ?? "huddles";
const isBootstrapped = urlParams.get("bootstrapped") === "true";
</script>
<style>
body {
font-family: sans-serif;
}
#start-huddle {
border: 1px solid black;
padding: 10px;
}
</style>
<div id="start-huddle" style="display: none">
<button
onClick="reflag.requestFeedback({flagKey, position: {type: 'POPOVER', anchor: event.currentTarget}})"
>
Give feedback!
</button>
<button onClick="reflag.track(flagKey)">Start huddle</button>
</div>
<script type="module">
import { ReflagClient } from "./src/index.ts";
window.reflag = new ReflagClient({
publishableKey,
user: { id: "42" },
company: { id: "1" },
toolbar: {
show: true,
position: {
placement: "bottom-right",
},
},
bootstrappedFlags: isBootstrapped
? {
[flagKey]: {
key: flagKey,
isEnabled: true,
},
}
: undefined,
});
function setVisibility(isVisible) {
const startHuddleElem = document.getElementById("start-huddle");
if (startHuddleElem)
startHuddleElem.style.display = isVisible ? "block" : "none";
}
reflag.initialize().then(() => {
console.log("Reflag initialized");
document.getElementById("loading").style.display = "none";
if (isBootstrapped) {
const flag = reflag.getFlag(flagKey);
setVisibility(flag.isEnabled);
}
});
reflag.on("check", (check) =>
console.log(`Check event for ${check.key}`),
);
reflag.on("flagsUpdated", (flags) => {
console.log("Flags updated");
const flag = reflag.getFlag(flagKey);
setVisibility(flag.isEnabled);
});
</script>
</body>
</html>