Askpill
Set up Askpill
You are on Askpill 1.1. See the changelog.
No code is needed. Follow these steps in order. The on-canvas Setup Notice only appears in the Framer editor and in Preview. Visitors on your live site never see it.
Start here
This remix opens on the Oddloaf Bakery example. Open Home, click the pill in the corner and ask a question, or tap a suggested question. It answers right away with example answers from the sample bakery notes, so no key is needed to try it.
To put Askpill on your own site, follow the seven steps below. Example answers switch off by themselves as soon as you change the business name, Knowledge or FAQs, add a key or Worker, or publish to your own domain. You can also turn off Example answers in the right panel.
Pasted Askpill from the example site?
If you copied Askpill from the Oddloaf example and pasted it onto your own site, it still carries the example’s content (Name, Short name, Label, Greeting, Suggested, Knowledge, FAQs, Hours, Services, Contact, Policies, Email) and the example’s colours (Primary, Surface, Text and Matched theme). The Setup Notice says so in a yellow box and lists exactly which fields.
Paste a key into API Key (step 2 below), or a Worker URL into Worker URL.
Open Preview on your real site page and click Scan this site on the Setup Notice.
Accept the new look, then copy the theme code into Matched theme, and clear Primary, Surface and Text and set Radius and Scheme to Auto. The preview bar lists the ones you still need to clear.
Review the FAQs, Knowledge and names the scan wrote, Accept, then copy the code into Scanned site.
1. Place Askpill on a page
The recommended way is to open the Component URL from your purchase (the Framer Marketplace link) while you are signed in to Framer, and insert Askpill onto your page. This is the install that receives updates. You can also remix this example project to try the Oddloaf demo, this Setup page and the Worker file, but a remix is a copy and does not receive updates. Drop Askpill on the page. The default mode is the launcher pill, which sits in a corner. Open the right panel. Every setting is a property you can edit, or a CMS collection you can bind.
2. Paste a free Gemini key, for Preview
Open aistudio.google.com/apikey and create a key. The free tier does not need a card. In Framer, select Askpill. In the right-hand properties, under Provider and Model, paste the key into API Key. You do not need Preview for this: the API Key field has a Get a free Gemini key link right above it. Google Gemini is already the selected provider. The recommended model is gemini-3.5-flash-lite. If a different Gemini model is busy, Askpill falls back to that one and shows a short note.
This key lives in the page, so it is fine for Preview. Before you put the site on a live domain, do the Worker steps below and clear this field. Gemini’s free tier may use prompts to improve its models. If that is not acceptable, use a paid key or another provider, and keep the key in the Worker.
3. Add your business info and FAQs
The quickest way: with a key or Worker connected, open Preview and click Scan this site on the Setup Notice (see Scan this site below). Or fill the fields yourself. Set the business name and a short name. Paste hours, services, contact, and any policies into those fields, or into the Knowledge box. Add FAQs in the FAQs list: a question, an answer, and an optional category. A teammate who is not a developer can edit these anytime.
To bind a CMS collection instead: open the CMS panel and create a collection named FAQs, with Question, Answer, and Category fields. Add one item per question. Select Askpill, find the FAQs property, and click the bind icon. Map those three fields. FAQs are used first, then Knowledge, then the structured fields, then (if you turn on Learn from page) the visible page text. Your own notes always win. Do not put secrets, keys, or private customer data in Knowledge or in the CMS.
4. Choose a mode, or leave the pill
Launcher pill is the default: a corner button that opens a compact panel on desktop and a bottom sheet on a phone. Inline answer bar is a search bar you place in a section; answers expand like an accordion, with no chat bubbles. Suggested-question chips are a row of starter questions; tapping one opens the panel and streams the answer. Headless is optional and advanced, and uses Framer’s Code Overrides dropdown. You still do not write code.
5. Style, or leave auto-theme on
Auto-theme is on by default. It reads your page’s fonts, background, text, and the color of your buttons, and matches them. You can override individual colors in the Style section, or turn auto-theme off.
Scan this site: in Preview, click Scan this site on the Setup Notice to preview the match, then Accept, Tweak or Revert. After you accept, paste the theme code into Matched theme so every visitor gets that look with no AI call. See Scan this site below for the full walkthrough. To keep part of a page out of Askpill’s reading, add data-askpill-ignore to it.
6. Test in Preview
Open Preview, not the canvas, and ask a real question. You should get a streamed answer in a few seconds, with a short From: line that names the source, for example From: Custom cakes, never a tag like a source number. If you see a setup card, a field is still missing. Visitors on the live site never see that card; they see your contact options instead.
7. Hide the key with a free Cloudflare Worker
This is the recommended path before a live domain. A key pasted into the component ships in the page’s JavaScript. The Worker keeps the key on Cloudflare as an encrypted secret. The Cloudflare Free plan is enough (100,000 requests a day). You never write JavaScript.
Go to dash.cloudflare.com and sign in, or create a free account. Click Workers and Pages, then Create, then Worker, then the Hello World starter. Click Deploy, then Edit code. Select all, delete it, and in Framer click Copy Worker on the Setup Notice. Paste the whole file and click Deploy.
In the Worker, open Settings, then Variables and Secrets. Add a Secret named GEMINI_API_KEY with your Gemini key. Add a Text variable named ALLOWED_ORIGINS with your live site and your Framer preview, separated by a comma, with no trailing slash. Copy the Worker URL. In Framer, select Askpill. In the right-hand properties, paste that URL into Worker URL and clear the API Key field. Open Preview again and ask a question, then publish.
Scan this site
Open Preview on a real page of your site and click Scan this site on the Setup Notice. It does two things.
The look. Askpill reads colours, type and shape from the page you are on and shows a preview bar: swatches, font, corners and Light or Dark. While the preview is open it is a fresh read of this page: any Primary, Surface, Text, Radius, Scheme or Matched theme left from before is ignored until you Accept or Revert. Click Tweak to switch Light or Dark (Askpill builds a real light or dark palette from your site’s colours), change the corners, or pick another primary colour. Then Accept, or Revert to what you had.
After you accept, copy the theme code and paste it into Matched theme. Every visitor then gets that look with no AI call. If Primary, Surface, Text, Radius or Scheme were already set (for example, pasted from the example site), the preview bar tells you which ones to clear: values you set by hand still win on the live site. Turn on Refine with AI if you also want your key or Worker to review the colour read; for that step only design values are sent.
If Askpill cannot see your page (for example on the canvas), it says “Could not read this page. Open Preview on the actual site page and click Scan this site.” It never shows a default look as if it were a match.
The knowledge (needs a key or Worker). Askpill reads up to 15 pages of your site: this page, the links in your navigation and footer, your sitemap, and other links on the same site. Your API Key or Worker then writes a Knowledge summary, up to 8 FAQs, hours, services, contact, policies, a name, a short label, a greeting and suggested questions, using only text from your site. If something is not on the site, it is left out. The text of those pages is sent to your API Key or Worker provider for this scan.
You review everything on the Setup Notice and can edit any field or remove an FAQ. Click Accept and Preview uses it at once, so you can ask a question straight away.
Make it permanent. A Framer component cannot write its own properties, so after Accept, copy the short code and paste it into Scanned site in the right-hand properties. Every visitor then gets the scanned FAQs, Knowledge, hours, services, contact, policies and names. Any of those fields you have changed from the example yourself always win over the scan.
To keep part of the page out of Askpill’s reading, add the attribute data-askpill-ignore to it.
Getting updates
The way to get Askpill updates without reinstalling is to install from the Framer Marketplace using the Component URL (this is what your purchase delivers). When a new version is out, open the Assets panel and click the purple Update button next to Askpill. Your property settings stay.
If you only remixed the example project, that copy is a snapshot and does not receive updates. You can still use the remix to try the Oddloaf demo, the Setup page, and the Worker file. To get updates on your own site, install from the Component URL.
Handoff, accessibility, and if something is wrong
Set a handoff email and an optional booking link. Escape closes the panel. Focus moves into the open panel and returns when it closes. If the visitor prefers reduced motion, the open and close animation becomes a fade. If answers are vague, add a clearer FAQ. Citations should show a short title, never a source tag.
Askpill setup guide. The same words ship as docs/SETUP.md.