### Install npm Packages and Start Server

Source: https://developer.helpscout.com/apps/getting-started

Install project dependencies and start the development server. This is typically the first step after cloning the app template.

```bash
npm install
npm run watch

```

--------------------------------

### Install seed-responsive-wrapper

Source: https://developer.helpscout.com/seed/packs/seed-responsive-wrapper

Install the seed-responsive-wrapper package using npm. Ensure seed-publish is installed as a dependency.

```bash
npm install seed-responsive-wrapper --save
```

--------------------------------

### GET /v2/users/me Response Example

Source: https://developer.helpscout.com/mailbox-api/endpoints/users/me

This is an example of a successful response when retrieving user information. The response includes various user details such as ID, name, email, role, and timestamps.

```json
HTTP/1.1 200 OK
Content-Type: application/hal+json

{
  "id" : 4,
  "firstName" : "Vernon",
  "lastName" : "Bear",
  "email" : "bear@acme.com",
  "role" : "owner",
  "timezone" : "America/New_York",
  "photoUrl" : "http://somesite.com/images/avatar.jpg",
  "createdAt" : "2011-04-01T03:18:33Z",
  "updatedAt" : "2012-07-24T20:18:33Z",
  "type" : "user",
  "mention" : "vernon",
  "initials" : "VB",
  "jobTitle" : "Honey Master",
  "phone" : "555-2368",
  "alternateEmails" : [ "bear@forest.com" ],
  "companyId" : 1,
  "_links" : {
    "self" : {
      "href" : "..."
    }
  }
}

```

--------------------------------

### Install seed-helpscout-theme

Source: https://developer.helpscout.com/seed/packs/seed-helpscout-theme

Install the seed-helpscout-theme package using npm. Ensure you have the necessary dependencies installed.

```bash
npm install seed-helpscout-theme --save
```

--------------------------------

### Install seed-input-addons

Source: https://developer.helpscout.com/seed/packs/seed-input-addons

Install the seed-input-addons package using npm. Ensure you have the necessary dependencies installed.

```bash
npm install seed-input-addons --save

```

--------------------------------

### Install seed-input

Source: https://developer.helpscout.com/seed/packs/seed-input

Install the seed-input package using npm. Ensure you have the necessary dependencies installed.

```bash
npm install seed-input --save

```

--------------------------------

### CallbackConfiguration Example

Source: https://developer.helpscout.com/docs-api/objects/callback-configuration

An example of the CallbackConfiguration object.

```APIDOC
## Example

```json
{
    "signInUrl": "https://example.com/signin",
    "sharedSecret": "xU9z43VrMtqIvnAqgbvUPSNkj/e4e/M5Nw+NIz7Dnjs="
}
```
```

--------------------------------

### Install seed-opacity

Source: https://developer.helpscout.com/seed/packs/seed-opacity

Install the seed-opacity package using npm.

```bash
npm install seed-opacity --save
```

--------------------------------

### Install seed-color-scheme

Source: https://developer.helpscout.com/seed/packs/seed-color-scheme

Install the seed-color-scheme library using npm.

```bash
npm install seed-color-scheme --save
```

--------------------------------

### Install seed-shadow

Source: https://developer.helpscout.com/seed/packs/seed-shadow

Install the seed-shadow package using npm.

```bash
npm install seed-shadow --save

```

--------------------------------

### Install Seed Video

Source: https://developer.helpscout.com/seed/packs/seed-video

Install the seed-video package using npm. Ensure you have the required dependencies installed.

```bash
npm install seed-video --save

```

--------------------------------

### Install seed-props

Source: https://developer.helpscout.com/seed/packs/seed-props

Install the seed-props library using npm.

```bash
npm install seed-props --save
```

--------------------------------

### Install seed-dropdown

Source: https://developer.helpscout.com/seed/packs/seed-dropdown

Install the seed-dropdown package using npm.

```bash
npm install seed-dropdown --save

```

--------------------------------

### Install seed-states

Source: https://developer.helpscout.com/seed/packs/seed-states

Install the seed-states pack using npm.

```bash
npm install seed-states --save

```

--------------------------------

### Install seed-publish

Source: https://developer.helpscout.com/seed/packs/seed-publish

Install the seed-publish package using npm.

