Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.runable.com/llms.txt

Use this file to discover all available pages before exploring further.

​
What Is the “Made with Runable” Badge?

The “Made with Runable” badge is a small floating pill that appears in the bottom-right corner of every website built and deployed through Runable. It displays the Runable logo and the text “Made with Runable”, and links back to runable.com.
PropertyValue
PositionFixed, bottom-right (bottom: 20px, right: 20px)
Z-index10000 (always on top of page content)
Component<RunableBadge /> from @runablehq/website-runtime
Filepackages/website-runtime/src/ui/runable-badge.tsx
Icon filepackages/website-runtime/src/ui/icons/runable-icon.tsx
Hover assetpackages/website-runtime/src/ui/background.png
There is no settings toggle or dashboard option to hide the badge. Removing it requires a code change and redeployment.

​
How to Remove the Badge

​
Step 1: Remove the RunableBadge Component

Open your website’s root component — usually App.tsx — and delete the <RunableBadge /> line:
App.tsx
  import { AgentFeedback, RunableBadge } from "@runablehq/website-runtime";

  function App() {
    return (
      <div>
-       <RunableBadge />
        <Navbar />
        <Hero />
        {/* ... */}
      </div>
    );
  }
If RunableBadge is the only thing you were importing from that line, clean up the import too:
App.tsx
- import { AgentFeedback, RunableBadge } from "@runablehq/website-runtime";
+ import { AgentFeedback } from "@runablehq/website-runtime";

​
Step 2: Redeploy Your Website

After removing the component, redeploy your website for the change to take effect. The badge will no longer appear on your live site.

​
Optional: Delete Badge Files from Your Codebase

If you want to fully remove all badge-related code, you can safely delete these files:
  • packages/website-runtime/src/ui/runable-badge.tsx — the badge component
  • packages/website-runtime/src/ui/icons/runable-icon.tsx — the badge icon SVG
  • packages/website-runtime/src/ui/background.png — the hover background image
Also remove the export from packages/website-runtime/src/index.ts:
index.ts
- export { RunableBadge } from "./ui/runable-badge";
The data-runable-badge CSS rule in packages/website-runtime/src/core/selection.ts is harmless and can be left in place.

​
Optional: Remove from Shared Chat Pages

A separate “Made with Runable” banner appears on shared chat pages (not websites). To remove that, edit packages/web/src/components/chat/shared-chat-action.tsx and remove or replace the <SharedChatAction /> component.

​
FAQ

No. There is currently no toggle, API endpoint, or database setting to control the badge. It must be removed by editing your website’s source code and redeploying.
No. The badge is purely cosmetic branding. Removing it does not affect your website’s functionality, analytics, database, payments, or your Runable plan.
Yes, but it is not recommended. You could add [data-runable-badge] { display: none !important; } to your global styles, but removing the component entirely is cleaner and avoids shipping unused code.
No — as long as you saved the code change removing <RunableBadge />. The agent does not re-add the badge on subsequent deployments.