> ## 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.

# Made with Runable Badge

> Remove, hide, or delete the 'Made with Runable' badge from your deployed website. Step-by-step guide to removing the RunableBadge component from your site.

## 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](https://runable.com).

| Property        | Value                                                    |
| --------------- | -------------------------------------------------------- |
| **Position**    | Fixed, bottom-right (`bottom: 20px`, `right: 20px`)      |
| **Z-index**     | `10000` (always on top of page content)                  |
| **Component**   | `<RunableBadge />` from `@runablehq/website-runtime`     |
| **File**        | `packages/website-runtime/src/ui/runable-badge.tsx`      |
| **Icon file**   | `packages/website-runtime/src/ui/icons/runable-icon.tsx` |
| **Hover asset** | `packages/website-runtime/src/ui/background.png`         |

<Note>
  There is no settings toggle or dashboard option to hide the badge. Removing it requires a code change and redeployment.
</Note>

## 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:

```diff App.tsx theme={null}
  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:

```diff App.tsx theme={null}
- 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`:

```diff index.ts theme={null}
- export { RunableBadge } from "./ui/runable-badge";
```

<Tip>
  The `data-runable-badge` CSS rule in `packages/website-runtime/src/core/selection.ts` is harmless and can be left in place.
</Tip>

## 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

<AccordionGroup>
  <Accordion title="Can I remove the badge from my dashboard or settings?">
    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.
  </Accordion>

  <Accordion title="Does removing the badge break anything?">
    No. The badge is purely cosmetic branding. Removing it does not affect your website's functionality, analytics, database, payments, or your Runable plan.
  </Accordion>

  <Accordion title="Can I hide the badge with CSS instead of removing it?">
    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.
  </Accordion>

  <Accordion title="Will the badge come back after I redeploy?">
    No — as long as you saved the code change removing `<RunableBadge />`. The agent does not re-add the badge on subsequent deployments.
  </Accordion>
</AccordionGroup>