Create, manage, and publish apps

The Front Platform allows you to create and manage apps directly in Front. These apps can be private to one customer or be made available to all customers through the App Store. Whether you are building backend integrations with the Core API, creating a UI element with a plugin, or adding a new channel to Front, you will deploy your integration as an app in Front.

📘

You must be an admin to create or manage apps.

Quick links within this topic

Create an app

To create an app:

  1. Go to Settings in Front.
  2. Select Company from the dropdown menu.
  3. Click Developers to open the Developers page.
  4. Click Create app.
  5. Provide an App name and Short description.
  6. Click Save.
  7. After creating your app, Edit the default app icon.

👍

Choose public-facing values

The app name, short description, and icon display to end users of your app, so choose appropriate public-facing values.

Add features to your app

📘

Features are optional

Your application does not need to include features. Use these only if you need the functionality that a particular feature provides.

After configuring a basic app container, decide which features your app needs. The following features are available:

  • Channel type—Allows you to connect a messaging source to your app (SMS providers, social media channels, live chat widgets, etc.) so users can send and receive messages within a Front inbox. Utilizes Channels.
  • Plugin—Embeds a custom UI into Front that allows users to obtain additional context on a message or perform actions that leverage or propagate to a third-party system. Utilizes the Plugin SDK.
  • Dynamic object—Activates dynamic objects that link to and expose additional information in Front from external systems.
  • Webhook—Adds an event listener that notifies your app of different Front events.

Create a channel type

  1. Click an app on the Developers page to view its details.
  2. Click the Features tab.
  3. Click Create channel type.
  4. Configure the channel settings as explained in the following table.
Setting nameDescription
Short descriptionA public-facing summary of the channel type's intended use. This description shows up to Front users when they select your channel type during inbox configuration.
Webhook URLThe URL where your server will run and listen for updates from Front. The server origin is configured on the Servers page or through the origin dropdown. Note that channels only support Bearer or OAuth authentication.

For purposes of development, you can set up a local server using a tool like ngrok. When you are ready to deploy your channel to production, you can replace the development URL with your production URL.
Contact typeSelect the type of message your channel type uses.
- Phone—For channel types that will implement phone or SMS messages.
- Email—For channel types that will implement email messages.
- Custom—For all other message types.
Supported attachmentsThe attachments that your channel will support sending or receiving. The list includes text, audio, video, and images. If you do not enable an attachment type, users may encounter errors when attempting to include those attachments in the Front composer.

Tip: Select all attachment options if you want to allow all file types. For example, CSV files are not included within the text, audio, video, or image defaults, but if you select all of those options, then your channel type will support CSV files.
Allow ReplyAllows users to reply to messages received through the channel type (enabled by default).
Allow ComposeAllows users to compose new outbound messages through the channel type (enabled by default).
Composer typeWhether the channel type should render a Basic or Advanced message composer. Learn more about composer types.
Timeline UI TypeWhether the channel type should use a standard timeline (optimized for traditional communications like email) or a chat timeline (optimized for real-time communication like SMS and chat). Learn more about the timeline differences.
  1. Click Create.

After you create a channel type, your app shows an Active pill on the Channel type card within the Features tab. You can edit the plugin by clicking Edit channel type.

📘

Note the app credentials when adding a channel type feature

When building an app with a channel type feature, note the App UID and App secret on the Basic information tab of your app. You use these values in your channel integration. For more information, refer to Getting Started with Application Channels.

Create a plugin

You can create two types of plugins for your apps: sidebar plugins and composer plugins. Sidebar plugins display in the integration sidebar while composer plugins display in the message composer. Learn more about plugins on the Plugins Overview page.

Create a sidebar plugin

  1. Click an app on the Developers page to view its details.
  2. Click the Features tab.
  3. Click Create sidebar plugin.
  4. Configure the plugin settings as explained in the following table.
Setting nameDescription
Side panel URLThe URL where you will host your plugin application.

