this one is for you if you have a webflow site, yours or a client's, and want to add an ai chat to it.
if you set the type and the spacing by hand, a chat widget with someone else's font and corners is the thing you'll notice first. so there's a theme tab for the retune widget, with a css box for the parts the settings don't reach.
the bakery in the video is sunrise bakery. i made it up to show the feature. the css box comes at 1:15, where an import line gets stripped out.
the theme tab was built in a copy of retune, so it isn't switched on for new accounts by itself. sign up, then email me at olive@reframe.so and say you want the theme tab on your bot. once it's on, these are the steps.
after that, every change is in retune. the script stays the same, so you don't publish webflow again to change the look.
the chat window is an iframe from retune, not part of your page's dom. that's why your webflow fonts and styles don't reach it, and why the css box exists.
the chat button is the one part that sits on your page, outside the iframe. you style it with the button settings: side, size, icon, color and a short label. the css box doesn't reach it.
the box applies your css to the widget and nothing else. every selector gets scoped to the widget, so a rule for p or .button only touches the chat. :root, html and body mean the widget itself, and @media, @supports and @container work.
the editor lists hooks for the parts you'll want. there's one for the header and one for the message list. there are hooks for both kinds of bubble, the input, the footer and the disclaimer line. each one is a data-rt attribute, like [data-rt="bubble-bot"].
some things get stripped, and the editor tells you which. @import is one. so is a @font-face that doesn't load over https, and a javascript: link inside url(). the box holds up to 20,000 characters, with a counter.
your css shows up on the widget on your site and on the links you share to a single chat. retune's own dashboard keeps its normal look.
you can hide the bot's name. when it shows, it and the "powered by" line stay grey, and there's no css hook for them. the theme tab can't remove the "powered by" line.
there's no setting in the theme tab to hide the button and open the chat from your own element. if you need that, email me.
the font list is five families: inter, system, serif, rounded and mono. it won't load a google font by name. a @font-face rule that points at an https file is kept, so you can load your site's font that way.
the preview is a sample page, not your webflow site. after you save, reload your site to check it there.
webflow only runs custom code on some plans, so check yours before step 8.
if you build for clients, each bot has its own theme, so you set it once per client. the letter on a white label chatbot platform covers putting your own name on it.
a widget that looks right still has to answer right. questions the bot couldn't answer land in an inbox where you write the answer once. you can also keep a list of questions it has to get right and run them before you publish.
if something your design needs is missing, email me and tell me what it is.
olive