Intercom Detail Integration Block for React

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.

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.

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.

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 the link they're given with render, with nativeButton={false}.

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.