Setting App Height

As you build an application within the Help Scout framework, controlling the height of your app in the sidebar is an important aspect of user interface design. This ensures that your app fits seamlessly within the user’s view, providing the best possible user experience.

We offer two ways to set the app height. The first, a more convenient method, utilizes our React UI Kit for those using React in their app. The second is a more general approach for those who are not using React.

Setting App Height for React Applications with UI Kit

If you are developing your app with React, setting the height of your app is made simpler using our React UI Kit. We provide a custom hook, useSetAppHeight, that encapsulates all the logic needed to automatically resize your app.

Here’s how to use it:

import { DefaultStyle, useSetAppHeight } from "@helpscout/ui-kit";

function App() {
  const appRef = useSetAppHeight();

  return (
    <div className="App" ref={appRef}>
      <DefaultStyle />
      Hi there 👋
    </div>
  );
}

export default App;

In this example, the useSetAppHeight hook returns a ref that is attached to the app’s main div. The hook takes care of setting up a ResizeObserver and updating the app’s height in the Help Scout context whenever the div’s size changes.

Setting App Height for Non-React Applications

If you are not using React for your app, you can set the height by observing changes to the element that contains your app using the ResizeObserver interface. Here’s how you can achieve this:

import HelpScout from '@helpscout/javascript-sdk';

// Select your app container element
const appContainer = document.querySelector('#app-container');

const resizeObserver = new ResizeObserver(() => {
  HelpScout.setAppHeight(appContainer.clientHeight);
});

resizeObserver.observe(appContainer);

// Remember to disconnect the observer when it's no longer needed
// resizeObserver.disconnect();

In this code, ResizeObserver watches for any changes in the size of the app container, and calls the HelpScout.setAppHeight method with the new height whenever a resize occurs.

Both methods ensure that your app’s height in the sidebar is always up to date, regardless of whether you’re using React or not. As always, we’re here to help if you have any questions or need further clarification on this process.