While you are developing your plugin, you can set the URL to the localhost port where your development app will run (for example, http://localhost:3000). When your plugin is complete and hosted on the web, you can update the endpoint value to a production https value.
ComponentsThe components your plugin needs to access.
- Camera—Allows access to the user's camera.
- Clipboard—Allows access to the user's clipboard.
- Fullscreen—Allows the plugin to use Element.requestFullscreen() on the object it renders in.
- Microphone—Allows access to the user's microphone.
- Display Capture—Allows access to capture the user's screen.
SDK version(Read only) Defaults to the latest SDK version.
Auth secret(Read only - displays after creation) A security mechanism that allows you to verify that the plugin traffic is coming from Front. Read about how to implement the auth secret in our Plugin Security topic.
  1. Click Create.

After you create a plugin, your app shows an Active pill on the Sidebar plugin card within the Features tab. You can edit the plugin by clicking Edit sidebar plugin.

Create a composer plugin

  1. Click an app on the Developers page to view its details.
  2. Click the Features tab.
  3. Click Create composer plugin.
  4. Configure the plugin settings as explained in the following table.
Setting nameDescription
Composer plugin URLThe URL where you will host your plugin application.

While you are developing your plugin, you can set the URL to the localhost port where your development app will run (for example, http://localhost:3000). When your plugin is complete and hosted on the web, you can update the endpoint value to a production https value.
ComponentsThe components your plugin needs to access.
Camera—Allows access to the user's camera.
Clipboard—Allows access to the user's clipboard.
Fullscreen—Allows the plugin to use Element.requestFullscreen() on the object it renders in.
Microphone—Allows access to the user's microphone.
Display Capture—Allows access to capture the user's screen.
Auth secret(Read only - displays after creation) A security mechanism that allows you to verify that the plugin traffic is coming from Front. Read about how to implement the auth secret in our Plugin Security topic.
  1. Click Create.

After you create a plugin, your app shows an Active pill on the Composer plugin card within the Features tab. You can edit the plugin by clicking Edit composer plugin.

Create a dynamic object

Dynamic objects allow you to transform URLs or strings found in comments or messages into structured Orders, Shipments, Itineraries, Tasks, etc. that are easy to access right from a conversation in Front.

To learn how to add a dynamic object feature to your app, refer to our Help Center article. When you understand the basics, you can benefit from the dynamic objects with third-party data guide.

Dynamic object examples

If a customer writes in to your team with a question that references a particular order, shipment, itinerary, task, etc., a dynamic object can automatically extract that object’s URL and other metadata, and attach it to the header of the conversation for easy access:

This also applies to objects referenced in comments, which can also be easily previewed:

When attached to the conversation header, it’s easy to open the object in your external CRM/TMS/management system, or view details directly in Front:

Create a webhook

Application webhooks allow you to be automatically notified when something happens in Front without having to constantly poll the API. To learn more about this feature, refer to our Webhooks topic.

To add a webhook to your app:

  1. Click an app on the Developers page to view its details.
  2. Click the Features tab.
  3. Click Create webhook.
  4. Configure the webhook settings as explained in the following table.

📘

Your server must be ready during configuration.

The server must be live at the time of configuration, and must respond successfully as described in the Webhooks topic.

Setting nameDescription
Webhook URLThe URL where your server is listening for the webhook request. The server must be live at the time of configuration, and must respond successfully as described in the Webhooks topic.
Subscribed eventsSelect all the events that you want the webhook to listen for.

After you create an application webhook, your app shows an Active pill on the Webhook card within the Features tab. You can edit the webhook by clicking Edit webhook.

Obtain OAuth credentials for your app

Every app you create on the Front Platform supports OAuth. Implementing OAuth is optional but recommended for apps that need to fetch or update data from Front on behalf of a Front user. You can use OAuth to authorize requests to the Core API or to authorize users for your channel type. By implementing an OAuth flow, an authorized app receives an access token to make requests to Front for authorized data.

Complete the following steps to view your OAuth client ID and secret and to configure redirect URLs:

  1. Click an app on the Developers page to view its details.
  2. Click the OAuth tab.
  3. Note the Client ID and Client secret.
  4. Click Add Redirect URL to authorize a URL for the server to redirect to after a successful authorization. You can add multiple redirect URLs, but Front recommends you delete your development URLs once your app is live.

To learn more about how authentication works on the Front Platform, refer to the following links:

Configure servers for your app

📘

Servers are currently only available for channel types

At this time, only apps with channel types can authorize users through a server.

Servers allow you to define how users authorize with your app. By configuring a server, you can have Front handle user authentication on your behalf. Your server can then authorize the users.

To create a server for authorization purposes:

  1. Click an app on the Developers page to view its details.
  2. Click the Servers tab.
  3. Click Create server.
  4. Configure the server settings as shown in the following table.
Setting nameDescription
OriginThe root domain for the authorization server.
Authentication strategySpecify whether the server uses Basic Authentication, Bearer Authentication, or OAuth.
  1. Click Create.

After you configure a server, you can select to use it for authorization when configuring features, such as channel types, that support authorizing users through a configured server origin.

Publish your app

Publish a private app

By default, apps are private to the Front instance they are created in. Once you create an app, you do not need to take additional steps for it to be available to Front users in that instance, aside from notifying them that the app is complete and ready to use. Private apps display a Status of "Private" in the app list and show a Private pill on the Basic information tab.

Publish an app to all Front customers on the App Store

If you want to make an app available for all Front customers to use, you must publish your app. The app will then display in the App Store within Front (available under Settings > Company > App Store) and on our integration website.

To publish your app, notify our team as described in the Partnering with Front topic.

📘

Making changes to a published app

Once your app is published to all customers, you cannot make direct changes to it. Instead, create a new app to test your changes, and then notify us using the email thread created when we first published your app.