shadcn.io is not affiliated with official shadcn/ui
Intercom Detail Integration Block for React Aria
An integration detail section for a conversation-routing tool connecting to Intercom: a drawing of its panel in the conversation sidebar, the mark pair, Connect Intercom, three steps and the four permissions it asks for.
Installation
Overview
An integration detail section for React with React Aria, written for Inboxlane, a fictional tool that tags and routes conversations, and its Intercom app. It is a reverse split: the copy comes first in the document and sits in the end column behind the divider, and a framed drawing comes first on screen. The copy is a header ("Inboxlane for Intercom" and one sentence), the mark pair (Inboxlane's tile and Intercom's neutral lettermark tile) above a Connect Intercom Shine Button and a View docs link, three steps on a numbered rail (an admin approves the permissions, pin the panel to the conversation details sidebar, apply the suggestion), and the four Intercom permissions it asks for, each marked Read or Write by an icon and a word with its reason. The drawing shows what a teammate sees: Inboxlane's panel in a conversation's details sidebar with a suggested tag, a team to route to and a note, beside a sketch of the conversation. It is hidden from assistive technology and its caption says the same in words. The block has no state and ends on content. Intercom is named in text only: no Intercom logo, colour or wordmark ships, and the drawing is a generic inbox, not Intercom's screen. The product, the contact and the permission reasons are example data.
FAQ
Can I show Intercom's logo?
The block names Intercom in text, as any integration page says what it works with, and ships no Intercom logo, colour or wordmark. Its tile is a neutral lettermark, Ic in a muted square, in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The drawing of the sidebar is deliberately generic.
Are those the right permission names?
They are the names Intercom's Developer Hub shows for an app: Read conversations, Read and list users and companies, Write tags and Write conversations. The reasons beside them are this example product's, so list the permissions your own app requests, reads first. The "2 read, 2 write" count beside the heading is worked out from the same PERMISSIONS list.
Does the panel really live in the conversation sidebar?
Intercom lets an app add itself to the Inbox's conversation details, where teammates can pin it. The drawing and the second step describe that placement for this fictional product; the block itself builds no Intercom app and calls nothing.
Where should Connect Intercom go?
Both buttons are links (href="#"). Point Connect Intercom at your app's OAuth install address and View docs at your setup guide. Connect Intercom is a Shine Button, the block's one primary action; View docs is an outline button.
Both buttons render a link when they have an href.
How does it fit a phone, right-to-left layouts and reduced motion?
Below lg the parts stack in reading order: the header, the mark pair and buttons, the steps, the permissions, then the drawing, where the conversation sketch is dropped and only the sidebar shows. In a right-to-left layout the columns and the step rail flip, while the drawing keeps its left-to-right layout like any screenshot. The header and buttons fade up once on load, and not at all with reduced motion.