```bash
npm install seed-publish --save

```

--------------------------------

### Install seed-thumbnail

Source: https://developer.helpscout.com/seed/packs/seed-thumbnail

Install the seed-thumbnail package using npm.

```bash
npm install seed-thumbnail --save
```

--------------------------------

### Install seed-flexy

Source: https://developer.helpscout.com/seed/packs/seed-flexy

Install the seed-flexy package using npm.

```bash
npm install seed-flexy --save
```

--------------------------------

### Get Organization by ID Request

Source: https://developer.helpscout.com/mailbox-api/endpoints/organizations/get

This example shows how to make a GET request to retrieve a specific organization by its ID. You can include query parameters to get counts and properties.

```http
GET /v2/organizations/10?includeCounts=true&includeProperties=true HTTP/1.1
Authorization: Bearer oauth_token


```

--------------------------------

### Create App Directory and Navigate

Source: https://developer.helpscout.com/apps/getting-started

Create a new directory for your application and change into it. This is a foundational step for manual npm setup.

```bash
mkdir myawesomeapp
cd myawesomeapp

```

--------------------------------

### Initialize NPM Project

Source: https://developer.helpscout.com/docs-api/restricted-docs/examples/single-sign-on

Create a new NPM project and initialize it with default settings. This is the first step in setting up the custom callback SSO example.

```bash
mkdir custom-callback-sso-example
cd custom-callback-sso-example
npm init -y
```

--------------------------------

### GET User Report Request

Source: https://developer.helpscout.com/mailbox-api/endpoints/reports/user/reports-user

This is an example of a GET request to the user report endpoint. Ensure you include your authorization token.

```http
GET /v2/reports/user HTTP/1.1
Authorization: Bearer oauth_token


```

--------------------------------

### GET Productivity Report Request

Source: https://developer.helpscout.com/mailbox-api/endpoints/reports/productivity/reports-productivity-overall

This is an example of a GET request to the productivity report endpoint. You can filter by mailboxes, tags, conversation types, and folders.

```http
GET /v2/reports/productivity HTTP/1.1
Authorization: Bearer oauth_token


```

--------------------------------

### Create New NPM Project

Source: https://developer.helpscout.com/docs-api/restricted-docs/examples/show-login-screen

Initializes a new Node.js project and sets up the start script for nodemon.

```bash
mkdir custom-callback-login-example
cd custom-callback-login-example
npm init -y
```

```json
...
"scripts": {
  "start": "nodemon index.js"
}
...
```

--------------------------------

### Recommended Entry Points (Objective-C)

Source: https://developer.helpscout.com/beacon-2/ios

Use the purpose-built methods `HSBeacon search` and `HSBeacon openArticle` for documentation-related entry points. Route-based navigation is also supported for advanced use cases.

```Objective-C
HSBeaconSettings *settings = [[HSBeaconSettings alloc] initWithBeaconId:@"beacon-id"];

// Recommended, purpose-built entry points
[HSBeacon search:@"help" beaconSettings:settings];
[HSBeacon openArticle:@"DOCS_ARTICLE_ID" beaconSettings:settings];

// Advanced, route-based navigation (UI deep links)
[HSBeacon navigate:@"/docs/search?query=help" beaconSettings:settings];
[HSBeacon navigate:@"/docs/article?query=DOCS_ARTICLE_ID" beaconSettings:settings];
```

--------------------------------

### GET Request for Response Time Report

Source: https://developer.helpscout.com/mailbox-api/endpoints/reports/productivity/reports-productivity-respose-time

This is an example of a GET request to the response time report endpoint. Ensure you include your authorization token.

```http
GET /v2/reports/productivity/response-time HTTP/1.1
Authorization: Bearer oauth_token


```

--------------------------------

### Install React UI Kit with npm

Source: https://developer.helpscout.com/apps/ui-kit

Use this command to install the React UI Kit using npm.

```bash
npm install @helpscout/ui-kit
```

--------------------------------

### GET Request for Happiness Ratings

Source: https://developer.helpscout.com/mailbox-api/endpoints/reports/happiness/reports-happiness-ratings

This is an example of a GET request to retrieve happiness ratings. Ensure you include your OAuth token in the Authorization header.

