Learn about Hall and find an answer to your question

JavaScript embed

If you're looking to embed your community in a React app, you can use the @usehall/react library for easier integration.


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");


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.


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.

Ask in our community

Question not answered? Ask us and other customers in the Hall customer community.

Go to community

Contact support

Message our support team privately to discuss anything specific to your organization.

Contact support