Integrate Your Custom Apps into the Chatter Publisher

Use the Chatter Rich Publisher Apps API to integrate your custom apps into the Chatter publisher. The Rich Publisher Apps API enables developers to attach any custom payload to a feed item. Rich Publisher Apps uses Lightning components for composition and rendering. We provide two Lightning interfaces and a Lightning event to assist with integration. You can package your apps and upload them to AppExchange. An Experience Builder site admin page provides a selector for choosing which five of your apps to add to the Chatter publisher for that site.

Rich Publisher Apps are available to Experience Builder sites in topics, group, and profile feeds and in direct messages.

Note

Use the lightning:availableForChatterExtensionComposer and lightning:availableForChatterExtensionRenderer interfaces with the lightning:sendChatterExtensionPayload event to integrate your custom apps into the Chatter publisher and carry your apps’ payload into a Chatter feed.

The payload must be an object.

Note

Example of a Custom App Integrated into a Chatter Publisher

This example shows a Chatter publisher with three custom app integrations. There are icons for a video meeting app (1), an emoji app (2), and an app for selecting a daily quotation (3).

Three apps integrated into the Chatter publisher

Example of a Custom App Payload in a Chatter Feed Post

This example shows the custom app’s payload included in a Chatter feed.

Custom apps payload in a Chatter post

The next sections describe how we integrated the custom quotation app with the Chatter publisher.

1. Set Up the Composer Component

For the composer component, we created component, controller, helper, and style files.

Here’s the component markup in quotesCompose.cmp. In this file, we implement the lightning:availableForChatterExtensionComposer interface.

<aura:component implements="lightning:availableForChatterExtensionComposer">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <div class="container">
    	<span class="quote" aura:id="quote"></span>
        <span class="author" aura:id="author"></span>
        <lightning:button label="Get next Quote" onclick="{!c.getQuote}"/>
    </div>

</aura:component>

Use your controller and helper to initialize the composer component and to get the quote from a source. When you get the quote, fire the event sendChatterExtensionPayload. Firing the event enables the Add button so the platform can associate the app’s payload with the feed item. You can also add a title and description as metadata for the payload. The title and description are shown in a non-Lightning context, like Salesforce Classic.

getQuote: function(cmp, event, helper) {
    // get quote from the source
    var compEvent = cmp.getEvent("sendChatterExtensionPayload");
    compEvent.setParams({
        "payload" : "<payload object>",
        "extensionTitle" : "<title to use when extension is rendered>",
        "extensionDescription" : "<description to use when extension is rendered>"
    });
    compEvent.fire(); 
}

Add a CSS resource to your component bundle to style your composition component.

2. Set Up the Renderer Component

For the renderer component, we created component, controller, and style files.

Here’s the component markup in quotesRender.cmp. In this file, we implement the lightning:availableForChatterExtensionRenderer interface, which provides the payload as an attribute in the component.

<aura:component implements="lightning:availableForChatterExtensionRenderer">
    <aura:attribute name="_quote" type="String"/>
    <aura:attribute name="_author" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <div class="container">
    	<span class="quote" aura:id="quote">{!v._quote}</span>
        <span class="author" aura:id="author">--- {!v._author} ---</span>
    </div>
</aura:component>

You have a couple of ways of dealing with the payload. You can use the payload directly in the component {!v.payload}. You can use your controller to parse the payload provided by the lightning:availableForChatterExtensionRenderer interface and set its attributes yourself. Add a CSS resource to your renderer bundle to style your renderer component.

3. Set Up a New ChatterExtension Entity

After you create these components, open Postman or any tool that can make SOAP and REST API calls. Make sure that you’re using at least API version 41.0. Log in to your org, and create a ChatterExtension entity using the Salesforce SOAP API.

Provide values for ChatterExtension fields (see ChatterExtension for values and descriptions).

ChatterExtensions fields and values in Workbench

Get the IconId for the file asset. Go to Postman, or your preferred tool, and make a new POST request for creating a file asset with a fileId from your org. The filepath is /services/data/v41.0/connect/files/<fileid>/asset. Replace the version number with the current version.

Rich Publisher Apps information is cached, so there can be a 5-minute wait before your app appears in the publisher.

Note

4. Package Your App and Upload It to AppExchange

The Second-Generation Managed Packaging Developer Guide provides useful information about packaging your apps and publishing them on AppExchange.

5. Select the Apps to Embed in the Chatter Publisher

An admin page is available in each Experience Builder site for selecting and arranging the apps to show in the Chatter publisher. Select up to five apps, and arrange them in the order you like. The order you set here controls the order the app icons appear in the publisher.

In your site, go to Experience Workspaces and open the Administration page. Click Rich Publisher Apps to open the page.

Rich Publisher Apps admin settings

After you move apps to the Selected Items column and click Save, the selected apps appear in the Chatter Publisher.