```http
GET /v2/reports/happiness/ratings HTTP/1.1
Authorization: Bearer oauth_token



```

--------------------------------

### Install React UI Kit with yarn

Source: https://developer.helpscout.com/apps/ui-kit

Use this command to install the React UI Kit using yarn.

```bash
yarn add @helpscout/ui-kit
```

--------------------------------

### GET Request for Happiness Report

Source: https://developer.helpscout.com/mailbox-api/endpoints/reports/happiness/reports-happiness-overall

This is an example of a GET request to the happiness report endpoint. Ensure your request includes the necessary Authorization header.

```http
GET /v2/reports/happiness HTTP/1.1
Authorization: Bearer oauth_token


```

--------------------------------

### Input Addon Example

Source: https://developer.helpscout.com/seed/packs/seed-input-addons

Demonstrates the basic usage of input addons with prefix and suffix elements within a control group.

```html
<div class="o-control-group" role="group">
  <div class="c-input-addon">Prefix</div>
  <input class="c-input o-control-group__block" value="Input">
  <div class="c-input-addon">Suffix</div>
</div>

```

--------------------------------

### GET Conversations Drilldown by Field Request

Source: https://developer.helpscout.com/mailbox-api/endpoints/reports/conversations/reports-conversations-field-drilldown

This is an example of a GET request to the conversations drilldown by field endpoint. Ensure you include your authorization token.

```http
GET /v2/reports/conversations/fields-drilldown HTTP/1.1
Authorization: Bearer oauth_token


```

--------------------------------

### Start Development Server

Source: https://developer.helpscout.com/docs-api/restricted-docs/examples/show-login-screen

Starts the development server using npm, which will automatically restart on code changes thanks to nodemon.

```bash
npm start
```

--------------------------------

### GET Request for Docs Report

Source: https://developer.helpscout.com/mailbox-api/endpoints/reports/docs/reports-docs-overall

This is an example of a GET request to retrieve Docs usage statistics. It includes the base endpoint and requires an Authorization header.

```http
GET /v2/reports/docs HTTP/1.1
Authorization: Bearer oauth_token


```

--------------------------------

### Install Help Scout JavaScript SDK with npm

Source: https://developer.helpscout.com/apps/javascript-sdk

Use this command to install the SDK using npm. This is the standard package manager for Node.js.

```bash
npm install @helpscout/javascript-sdk

```

--------------------------------

### Install Mocha and Chai

Source: https://developer.helpscout.com/seed/css-unit-testing

Install Mocha and Chai for testing with Barista.

```bash
npm install mocha chai --save-dev

```

--------------------------------

### Get value from Sass list

Source: https://developer.helpscout.com/seed/packs/seed-dash

Retrieve a value from a Sass list. This example shows retrieving the first element.

```scss
$list: (red, blue, green);

.element {
  background: _get($list, red);
}

```

```css
.element {
  background: red;
}

```

--------------------------------

### Install seed-color-scheme-helpscout

Source: https://developer.helpscout.com/seed/packs/seed-color-scheme-helpscout

Install the Help Scout color scheme package using npm.

```bash
npm install seed-color-scheme-helpscout --save
```

--------------------------------

### Integrate Seed with Gulp

Source: https://developer.helpscout.com/seed

Example of using Gulp to compile SCSS with Seed framework paths. Ensure Seed is installed via npm.

```javascript
var gulp = require('gulp');
var sass = require('gulp-sass');
var seed = require('seed-framework');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({
      includePaths: seed
    }))
    .pipe(gulp.dest('./css'));
});
```

--------------------------------

### HSBeacon - Opening the Beacon

Source: https://developer.helpscout.com/beacon-2/ios-api/Classes.html

Demonstrates how to open the Beacon SDK interface using HSBeaconSettings. The settings object must be initialized with a valid Beacon ID.

```APIDOC
## Opening the Beacon From The Current View Controller

The Beacon SDK requires an `HSBeaconSettings` object, which can be initialized using your Beacon ID.

### Method Signature
```objective-c
+ (void)openBeacon:(nullable HSBeaconSettings *)settings;
```

### Parameters
* `settings` (HSBeaconSettings) - Required - The settings object for the Beacon, including the Beacon ID.

### Request Example
```objective-c
HSBeaconSettings *settings = [[HSBeaconSettings alloc] initWithBeaconId:@"beacon-id"];
[HSBeacon openBeacon:settings];
```
```

