Intercom Rules Grid Integration Block for React

Edit RULES at the top of the file. Each has a name, a when phrase, optional terms (shown in code, left to right in any layout) and actions, built with the tag, assign and note helpers, and start says whether it begins on. The tally counts the switches that are on, so it follows whatever you list. Keep the actions to what your integration can really do in Intercom: tag a conversation, assign it to a team, add a note.

It changes local state only. The switch's label reads "Rule on: Refund requests" for assistive technology, the word On or Off beside it is for sighted users, the chips go dashed, and the tally above updates in a polite status line. Wire toggle to your own endpoint to save the choice.

No. The status line says "Nothing is sent to Intercom from this demo". The block is a picker: it holds which rules are on and nothing else.

The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile, typed rather than worked out from the name. MarkTile carries a comment where your own logo goes; never redraw a brand's logo. Then rewrite the rules in your service's terms.

The grid is three columns from lg, two from sm and one on a phone, in shared hairlines with no card edges. In a right-to-left layout the cells and their order flip while the code terms keep their direction, and the arrow points down so it does not mirror. The header fades up once on load, and not at all with reduced motion.