SuperBot for Framer

01

What SuperBot does on Framer

Framer sites are usually built to sell a service or launch a product, and the questions that arrive are about scope, price, and timing. SuperBot answers those from the pages you point it at and turns a vague enquiry into a qualified lead, installed as one Custom Code entry that never touches the canvas.

• Nothing is added to the canvas: the widget lives in Custom Code, so designers can keep rearranging pages without breaking it.
• Color, radius, font, and avatar controls let the launcher follow your Framer styles; removing the SuperBot badge is a Starter or Pro feature.
• A qualifying conversation arrives as a brief with scope and timing, not a bare form submission.
• Leads can go to Slack, HubSpot, Pipedrive, Salesforce, a Zapier Catch Hook, or any HTTPS webhook.

02

Before you install

The quality of the first answers depends on what a visitor can already read on your site, so publish your current shipping, returns, and contact information before training the agent. Have your site URL and one test page ready.

• Use the site that should be connected to this SuperBot workspace, not a staging copy.
• Check that your policy and product pages are written for customers rather than internal staff.
• Decide where escalations should land: the SuperBot inbox, Slack, or your existing support process.
• Copy the exact snippet from your SuperBot dashboard so the site ID routes conversations to the right workspace.

03

Install SuperBot on Framer

Site Settings → Custom Code → Add Script, placed at End of <body> on all pages and set to run once. Publish the site. Framer injects custom code into published pages, so check the live URL rather than the canvas.

• Sign up free and copy the two-line embed from your SuperBot setup page.
• Add the URLs of your pricing, services, and FAQ pages, and paste any answers that only live in your head.
• In Framer, open Site Settings → Custom Code, click Add Script, and paste the snippet with End of <body> as the placement, set to run once.
• Tune the widget colors, radius, and avatar to match your Framer styles.
• Publish, then test on the published domain rather than the canvas.

04

Check that it is live

Open your site in a private window rather than the editor or preview, because most platforms only serve custom code on the published site. The launcher should appear in the lower corner within a second or two.

• Load a real published URL, not an editor preview or a password-protected page.
• Open the launcher and send a question you know the answer to, then confirm the reply cites your own content.
• Check one product or interior page as well as the home page, since templates can differ.
• If you run several languages or store views, check one page in each.

05

If the widget does not appear

Almost every failed install is one of four things: the change was never published, a cache is still serving the old page, the snippet carries the wrong site ID, or another script is stripping it.

• Framer changes pages without a full reload. Running the script once is enough; if you pick run on every page visit instead, SuperBot's loader ignores the second copy.
• Framer's own help docs call the same panel Project Settings; either way, look for the Custom Code tab and its Add Script button.
• If a sticky CTA bar or cookie notice sits in the bottom-right corner, switch the bubble position in SuperBot's widget settings instead of moving Framer layers.
• Framer CMS items are separate URLs. Add the case studies or pricing items that answer real questions as individual knowledge sources.
• Open your browser console and look for a blocked request to superbotapp.ai, which points at a Content-Security-Policy or an ad blocker.
• Confirm the site ID in the snippet matches the workspace you are looking at in the dashboard.

06

Train and test before you send traffic

Approve a small, representative set of answers before the widget meets real customers. Test the questions that normally create tickets or stop a purchase, and correct the wording once so every later answer inherits it.

• Start with the ten questions your team answers most often.
• Check that policy answers link to the live page that supports them.
• Add a trained answer for anything the agent gets wrong rather than editing the source page twice.
• Decide what should escalate immediately — refunds, complaints, anything account-specific.

Common questions