2024-09-10 09:50:11 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>Widget Embed</title>
|
|
|
|
|
<script
|
|
|
|
|
crossorigin
|
|
|
|
|
src="https://unpkg.com/react@18/umd/react.production.min.js"
|
|
|
|
|
></script>
|
|
|
|
|
<script
|
|
|
|
|
crossorigin
|
|
|
|
|
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
|
|
|
|
|
></script>
|
|
|
|
|
<link rel="stylesheet" href="./style.css" />
|
|
|
|
|
<script src="./hexabot-widget.umd.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="hb-chat-widget"></div>
|
|
|
|
|
<script>
|
2024-10-12 09:26:14 +00:00
|
|
|
// Create the shadow root and attach it to the widget container
|
|
|
|
|
const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
|
|
|
|
|
const shadowContainer = createElement("div");
|
|
|
|
|
document
|
|
|
|
|
.getElementById('hb-chat-widget')
|
|
|
|
|
.attachShadow({ mode: 'open' })
|
|
|
|
|
.append(
|
|
|
|
|
shadowContainer,
|
|
|
|
|
createElement("link", {
|
|
|
|
|
rel: "stylesheet",
|
|
|
|
|
href: "./style.css"
|
|
|
|
|
})
|
|
|
|
|
);
|
2024-09-10 09:50:11 +00:00
|
|
|
ReactDOM.render(
|
2024-10-12 09:26:14 +00:00
|
|
|
React.createElement(HexabotWidget, {
|
2024-09-10 09:50:11 +00:00
|
|
|
apiUrl: 'http://localhost:4000',
|
2024-10-22 10:01:44 +00:00
|
|
|
channel: 'offline-channel',
|
2024-09-10 09:50:11 +00:00
|
|
|
token: 'token123',
|
|
|
|
|
}),
|
2024-10-12 09:26:14 +00:00
|
|
|
shadowContainer,
|
2024-09-10 09:50:11 +00:00
|
|
|
);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
