- Where to find it
- On the composer’s palette, labelled Custom. Drag it onto the canvas to add one.
- Its settings
- 2 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
Custom is a handshake, not a finished control. Your developer builds something in the website — a booking form, a pricing calculator, a product picker — and registers it under a short name. You drop Custom on the canvas, type that same name, and fill in the settings they told you the component reads. On the published site the real component appears in that place.
In the editor you will only ever see a dashed box with the name in it. That is expected, and it is not a bug. RuleCMS does not have your website's code, so it cannot draw the real form. The box is the slot. The website fills it after you publish.
That split is the point. Text, Image, Button, and Embed are components RuleCMS ships to everyone. A booking form that talks to your own API is yours, and it lives in your website. Custom is how you place one of those and change a variant, a count, or a flag without asking a developer to republish the site every time.
Work with your developer in this order. They write the component and register the name in the app. They give you a card: the exact name to type, the settings it understands, and which type each setting is — text, number, yes/no, or JSON. You add Custom, type the name, fill those settings, and publish. If the live page still shows the box, the name does not match or the app has not been deployed with that registration yet. Check the spelling with them before anything else.
The settings you type are just names and values. The component decides what each name means. There is no list of valid names here, because RuleCMS cannot see the component. A name it does not use is ignored. A type it did not expect is ignored too. Nothing breaks; that setting simply does nothing.
When you would use it
- A booking form, waitlist, or checkout step your developer already built in the app.
- A pricing calculator, seat picker, or product configurator whose numbers or variant a marketer should be able to change.
- A promo block, announcement, or experiment that is a real React component — not a picture and not an embed — and that should come and go from a page without a code change.
- A control that should be a different component on phones than on desktop, using a second name your developer also registered.
- A slot you want gone on some devices: leave Custom as it is and use Hide on the column.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Component Name | Component Name | The name your developer registered for this component in the app. |
| Props | Props | The settings passed to the component — each one a name, a type, and a value. |
Watch out for
- The dashed box in the editor is normal. The dashed box on the live site is not — the name is wrong, or the developer has not registered it in the app that is serving the page.
- The name must match exactly, including hyphens. booking-form and bookingForm are different names. Spaces and dots are not allowed, and the name must start with a letter.
- These values are public. They are stored in the page and anyone can read them. Do not put passwords, API keys, or anything secret in Props.
- Hide is a column setting, not a Custom setting. Open "Selected Column" and use Hide if you want this slot gone on phones or desktop.
- Custom is not Embed. Embed puts a YouTube video, a map, or a Calendly page in a frame. Custom puts a component that already lives in your website.
- Custom is not a team component library. A library gives you a real palette card and a preview, and it takes a RuleCMS enablement. Use Custom when the component already lives in the app and only needs a name.
- If the site embeds RuleCMS with a script tag rather than a React app, Custom cannot show the real component. The script does not contain your developer's code. Ask them which setup you are on.
- Dropping Custom and leaving Component Name empty publishes an empty slot. Type the name before you publish.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.
- Mount Your Own Components — the developer guide: register the name on
RuleCMSWidget, list the props, and know what the composer cannot do. - Custom Props and Click Handlers — pass
onClickor other behaviour by column id. Props on Custom cannot become event handlers. - Hide — the column setting that takes this slot off a device. Custom has no hide of its own.