onairos
Version:
The Onairos Library is a collection of functions that enable Applications to connect and communicate data with Onairos Identities via User Authorization. Integration for developers is designed to be seamless, simple and effective for all applications
83 lines (76 loc) • 2.93 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Onairos Button Integration</title>
<!-- Minimal polyfills for Node globals (if needed) -->
<script>
window.process = { env: {} };
window.global = window;
</script>
<!-- Load React and ReactDOM from CDNs -->
<script
crossorigin
src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"
></script>
<!-- Load the UMD bundle for Onairos -->
<script src="./dist/onairos.umd.js"></script>
</head>
<body>
<!-- Container where the Onairos component will be mounted -->
<div id="onairos-container"></div>
<script>
// Wait for the page to fully load before rendering
window.addEventListener("load", function () {
// Check that React, ReactDOM, and our Onairos component are available
if (!window.React || !window.ReactDOM) {
console.error("React or ReactDOM is not loaded.");
return;
}
if (!window.Onairos) {
console.error("Onairos component is not available on the global scope.");
return;
}
// Use the default export if available
const OnairosComponent = window.Onairos;
// Define the props to pass to Onairos
const onairosProps = {
login: true,
buttonType: "pill",
textColor: "white",
textLayout: "right",
requestData: {
Small: {
type: "Personality",
descriptions: "Insight into your Interests",
reward: "10% Discount"
},
Medium: {
type: "Personality",
descriptions: "Insight into your Interests",
reward: "2 USDC"
},
Large: {
type: "Personality",
descriptions: "Insight into your Interests",
reward: "3.5 USDC"
},
},
className: "w-20 h-20 py-2 px-4 ml-5",
autoFetch: false,
webpageName: "Odysee",
proofMode: false
// Include additional props such as inferenceData, onComplete, etc.
};
// Render the Onairos component using ReactDOM.createRoot (React 18)
const container = document.getElementById("onairos-container");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(OnairosComponent, onairosProps));
});
</script>
</body>
</html>