--------------------------------

### Initialize Beacon Push Notification Support (Objective-C)

Source: https://developer.helpscout.com/beacon-2/ios

Initializes the notification system for Beacon when the app starts. This is part of the manual setup for push notifications.

```objective-c
[HSBeacon initializeBeaconPushNotificationSupport];
```

--------------------------------

### Basic Visibility Example

Source: https://developer.helpscout.com/seed/packs/seed-visibility

Demonstrates the use of `.u-invisible` to hide an element and `.u-invisible .u-visible@lg` to show an element only on large displays.

```html
<div class="u-invisible">
  I'm invisible!
</div>
<div class="u-invisible u-visible@lg">
  I'm visible! But only for larger displays.
</div>

```

--------------------------------

### Initialize Beacon Push Notification Support (Swift)

Source: https://developer.helpscout.com/beacon-2/ios

Initializes the notification system for Beacon when the app starts. This is part of the manual setup for push notifications.

```swift
HSBeacon.initializeBeaconPushNotificationSupport()
```

--------------------------------

### Usage Example: Apply Color

Source: https://developer.helpscout.com/seed/packs/seed-color-scheme-helpscout

Use the `_color()` mixin to apply a color from the Help Scout palette to an element's background. Ensure `seed-color-scheme` is installed.

```scss
.element {
  background: _color(blue, 500);
}
```

```css
.element {
  background: #3197D6;
}
```

--------------------------------

### Install Help Scout JavaScript SDK with yarn

Source: https://developer.helpscout.com/apps/javascript-sdk

Use this command to install the SDK using yarn. Yarn is an alternative package manager for JavaScript.

```bash
yarn add @helpscout/javascript-sdk

```

--------------------------------

### Get Webhook Response

Source: https://developer.helpscout.com/mailbox-api/endpoints/webhooks/get

This is an example of a successful response when retrieving webhook details. It includes the webhook's configuration such as URL, events, state, and associated mailboxes.

```json
HTTP/1.1 200 OK
Content-Type: application/hal+json

{
  "id" : 10,
  "url" : "http://bad-url.com",
  "state" : "enabled",
  "events" : [ "convo.assigned" ],
  "notification" : false,
  "payloadVersion" : "V2",
  "label" : "cool webhook",
  "mailboxIds" : [ ],
  "_links" : {
    "self" : {
      "href" : "..."
    }
  }
}


```

--------------------------------

### Initialization

Source: https://developer.helpscout.com/beacon-2/ios-api/Classes/HSBeaconSettings.html

Initialize HSBeaconSettings with a beacon ID and set initial configurations.

```APIDOC
## Initialization

### Description
Initializes `HSBeaconSettings` with a required `beaconId` and allows for immediate configuration of properties like `useNavigationBarAppearance`.

### Method Signature
Objective-C:
```objc
- (instancetype)initWithBeaconId:(NSString *)beaconId;
```
Swift:
```swift
init(beaconId: String)
```

### Parameters
#### Path Parameters
- **beaconId** (NSString/String) - Required - The Beacon ID to use. This can be found during Beacon creation.
```

--------------------------------

### Get Saved Reply Response

Source: https://developer.helpscout.com/mailbox-api/endpoints/inboxes/saved_Replies/saved-replies-get

This is an example of a successful response when retrieving a saved reply. It includes the saved reply's ID, name, and text content.

```json
HTTP/1.1 200 OK
Content-Type: application/hal+json

{
  "id" : 234567,
  "name" : "Visiting us in person",
  "text" : "Hi there,<br /><br />Of course you can come visit us in person! Our next live event will be located at 1901 West Madison Street, Chicago, Illinois 60612 throughout the summer. Come in at any time during those hours :)
<br /><br />We look forward to seeing you!",
  "chatText" : "Hi there, 
Of course you can come visit us in person! 

Our next live event will be located at 1901 West Madison Street, Chicago, Illinois 60612 throughout the summer."
}
```

--------------------------------

### List Categories with Pagination

Source: https://developer.helpscout.com/docs-api/categories/list

To request subsequent pages of categories, append the 'page' query parameter to the URL. This example shows how to get the second page of results.

