The sections below will guide you through setting up your first App 🚀
Quick setup with App template
npm install npm run watch
⏭️ Now that you have the app template running locally, skip down to the Help Scout App setup instructions to add the app to the sidebar.
Vite project setup
Manual npm setup
We strongly recommend using one of the previous options (App Template or Vite) for a quicker and smoother setup. A manual setup of an npm web app may require numerous dependencies and configurations, which are beyond the scope of this document. However, if you still prefer a manual setup, follow these initial steps to create an npm package:
Create a new directory for your new application and navigate into it:
mkdir myawesomeapp cd myawesomeapp
Initialize npm to create the
package.jsonfile for your app:
Follow the prompts to fill out the details about your project.
💡 Tip: You can instead use
npm init -yto skip the questionnaire
Keep in mind that you’ll need to configure the web app further, which involves installing and setting up various dependencies. The specifics of this process will depend on your chosen stack and requirements.
If you didn’t use the app template linked above, you’ll need to install the npm packages:
Install the UI Kit
npm install @helpscout/ui-kit
Implement your App
To implement a demo app with some of the available features, create or edit the
App.jsxfile to read:
Start the app on a network available host
💡 Tip: If you are using Vite, you can do that by running
npm run build && npm run preview -- --host. Be sure to use one of the Network URLs (not the Local URL) as your callback URL.
- Log into your Help Scout account as an administrator or account owner.
- Head to Manage > Apps in the navigation bar.
- Click the “Create” button (on the top of the page).
- Click the “Create App” button (on the left sidebar).
- Complete the form using the following as a guide:
- App Name:
My Awesome App
- Callback URL: Enter the URL of your web app — The URL host has to be network available (
127.0.0.1will not work)
- Secret Key: Enter any value — If your app is validating the header signature, this is the key that is used to generate it
- Mailboxes: Select the mailboxes where this app should appear
- App Name:
- Click the “Save” button.
Once you’ve created your app, you can easily access it within Help Scout’s conversation sidebar. Follow the steps below to view your new app:
- In the navigation menu, click on “Mailboxes” and select one of the mailboxes you associated with your app during its creation.
- Open a conversation within the chosen mailbox.
- Locate “My Awesome App” in the sidebar.
💡 Tip: You can drag the app to your desired position!
With your app now integrated into Help Scout, your team can enjoy a streamlined workflow and access valuable information without leaving the conversation view.