Your customers get answers in your colours, fonts, corners and card styles, drawn inside your mobile app and website rather than in a vendor's window. Your team changes the look in Rendel's console, tries it on a test build and publishes it to every user with no app release.
Halden’s console, an invented store with Rendel running. Yours for two hours, no sign-up.
Halden's Appearance editor, with its assistant beside it.
Colours
Shape
Experience, Appearance and Voice go live together, for every user, on their next launch. Every published version can be put back from Published versions, so this is reversible.
Keep editingPublishCustomers notice when they are handed to someone else's tool: another font, other corners, a chat bubble that looks like nothing else in your app.
A separate widget arrives with its own type, its own corners and its own bubbles, so the moment a customer asks for help, they can tell they have left your app.
When the look is set in the build, a new brand colour or a rounder button waits for a build and a store review, and the assistant falls behind the rest of your app.
A widget that ignores your app's own theme switch can open a light panel over a dark screen, and a plain settings page takes any colour without telling you the word on your button is hard to read.
Another settings page to update after every rebrand, and on some chat tools a higher plan just to set your own colours or remove the vendor's badge.
Your team works in one editor with the phone beside it, tries the draft on a test build, then publishes to everyone.
Start with the look you already have: AI setup reads your colours, dark theme, corners, font, card style and logo from your code into a draft, each value marked with its file, and never publishes. No theme to read yet? Start from one of 12 ready themes.
Change colours, type, corners and cards and see each change on a real phone size or a desktop browser, in light and dark.
Save the draft, and your app on its test key shows it on its next launch. The console's Test page shows it right away.
One Publish sends Experience, Appearance and Voice live together. Devices pick it up on their next launch and keep the last good look for the first frame.
Every published version stays in History. Copy one into the draft, check it, and publish it again.
Colours, type, corners, the way cards and buttons are built, and each kind of card on its own. What a customer sees in an answer can match the rest of your app.
Catch a cramped card or a clipped label before a customer does. The preview shows every change on 11 real phone sizes and a desktop browser, in light and dark, upright or on its side, across the launcher, the welcome screen and a conversation.
Find white sneakers under $130 in size 42
Three pairs in white, in your 42, all under $130.
Best sellerCourt LowLeather sneaker, gum sole$118
Court MidMid-top leather sneaker$126
Dune Slip-onCanvas slip-on$74Find white sneakers under $130 in size 42
Three pairs in white, in your 42, all under $130.
Best sellerCourt LowLeather sneaker, gum sole$118Court MidMid-top leather sneaker$126Dune Slip-onCanvas slip-on$74iPhone 17Galaxy S25 UltraPixel 10Desktop browser
Colours
Shape
A look that reads well from the first tap. Each theme sets its colours, corners and message-box icons at once, checked so that no colour needs adjusting on a device. Your fonts, your logo and your words stay as they are.
Sage in dark mode
It has a dark version of its own. Use it, or let the app work one out from these colours.
Use Sage darkWork it outFind white sneakers under $130 in size 42
Best sellerCourt LowLeather sneaker, gum sole$118Court MidMid-top leather sneaker$126Four colours are enough to match your app. Set the background, the text, the accent and the text on it, and Rendel works out the other six roles for cards, image wells and the message box. Set any of the six yourself when your design system says otherwise.
Colours
Best sellerCourt LowLeather sneaker, gum sole$118Court MidMid-top leather sneaker$126No surprises on the device. If a colour would be hard to read, the console names the pair, shows the colour the app will draw instead and offers it in one click. A contrast problem never blocks a save: saving and publishing work either way.
One colour is deepened on the device.
Label on a filled control would be 3.00:1, under the 4.5:1 a reader needs. That is the word inside your accent button.
Match the label colourDark mode that looks as deliberate as your light one. Set your own dark colours, take a theme's dark version, or let Rendel work one out that keeps your accent readable on a dark ground. By default it follows the device, and on a website your page's own theme setting comes first.
Shown when the phone or the browser is in dark mode. A greyed colour is worked out from your light ones, as your app does it. Type over one to choose it.
Rendel's page can wear the gradient your screens already use: two to four colours in one of eight directions. If no text could be read on it, the device keeps a plain background.
Background gradient
The gradient is set on the light theme. The dark theme keeps a plain background unless AI setup reads a dark gradient from your code.
Rendel's words read like the rest of your app. Name your body and display fonts and set each text step, from Display to Caption. Fonts are named, not downloaded, so your app ships them the way it already does.
Type
Previewed from Google Fonts. Your app has to include the font for it to show.
Cards and buttons keep your app's shape. Set card corners from square to soft, and button corners from square to a full pill. Chips and the launcher follow the buttons.
Best sellerCourt LowLeather sneaker, gum sole$118Answer cards built the way your own are. Choose how cards sit off the page, how buttons are filled, how products are laid out, how order tracking reads and which arrows you use. Your app draws each of the five choices.
Best sellerCourt LowLeather sneaker, gum sole$118Court MidMid-top leather sneaker$126Dune Slip-onCanvas slip-on$74Best sellerCourt LowLeather sneaker, gum sole$118Court MidMid-top leather sneaker$126Dune Slip-onCanvas slip-on$74Best sellerCourt LowLeather sneaker, gum sole$118Make a price stand out, or a confirm button softer, and leave the rest alone. Give product cards, info cards, lists, the order tracker or the confirmation card their own plate, image well, corner and build, then colour and size each part. In dark mode a card takes the dark theme's colours and keeps its shape.
Layers
Price properties
Text
Best sellerCourt LowLeather sneaker, gum sole$118Court MidMid-top leather sneaker$126Dune Slip-onCanvas slip-on$74Change the right thing the first time. Click anything in the preview to open its settings, and parts that share a colour or a corner light up together, so you see what else changes before you change it.
Or click any part of the preview. Parts that share a colour or a corner light up together, because Rendel draws them from one setting.
The header, the welcome screen and the message box are part of the look too, and so is the switch that hides Rendel.
Customers can see whose assistant they are talking to: your logo sits before its name once a conversation starts. Upload it and crop it square; a new logo reaches users only when you publish.
Header
Upload your logoDrag to move. What is inside the square is what your users see.
Use thisThe first screen a customer sees speaks in your voice. The name, the welcome headline, the line under it and up to four suggestions come from Experience, and Appearance shows them in your look. One link takes you to edit the words.
Welcome screen
The box people type in looks like your own inputs. Colour the box, the words people type and the prompt, write your own prompt of up to 60 characters, and pick the glyph for attach, voice and send. Leave the prompt blank and people get the SDK's own, in their language.
Message box
Learn which answers land. Turn on a thumbs up and down under each answer, and every vote is counted in Analytics.
Feedback
Pause Rendel without shipping anything. Switch off Available in this app and, from each device's next launch, the button is gone and Rendel stops opening, while calls from your own code still work. Switch it back on the same way.
Rendel's button in your label, icon and style, placed where your app needs it, or no button at all and your own buttons instead.
People find help under a word they know. Write the launcher's label in up to 24 characters, show it with its icon or the icon alone, and pick one of 20 icons. Icon only still reads the label to screen readers.
Launcher
Your own mark stays sharp at launcher size. Upload it and the console turns it into one clean shape in the launcher's text colour, and warns you about thin lines or a wordmark that would look tiny. You see it on a light and a dark screen before anything is stored.
Upload your own icon
What works best
Nobody has to read around the launcher. Turn on dragging and people can push it aside: it settles on the nearer edge and keeps that place on every page, even after a restart, on that device.
Your way in can look like your own buttons. Give the launcher a gradient, a ring, a glow, a soft light and a size from 40 to 72, all published from the console. If the icon can't be read on your gradient, the button keeps the accent and the console tells you.
Gradient
Colour 1#1E3A2BColour 2#3F6B53Ring
Colour#F2F2EFWidth3Glow
Colour#9FBFAAStrength0.45Light
Across30%Down20%Strength0.7Reach0.6Size
SizeDefault56Keep your own button design and still get Rendel's behaviour. Draw the button as your own Flutter widget, and Rendel handles the tap, the label read to screen readers, the unread count, stepping aside and dragging. Appearance notices your own button and says which of its settings still apply.
RendelLauncher(
builder: (context, status) =>
HaldenAskButton(label: status.label),
)Your own button
Your app draws this button as its own widget in code (RendelLauncher builder). The gradient, light, ring, glow, size and icon set here don't change it in the app; the label, visibility and drag still do.
The way in sits where your customers already look. In your mobile app you put Rendel's button in a corner, a bar or a settings row, and on a website it sits in a corner. Or turn it off and open Rendel from your own buttons, with one way in on screen at a time.
This is how the industry demo apps on rendel.ai open Rendel: from their own tab.
Rendel moves like one of your screens, not a pop-up. In your mobile app it opens as a sheet over the screen, and while a screen it opened is in front it shrinks to a bubble, then grows back as it was left. On a website it opens as a panel, and on a phone as a sheet with the page dimmed behind.
What you publish is drawn by your app itself, reaches devices on their next launch, and falls back to your code's own look if anything goes wrong.
Answers feel native because your app draws them. On iOS and Android your app's own Flutter widgets draw every answer, and on a website Rendel draws in the page with its styles kept apart from yours. The same colour arithmetic runs in the console and both SDKs, so the colours you preview are the colours that ship.
Best sellerCourt LowLeather sneaker, gum sole$118Add to bag#1E3A2BConsole previewBest sellerCourt LowLeather sneaker, gum sole$118Add to bag#1E3A2BYour mobile appBest sellerCourt LowLeather sneaker, gum sole$118Add to bagFind a look again by its name, and take one back off quickly. Name a publish, such as Autumn brand refresh, and History keeps it under that name. Owners and Admins can roll the live version back from Experience's Published versions in one confirmed step.
Appearance › History
Experience › Published versions
Roll back live to v2?
CancelRoll back liveIf the look can't arrive, customers still see a finished assistant. Never published, offline, timed out, an error or a value out of range: in each case the app draws the look its own code sets. Settings from a newer server version are ignored, not fatal.
If any of these happens:
Your code's look, every time
What your team sends looks like the rest of Rendel. Follow-ups, and an open conversation with your team, sit at the top as cards in your card colour, corners and accent: up to three at a time, from the last seven days.
Your app looks right before anything is published. Your developers set a theme in code from four colours and choose light, dark or the device's setting, and the console's look sits on top of it. On Flutter they can also redraw a catalog component with your own widget.
final theme = RendelTheme.fromTokens(
surface: const Color(0xFFF2F2EF),
onSurface: const Color(0xFF141414),
accent: const Color(0xFF1E3A2B),
onAccent: Colors.white,
);Your developers can also pin a build to its code with remoteConfig: false.
Halden is an invented shoe store that has had Rendel in its app for five weeks. This is the walk its demo console lets you take, with nothing to set up.
Every step is a real control in your own two-hour copy.
See what Rendel does for a store that's already live, in your own copy
Your copy of HaldenYours for two hoursNo sign-up, no cardOpen the demo consolePreparing your copyThemes
History
v4livev3Copy to draftv2Copied into the draftv2 · liveShape
Experience, Appearance and Voice go live together, for every user, on their next launch. Every published version can be put back from Published versions, so this is reversible.
Keep editingPublishHalden, on your phone
Published. Your Halden phone shows it.It shows what you published.
Halden's Appearance, yours for two hours with no sign-up. Publish a look and watch Halden's own phone show it.
What changes when the assistant is part of your app rather than a tool on top of it.
| What | Rendel | A separate chat widget |
|---|---|---|
| Where it is drawn | Inside your app: your mobile app's own widgets, no web view, and in the page on a website, with its styles kept apart | Often the vendor's own messenger screen, opened over your app |
| How far the look goes | Ten colour roles, corners, six type steps, five build choices, each kind of card down to its parts, and a page gradient | Usually a brand colour, a logo and a launcher image; some add a header image or a few fonts |
| Fonts | Any family your app already ships, named for body text and headings | A short list of web fonts on some tools, none on colour-only settings |
| Light and dark | Your own dark colours, a theme's dark version or one worked out from your light ones; follows the device, or your page's own setting on the web | A palette per theme, where offered |
| Contrast | Checked as you edit, with the colour the device will draw and a one-click fix | Usually left to you |
| Changing the look | A draft on your test build, then one Publish with no app release, and any published version back in a step | One live settings page; some mobile SDKs take a theme file and a new build |
| The way in | A launcher in your label, icon and button style that people can drag, or your own button with Rendel's badges and behaviour | A launcher in the vendor's shape, with a position and an image to choose |
| Who sets it up | Your coding agent reads your theme from your code into a draft, each value marked with its file | Someone copies hex codes into a settings page |
And what your team sends from Engage arrives at the top of Rendel in the same look.
Where a separate tool can be ahead: native Swift, Kotlin and React Native SDKs. Rendel's Mobile SDK is for Flutter apps today, and its Web SDK for websites.
The look holds nothing about your users, and only the people who set up your assistant can change it.
Every save, publish and upload is checked against the person's role.
| Role | Edit, save, publish, restore, upload | Roll back live |
|---|---|---|
| Owner | Yes | Yes |
| Admin | Yes | Yes |
| Developer | Yes | No |
| Analyst | Sees it, read only | No |
| Conversation reviewer | Sees it, read only | No |
| Customer support | No access: this role sees Support only | No |
The look is colours, sizes, font names, your words on screen, your logo and your launcher icon. Your assistant's instructions, knowledge and actions never travel with it.
What you publish is served to every copy of your app. A draft is not private either: the test key ships inside test builds and can be read out of one, so keep unannounced names out of a draft.
Your look, your logo and your launcher icon are kept in Frankfurt (eu-central-1). The logo and icon sit in a private store and are served only to a copy of your app that holds its key, and a draft logo only to the test key.
Fonts are named, never linked or downloaded, and the logo and icon travel as ids, never as addresses.
Every published version stays in History, and every save and restore is in the audit log with its version. Each device keeps the last good look for its next launch, and the place a person dragged the launcher to.
When your app asks for its look, Rendel notes the SDK version and platform, at most every five minutes, and which launcher it draws. On a live key it counts the device toward your plan's users, at most once a day, for 90 days after it was last seen.
Your users have nothing to switch off here: their device's light or dark setting picks the theme unless your app sets one. Your team can hide Rendel for everyone with Available in this app, which hides it on screen and is not a security control.
Appearance comes with the SDK your app already runs and with every plan, so turning it on is a few steps in the console.
Appearance needs no code of its own. When your app starts, the Mobile and Web SDK fetches the published look. Current versions: Flutter 0.82.0, Web 0.57.0.
Pick a theme or set your colours, then Save draft to try it and Publish to send it. Owners, Admins and Developers can publish.
Appearance is on every plan, the free Pilot included, and editing or publishing it uses none of your messages.
Light, dark or the device's setting; where Rendel's button sits, or opening Rendel from your own buttons; your own launcher widget; bundling the fonts you name; and remoteConfig: false to pin a build to its code.
An older SDK simply ignores settings it does not know yet.
| Part of the look | Mobile SDK (Flutter) | Web SDK |
|---|---|---|
| Colours, fonts, sizes, corners, published from the console | Every version | Every version |
| Header logo | 0.46.1 | 0.23.2 |
| Dark mode | 0.45.0 | 0.22.0 |
| Helpful? under answers | 0.49.0 | 0.26.0 |
| Background gradient | 0.52.0 | 0.30.0 |
| Cards at the top of Rendel | 0.59.7 | 0.38.7 |
| Launcher label style, 20 icons, your own icon, dragging | 0.66.0 | 0.44.0 |
| Unread count and dot on the launcher | 0.73.0 | 0.50.0 |
| Launcher gradient, ring, glow and size | 0.79.0 | 0.55.0 |
| Launcher light, icon size and glow strength | 0.80.0 | 0.56.0 |
| Your own launcher widget | 0.81.1 or later | Not on the web: launcher: false and your own button |
No. In your mobile app, your app's own Flutter widgets draw every answer, with no web view. On a website, Rendel draws in your page with its styles kept apart from yours. Either way it uses your colours, fonts, corners and card styles, set in Assistant › Appearance.
Yes. Name a body font and, if you like, a display font for headings. Fonts are named, never downloaded, so your app has to include the font, as it does for its own screens. On a website with no font named, Rendel takes your page's own body font.
Yes. By default it follows the device. On a website it reads your page's data-theme first, then the browser's setting, and watches both. In a mobile app your developers choose light, dark or the device's setting in code. Set your own dark colours, take a theme's dark version, or let Rendel work one out.
Yes. Every published version stays in History: copy one into the draft, check it on your test build and publish it again. Owners and Admins can also roll the live version back from Experience's Published versions.
The console tells you while you edit: which pair falls under 4.5:1 for text or 3:1 for a control's edge, the colour the device will draw instead, and a button to take it. It never blocks a save. On the device, a colour that cannot be read is deepened so the words stay readable.
Yes. On a website, turn the launcher off and open Rendel from your own button, or show the launcher only on some pages. In a mobile app you place Rendel's button where you want it, or open Rendel from any button of yours. Rendel keeps one way in on screen at a time.
Its label, up to 24 characters, or the icon alone; one of 20 icons or your own; a gradient, ring, glow, soft light and a size from 40 to 72; and whether people can drag it. All of it is published from the console. In a Flutter app you can also draw the button yourself and keep Rendel's badges.
Yes. Choose shadow, outline or flat cards, filled or outlined buttons, product tiles, lists or photos, and three order-tracking styles. Then give each kind of card its own colours, corners and part sizes, such as a larger price or a softer confirm button.
Yes. AI setup reads your light and dark colours, corners, font, card style and logo from your code and writes them into the Appearance draft, each marked with the file it came from. It never publishes. On a live app, a later code sync waits in Sync review on Home.
The look holds nothing about your users: it is colours, sizes, font names, your words on screen, your logo and your launcher icon. It never carries your instructions, knowledge or actions. It is stored in Frankfurt (eu-central-1), with the logo and icon in a private store served only to your app's key.
No extra cost. Appearance is on every plan, the free Pilot included, and editing or publishing uses no messages. Owners, Admins and Developers can edit, save, publish and restore it, and Owners and Admins can also roll the live version back. Analysts and conversation reviewers see it read only.
Not yet. Rendel's Mobile SDK is for Flutter apps on iOS and Android, and its Web SDK is for websites. There is no native Swift, Kotlin or React Native SDK today; Platform support in the docs says where each one stands.
Start free on your own, or tell us what your customers do most and we’ll show you that exact workflow, working, in a tailored demo.
Prefer email?
sales@rendel.aiTell us about your app and we’ll show the right workflow in a tailored demo.