```http
https://docsapi.helpscout.net/v1/collections/{id}/categories?page=2
```

--------------------------------

### Responsive Heading Example

Source: https://developer.helpscout.com/seed/packs/seed-breakpoints

This example demonstrates how to apply different heading sizes based on viewport width using breakpoint-specific classes.

```html
<h1 class="tx-h5 tx-h4@sm tx-h3@md tx-h1@lg">
  Resize your browser, and watch me shrink/grow!
</h1>
```

--------------------------------

### Configure NPM Start Script

Source: https://developer.helpscout.com/docs-api/restricted-docs/examples/single-sign-on

Add a start script to your `package.json` to run the application using nodemon for development. This allows for automatic server restarts on code changes.

```json
"scripts": {
  "start": "nodemon index.js"
}
```

--------------------------------

### Get Organization by ID Response

Source: https://developer.helpscout.com/mailbox-api/endpoints/organizations/get

This is an example of a successful HTTP 200 OK response when retrieving an organization. It includes basic organization details and optionally counts and properties if requested.

```json
HTTP/1.1 200 OK
Content-Type: application/hal+json

{
  "id" : 10,
  "name" : "Test Company",
  "website" : "www.example.com",
  "description" : "Test Description",
  "location" : "US",
  "logoUrl" : "https://example.com/logo.png",
  "note" : "Test Note",
  "domains" : [ "domain.com", "domain.org" ],
  "phones" : [ "1-23-456", "+1 234 5678" ],
  "brandColor" : "#000FFF",
  "customerCount" : 42,
  "conversationCount" : 17,
  "properties" : [ {
    "definitionId" : 1001,
    "slug" : "annual-revenue",
    "name" : "Annual Revenue",
    "type" : "number",
    "value" : "5000000"
  }, {
    "definitionId" : 1002,
    "slug" : "industry",
    "name" : "Industry",
    "type" : "dropdown",
    "value" : "Software",
    "options" : [ {
      "label" : "Software"
    }, {
      "label" : "Healthcare"
    }, {
      "label" : "Finance"
    } ]
  }, {
    "definitionId" : 1003,
    "slug" : "founded-date",
    "name" : "Founded Date",
    "type" : "date",
    "value" : "2020-01-15"
  } ],
  "_links" : {
    "self" : {
      "href" : "..."
    }
  }
}

```

--------------------------------

### Get Session Attributes (Swift)

Source: https://developer.helpscout.com/beacon-2/ios-api/Protocols/HSBeaconDelegate.html

Called before showing the new conversation contact form or starting a chat. Returns a dictionary of key-value pairs to be added to the Beacon visitor activity note.

```swift
optional func sessionAttributes() -> [String : String]

```

--------------------------------

### Initialize npm Project

Source: https://developer.helpscout.com/apps/getting-started

Initialize a new npm project to create the package.json file. This command sets up the basic configuration for your application's dependencies and scripts.

```bash
npm init

```

--------------------------------

### Get Session Attributes (Objective-C)

Source: https://developer.helpscout.com/beacon-2/ios-api/Protocols/HSBeaconDelegate.html

Called before showing the new conversation contact form or starting a chat. Returns a dictionary of key-value pairs to be added to the Beacon visitor activity note.

```objective-c
- (nonnull NSDictionary<NSString *, NSString *> *)sessionAttributes;

```

--------------------------------

### Basic Option Card Example

Source: https://developer.helpscout.com/seed/packs/seed-option-card

Demonstrates the basic usage of the `.c-option-card` component, wrapping radio inputs within a label for a clickable card interface. Use this for simple selection scenarios.

```html
<div class="tx-h6 tx-700 u-op-2 u-mrg-b-1">Pick One:</div>
<div class="c-option-card u-mrg-b-2">
  <label class="c-option-card__label">
    <input type="radio" class="c-option-card__selector" name="example">
    <div class="c-card">
      <div class="c-card__block">
        <div class="tx-h4">Pick Me</div>
        Cause I'm the best.
      </div>
    </div>
  </label>
</div>
<div class="c-option-card">
  <label class="c-option-card__label">
    <input type="radio" class="c-option-card__selector" name="example" />
    <div class="c-card">
      <div class="c-card__block">
        <div class="tx-h4">No, Pick Me</div>
        Cause I'm the better!
      </div>
    </div>
  </label>
</div>

```

