Getting Data from Help Scout

Getting Data from Help Scout with JavaScript SDK

In this guide, you’ll learn how to access Help Scout data using the HelpScout.getApplicationContext() method provided by the JavaScript SDK. This method allows you to fetch contextual information from the current Help Scout environment, such as company, conversation, customer, mailbox, and user details.

Prerequisites

Ensure that you have completed the Getting Started Guide and set up a Help Scout App.

Fetching Context Data

To fetch context data, simply call the getApplicationContext() method in your app. This method returns a Promise that resolves with an object containing the following properties: company, conversation, customer, mailbox, and user.

Here’s an example of how to use getApplicationContext():

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

HelpScout.getApplicationContext().then((context) => {
  console.log('Help Scout Context:', context);
});

You can access specific properties of the context object by using dot notation or destructuring assignment. Here are some examples:

Accessing the user’s first name

HelpScout.getApplicationContext().then(({ user }) => {
  console.log('User First Name:', user?.firstName);
});

Accessing the customer’s email

HelpScout.getApplicationContext().then(({ customer }) => {
  console.log('Customer Email:', customer?.emails?.[0]?.value);
});

Accessing the conversation subject

HelpScout.getApplicationContext().then(({ conversation }) => {
  console.log('Conversation Subject:', conversation?.subject);
});

🚀 Dive Deeper into Context Objects

After you’ve familiarized yourself with the examples above, we encourage you to dive deeper into the full details of the different context objects. Understanding these objects and their properties will enable you to build more powerful and customized integrations with Help Scout. Don’t hesitate to explore the comprehensive documentation for each object:

• Company
• Conversation
• Customer
• Mailbox
• User

By leveraging the richness of these objects, you can unlock the full potential of the Help Scout JavaScript SDK and create exceptional experiences for your users. Get started now and discover the possibilities!

Handling Errors

Since getApplicationContext() returns a Promise, you can use the .catch() method to handle errors:

HelpScout.getApplicationContext()
  .then((context) => {
    console.log('Help Scout Context:', context);
  })
  .catch((error) => {
    console.error('Error fetching Help Scout Context:', error);
  });

That’s it! You now know how to fetch and access Help Scout context data using the getApplicationContext() method from the JavaScript SDK. Happy coding!

Using Context Provider in React

In this guide, you’ll learn how to use the useHelpScoutContext() hook and the <HelpScoutContextProvider> component from the @helpscout/ui-kit package to access Help Scout context data in a React application.

Prerequisites

Ensure that you have completed the Getting Started Guide and set up a Help Scout App using React.

Set up Context Provider

First, you’ll need to wrap your root component with the <HelpScoutContextProvider> component. This component should be placed in your main.tsx file, where the root of your React application is rendered:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HelpScoutContextProvider } from "@helpscout/ui-kit";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <HelpScoutContextProvider>
      <App />
    </HelpScoutContextProvider>
  </React.StrictMode>
);

Using Context Provider hook

Now that the <HelpScoutContextProvider> is set up, you can use the useHelpScoutContext() hook within your components to access Help Scout context data. Like the getApplicationContext() method described above, this hook returns an object containing the following properties: company, conversation, customer, mailbox, and user. You can find the full details about these objects below ⤵️.

Here’s an example of how to use the useHelpScoutContext() hook in your App.tsx file:

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

function App() {
  const { user } = useHelpScoutContext();
  return (
    <div className="App">
      <DefaultStyle />
      <Heading level="h4">Hi {user?.firstName || "there"} 👋</Heading>
    </div>
  );
}

export default App;

In the example above, the useHelpScoutContext() hook is used to access the user property from the Help Scout context. The user’s first name is then displayed in a <Heading> component.

That’s it! You now know how to use the useHelpScoutContext() hook and the <HelpScoutContextProvider> component to access Help Scout context data in a React application. Happy coding!

The Context Object

Company

Conversation

Customer

Mailbox

User