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
- Add a channel type feature to your app
- Add a plugin feature to your app
- Add a dynamic object feature to your app
- Add a webhook feature to your app
- Obtain OAuth credentials
- Configure a server for your app
- Publish your app
Create an app
To create an app:
- Go to Settings in Front.
- Select Company from the dropdown menu.
- Click Developers to open the Developers page.
- Click Create app.
- Provide an App name and Short description.
- Click Save.
- 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
- Click an app on the Developers page to view its details.
- Click the Features tab.
- Click Create channel type.
- Configure the channel settings as explained in the following table.
| Setting name | Description |
|---|---|
| Short description | A 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 URL | The 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 type | Select 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 attachments | The 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 Reply | Allows users to reply to messages received through the channel type (enabled by default). |
| Allow Compose | Allows users to compose new outbound messages through the channel type (enabled by default). |
| Composer type | Whether the channel type should render a Basic or Advanced message composer. Learn more about composer types. |
| Timeline UI Type | Whether 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. |
- 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
- Click an app on the Developers page to view its details.
- Click the Features tab.
- Click Create sidebar plugin.
- Configure the plugin settings as explained in the following table.
| Setting name | Description |
|---|---|
| Side panel URL | The 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. |
| Components | The 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. |
- 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
- Click an app on the Developers page to view its details.
- Click the Features tab.
- Click Create composer plugin.
- Configure the plugin settings as explained in the following table.
| Setting name | Description |
|---|---|
| Composer plugin URL | The 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. |
| Components | The 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. |
- 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:
- Click an app on the Developers page to view its details.
- Click the Features tab.
- Click Create webhook.
- 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 name | Description |
|---|---|
| Webhook URL | The 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 events | Select all the events that you want the webhook to listen for. |
OAuth is required for published apps
If your webhook is part of an app that you are publishing on our App Store, you must add OAuth to the app so that customers can authorize that Front events be sent to your webhook from their instance.
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. Front recommends that you implement OAuth for apps that need to fetch or update data from Front on behalf of a Front user. If you are publishing your app to the App Store, OAuth becomes a requirement for receiving and utilizing data through the Core API or webhooks for any customers that install your app.
You can use OAuth to authorize requests to the Core API or to authorize users for your channel type or to receive webhook events from other customer instances. 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:
- Click an app on the Developers page to view its details.
- Click the OAuth tab.
- Note the Client ID and Client secret.
- 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:
- Click an app on the Developers page to view its details.
- Click the Servers tab.
- Click Create server.
- Configure the server settings as shown in the following table.
| Setting name | Description |
|---|---|
| Origin | The root domain for the authorization server. |
| Authentication strategy | Specify whether the server uses Basic Authentication, Bearer Authentication, or OAuth. |
- 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.
Updated 6 months ago