```html
<div class="c-option-card">
  <label class="c-option-card__label">
    <input type="radio" class="c-option-card__selector" name="example" />
    <div class="c-card">
      <div class="c-card__block">...</div>
    </div>
  </label>
</div>

```

--------------------------------

### Get Redirect Response Example

Source: https://developer.helpscout.com/docs-api/redirects/get

This JSON object represents the successful response when retrieving a redirect. It contains details such as the redirect's ID, associated site, URL mapping, target document, and redirection URL.

```json
{
    "redirect": {
        "id": "573dfa41951c0e2ad08ab695",
        "siteId": "5244acc53e3e9bd67a3dc68c",
        "urlMapping": "/old/path/1234",
        "documentId": "525217bae4b0cb13e565bb9d",
        "type": "article",
        "redirect": "https://docs.helpscout.net/article/488-transfer-account",
        "anchor": null,
        "createdBy": 4577,
        "modifiedBy": 4577,
        "createdAt": "2016-05-19T17:26:25Z",
        "modifiedAt": "2016-05-19T17:26:25Z"
    }
}
```

--------------------------------

### Basic HelpScoutContextProvider Setup

Source: https://developer.helpscout.com/apps/ui-kit/providers

Wrap your root component with HelpScoutContextProvider to make Help Scout context data available to all child components. This component is essential for accessing context using hooks like useHelpScoutContext.

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

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

```

--------------------------------

### Example API Response for Get Revision

Source: https://developer.helpscout.com/docs-api/articles/revisions/get

This JSON object represents the successful retrieval of an article revision. It contains details about the revision's ID, the associated article ID, the revision text, and information about the user who created it, along with the creation timestamp.

```json
{
    "revision": {
        "id": "5230deaa456636123f6363d0",
        "articleId": "522f918d1ef00a6bca026ca0",
        "text": "This is the text of the article.",
        "createdBy": {
            "id": 73423,
            "firstName": "John",
            "lastName": "Appleseed"
        },
        "createdAt": "2013-09-11T21:20:42Z"
    }
}
```

--------------------------------

### Beacon Configuration

Source: https://developer.helpscout.com/beacon-2/web/javascript-api

Configure Beacon's appearance, messaging, and labels. This example shows how to enable docs, set the display style, enable chat, and customize labels.

```APIDOC
## Beacon('config', options)

### Description
Configure various aspects of the Beacon widget.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - Required - An object containing configuration options.
  - **docsEnabled** (boolean) - Optional - Enables or disables the Docs feature.
  - **mode** (string) - Optional - Sets the Beacon mode (e.g., 'selfService').
  - **display** (object) - Optional - Controls the visual display.
    - **style** (string) - Optional - The display style (e.g., 'icon').
    - **iconImage** (string) - Optional - Specifies the icon image.
  - **messaging** (object) - Optional - Messaging related settings.
    - **chatEnabled** (boolean) - Optional - Enables or disables chat.
    - **contactForm** (object) - Optional - Contact form settings.
      - **customFieldsEnabled** (boolean) - Optional - Enables custom fields.
      - **showName** (boolean) - Optional - Shows or hides the name field.
  - **labels** (object) - Optional - Customizes text labels.
    - **chatHeadingSublabel** (string) - Optional - Sublabel for chat heading.
    - **continueEditing** (string) - Optional - Text for continue editing button.
    - **emailValidationLabel** (string) - Optional - Label for email validation.

### Request Example
```javascript
Beacon('config', {
  docsEnabled: true,
  mode: 'selfService',
  display: {
    style: 'icon',
    iconImage: 'search',
  },
  messaging: {
    chatEnabled: true,
    contactForm: {
      customFieldsEnabled: true,
      showName: true,
    },
  },
  labels: {
    chatHeadingSublabel: 'We’ll be with you soon',
    continueEditing: 'Continue Editing…',
    emailValidationLabel: 'Please use a valid email address',
  },
})
```

