The sections below will guide you through setting up your first App 🚀
Note: Apps created using Create React App are currently not supported.
Quick setup with App template
npm install npm start
⏭️ 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
ℹ️ Note: An SSL is required for all Apps so you’ll need to configure your Vite site with an SSL. We recommend using the @vitejs/plugin-basic-ssl Vite plugin.
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
- Create or edit the
App.jsxfile to read:
- Start the server:
- 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 — If you’re using the app template or Vite, you can set this to
- Secret Key: Enter any value
- 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.