JavaScript embed
If you're looking to embed your community in a React app, you can use the @usehall/react library for easier integration.
Installation
Copy and paste the below snippet into a script that is included on the page you want the embed to show. You can also add it inside a <script> tag just before the <body> tag in your HTML.
Remember to replace YOUR APP ID in the snippet with the your actual app id obtained from the Developer dashboard.
window.hallSettings = {
appId: "YOUR APP ID",
};
(function (w, d, s, o, f, js, fjs) {
w["Hall"] = o;
w[o] =
w[o] ||
function () {
(w[o].q = w[o].q || []).push(arguments);
};
(js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
js.id = o;
js.src = f;
js.async = 1;
fjs.parentNode.insertBefore(js, fjs);
})(window, document, "script", "HallEmbed", "https://js.usehall.com/embed.js");
Settings
You can configure the embed by adding extra entries to the window.hallSettings at the top of the snippet:
window.hallSettings = {
appId: "YOUR APP ID"
className: "hall-embed",
theme: "light",
// ...other properties
};
// rest of snippet goes here
Below is a list of all possible hallSettings entries. Note that only appId is required.
| Name | Type | Description |
|---|---|---|
appId |
string |
Your embed's unique app ID. You can see get this from your developer settings. |
className |
string |
className to apply to the container. |
disableRouting |
boolean |
Prevents the embed from reflecting the path in the window's url hash. See Routing for more information. |
disableTitle |
boolean |
Prevents the embed from updating window.title to reflect the current route. |
disableToast |
boolean |
Prevents the embed from displaying toast notifications. |
container |
string |
id of the container to append the embed to (without the leading #). If not provided, the embed will be appended to the body of the document. |
path |
string |
The initial url path to load. See Routing for more information. |
onLoad |
() => void |
Callback fired when the embed is loaded. |
userToken |
string |
Signed token from your server to log the user in automatically once the embed mounts. See User authentication for more information. |
theme |
'light' | 'dark' |
Override the light/dark theme for the embed. Defaults to the user's preference. |
API
Once the page has loaded, you can access HallEmbed function on the window global object.
Currently, there is only one 'login' method to log the user in:
window.HallEmbed("login", "<Signed token here>");
For details on how to sign a token to log the user in, see User authentication.