### Response
No specific response documented.
```

--------------------------------

### Install seed-navbar

Source: https://developer.helpscout.com/seed/packs/seed-navbar

Install the seed-navbar component using npm. Ensure you have the necessary dependencies installed.

```bash
npm install seed-navbar --save
```

--------------------------------

### Beacon('init', config)

Source: https://developer.helpscout.com/beacon-2/web/javascript-api

Initializes the Beacon with a configuration object, including beaconId and other settings.

```APIDOC
## Beacon('init', config)

### Description
Alternatively, you can pass a configuration object to `init`. The object requires a `beaconId` field and accepts all fields from Beacon(‘config’).

### Method
Beacon

### Parameters
#### Path Parameters
- **init** (string) - Required - The initialization command.
- **config** (object) - Required - Configuration object.
  - **beaconId** (string) - Required - Your unique Beacon ID.
  - **color** (string) - Optional - The accent color for the Beacon.
  - **display** (object) - Optional - Display settings for the Beacon.
    - **style** (string) - Optional - The display style ('icon', 'button', etc.).
    - **position** (string) - Optional - The position of the Beacon on the screen ('left', 'right').

### Request Example
```javascript
Beacon('init', {
  beaconId: 'YOUR_BEACON_ID_HERE',
  color: '#617DEC',
  display: {
    style: 'icon',
    position: 'left',
  },
})
```
```

--------------------------------

### Install Help Scout UI Kit

Source: https://developer.helpscout.com/apps/getting-started

Install the UI Kit for building consistent and accessible user interfaces within your Help Scout app. This package includes pre-built components and styling.

```bash
npm install @helpscout/ui-kit

```

--------------------------------

### Authentication Example

Source: https://developer.helpscout.com/help-desk-api

Demonstrates how to authenticate with the Help Scout API using an API Key via HTTP Basic Authentication.

```APIDOC
## Authentication

This is an HTTPS-only API. Authentication is based on API Keys. Each API Key is associated with a Help Scout user. Results returned from various responses are based upon the role of the user to which the API key is tied.
The API Key is passed via HTTP Basic Authentication and goes in the username field. A dummy password, such as X, goes in the password field.
To try the API via curl on the command-line, the general form used would be:
```
curl -u API_KEY:DUMMY_PASSWORD API_URL
```

For instance, if your API key is 60783dd23ef, you would execute:
```
curl -u 60783dd23ef:X https://api.helpscout.net/v1/mailboxes.json
```
```

--------------------------------

### Install seed-badge

Source: https://developer.helpscout.com/seed/packs/seed-badge

Install the seed-badge pack using npm. Ensure you have the required dependencies installed.

```bash
npm install seed-badge --save
```

--------------------------------

### Button Groups Example

Source: https://developer.helpscout.com/seed/packs/seed-control-group

Demonstrates creating a button group using the `.o-control-group` class with multiple buttons.

```html
<div class="o-control-group" role="group">
  <button class="c-button">Button</button>
  <button class="c-button">Button</button>
  <button class="c-button">Button</button>
</div>

```

--------------------------------

### Basic List Example

Source: https://developer.helpscout.com/seed/packs/seed-list

Demonstrates the basic usage of the seed-list component with a standard unordered list.

```html
<ul class="c-list">
  <li>Chia seeds</li>
  <li>Flax seeds</li>
  <li>Sesame seeds</li>
  <li>Pumpkin seeds</li>
  <li>Sunflower seeds</li>
</ul>
```

--------------------------------

### Install seed-list

Source: https://developer.helpscout.com/seed/packs/seed-list

Install the seed-list component pack using npm. Ensure you have the necessary dependencies installed.

```bash
npm install seed-list --save
```

--------------------------------

### Install Seed Modal

Source: https://developer.helpscout.com/seed/packs/seed-modal

Install the seed-modal package using npm. Ensure all dependencies are also installed.

```bash
npm install seed-modal --save
```

--------------------------------

### Set up HelpScoutContextProvider in React

Source: https://developer.helpscout.com/apps/guides/getting-data-from-help-scout-with-javascript

Wrap your root component with HelpScoutContextProvider to make Help Scout context data available to all child components. Ensure @helpscout/ui-kit is installed.

```javascript
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>
);

```

--------------------------------

### Install seed-link Pack

Source: https://developer.helpscout.com/seed/packs/seed-link

Install the seed-link pack using npm. Ensure seed-publish is installed as a dependency.

```bash
npm install seed-link --save

```