@kustomer/apps-server-sdk

A JavaScript/TypeScript SDK to build apps within Kustomer.

Getting Started
Initializing An App
Development

• Klasses
• KViews
• Settings
• Commands
• Hooks
• Events
• Authorization
• Lifecycle Events
• API
• Custom Endpoints

Getting Started

The following command will scaffold a basic app for you to build upon so you can quickly get started developing:

1npm i -g @kustomer/apps-server-sdk && kapp new <your_desired_app_name>

Initializing an App

Create an app by importing the KApp class and calling its constructor with our desired app configuration:

1import { KApp, ROLES } from '@kustomer/apps-server-sdk';
2
3const app = new KApp({
4  app: 'example_app',
5  version: '1.0.0',
6  title: 'Example App',
7  visibility: 'public',
8  url: 'https://my-example-app.example.com',
9  clientId: 'your_client_id',
10  clientSecret: 'your_client_secret',
11  roles: ROLES.common,
12  iconUrl: 'https://example-icon.com/assets/icon.png',
13  env: 'qa',
14  appDetails: {
15    appDeveloper: {
16      name: 'Kustomer',
17      website: 'https://kustomer.com',
18      supportEmail: 'support@kustomer.com'
19    },
20    externalPlatform: {
21      name: 'Some External Platform',
22      website: 'https://external-platform.example.com'
23    }
24  },
25  description: 'Really great app description'
26});
27
28/* Your app functionality here */
29
30(async () => {
31  try {
32    await app.start({ port: +(process.env.PORT || 80) });
33  } catch (err) {
34    app.log.error(JSON.stringify(err, undefined, 2));
35  }
36})();

Development

Apps typically provide one or more components that add functionality to the Kustomer platform. Components are the building blocks that form the core of an app and allow you to do things such as create views in the agent timeline, custom objects that represent data in your app, settings that allow users to configure their app, webhooks for receiving data from external sources, and more.

Klasses

Klasses define schemas for data objects including custom objects (or KObjects) in the Kustomer platform.

A Kustomer app can create and configure custom Klasses to represent external domain objects such as e-commerce orders, survey results, or external customer interactions.

1// Adds a Klass to the app. The Klass will be created when an org installs the app.
2app.useKlass('your-klass-name', {
3  icon: 'example-icon',
4  color: '#64943E',
5  metadata: {
6    properties: {
7      examplePropNum: {
8        displayName: 'Example Number Property'
9      }
10    }
11  }
12});

KViews

Klass Views (or KViews) display data for standard objects and for custom objects (or KObjects) on the agent timeline in Kustomer. The Kustomer platform renders Klass Views based on a JSX template.

Apps can configure KViews for a Kustomer organization to customize timeline layouts, insight panels, insight cards, and insight details.

1// Adds a JSX view to the app using Kustomer's standard Klass views (KViews)
2// The view must be passed in as a string
3app.useView(
4  'your-kview-name',
5  fs.readFileSync(path.resolve(__dirname, 'your-kview.tsx'), { encoding: 'utf-8' }),
6  {
7    resource: 'kobject',
8    context: 'expanded-timeline',
9    displayName: 'Example Display Name',
10    icon: 'example-icon',
11    state: 'open'
12  }
13);

KViews can also be created with a fully custom view that is rendered via an iframe within Kustomer:

1// Adds a fully custom view to the app rendered via an iframe in Kustomer
2app.useView('your-kview-name', '/path/to/view/directory', {
3  resource: 'conversation',
4  context: 'smartbar-card',
5  displayName: 'Example Display Name',
6  icon: 'example-icon',
7  state: 'open'
8});

Settings Pages

You can create custom settings pages to be rendered within an iframe in Kustomer. These custom pages Simply provide the path to the directory containing your index.html file and it will be served up to the front-end and rendered in place of Kustomer's default generated settings pages.

1// Adds a custom settings view that will be rendered via iframe in place of Kustomer's default generated settings page.
2app.useSettings('Settings Page Title', 'Example settings page description', '/path/to/settings/view');

Commands

Commands are reusable requests that can be executed through the Kustomer API. Commands provide a simple wrapper that allows custom components in Kustomer to interact with external services.

Apps can configure commands for use by Klass Views (KViews), widgets, or workflows also configured by the app. Apps can also configure commands to be available to custom code (for example, configuring a button within a KView to call a command).

Using the action: true option, you can choose to create a workflow action from a command.

1// Adds a handler for a command that will be created when the app is installed.
2app.onCommand('command-name', (orgId: string, userId: string, data: any) => { /* do some stuff */ });
3
4// Adds a handler for a command and creates a workflow action from the command
5app.onCommand('command-name', { action: true }, (orgId: string, userId: string, data: any) => { /* do some stuff */ });

Hooks

Hooks allow you to define inbound webhooks that provide a way for external data to be sent to your app. Webhooks created by your app will be reachable at <your-app-base-url>/orgs/:org/hooks/:hook

1// Creates a webhook at https://your-app-name.example.com/orgs/:org/hooks/hook-name
2app.onHook('hook-name', (org: string, query: any, headers: any, body: any) => { /* do some stuff */ });

Kustomer Events

You can easily subscribe to events that occur within the Kustomer platform. The following events are currently available to subscribe to:

Customer create
Customer update
Team create
Team update
User create
User update
Message create
Message update
Conversation create
Conversation update

1// Subscribes to a customer create event in Kustomer
2app.on('customer', 'create', (customer: Customer) => { /* do some stuff */ });

Authorization

The SDK provides a way to easily handle authorization requests:

1// Handle authorization requests
2app.onAuth(fn: express.RequestHandler);
3
4// Handle authorization redirect requests
5app.onAuthComplete(fn: express.RequestHandler);

Lifecycle Events

The SDK enables you to react to certain app-related events:

1app.onInstall = (userId: string, orgId: string) { /* React to app installation */ }
2
3app.onDisable = (userId: string, orgId: string) { /* React to an app being disabled */ }
4
5app.onEnable = (userId: string, orgId: string) { /* React to an app being enabled */ }

API

The SDK comes with an out-of-the-box ability to interface with the Kustomer API.

Requests can be made to an org using its id, name, or valid token.

Here is an example of us performing a customer upsert.

1let customer = await app.org('org_name_or_id_or_token').customers.getById('my_id');
2
3if (!customer) {
4  customer = await app.org('org_name_or_id_or_token').customers.create({ ... });
5} else {
6  customer = await app.org('org_name_or_id_or_token').customers.update(customer.id, { ... });
7}

Custom Endpoints

For app server customization that isn't officially supported by our apps platform, you can utilize the exposed express app.

Be careful not to unintentionally override and endpoints used by the SDK itself or the app may not work as expected!

1kapp.app.get('/hello-world', (_req, res, _next) => {
2  res.send('hello world!');
3});