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

# Remove the "Made with Runable" Badge

> How to remove the Runable attribution badge from your deployed website.

## Overview

Every website deployed through Runable includes a **"Made with Runable"** badge <br />a small floating pill fixed to the bottom-right corner of the page. It links back to [runable.com](https://runable.com).

You can remove it with a one-line code change and a redeploy.

<Note>
  There is no settings toggle for badge removal. It requires editing your site's source code.
</Note>

## Badge Details

| Property      | Value                                                |
| ------------- | ---------------------------------------------------- |
| **Position**  | Fixed, bottom-right (`bottom: 20px`, `right: 20px`)  |
| **Z-index**   | `10000`                                              |
| **Component** | `<RunableBadge />` from `@runablehq/website-runtime` |
| **File**      | `packages/website-runtime/src/ui/runable-badge.tsx`  |

## Step 1: Remove the Component

Open your website's root component (typically `App.tsx`) and remove `<RunableBadge />`:

```diff App.tsx theme={null}
  import { AgentFeedback, RunableBadge } from "@runablehq/website-runtime";

  function App() {
    return (
      <div>
-       <RunableBadge />
        <Navbar />
        <Hero />
        {/* ... */}
      </div>
    );
  }
```

Clean up the import if `RunableBadge` was the only thing you used from it:

```diff App.tsx theme={null}
- import { AgentFeedback, RunableBadge } from "@runablehq/website-runtime";
+ import { AgentFeedback } from "@runablehq/website-runtime";
```

## Step 2: Redeploy

Redeploy your website for the change to take effect. The badge will no longer appear.

## Optional Cleanup

If you want to fully remove badge-related files from your codebase, you can delete these:

<AccordionGroup>
  <Accordion title="Files safe to delete">
    * `packages/website-runtime/src/ui/runable-badge.tsx` — Badge component
    * `packages/website-runtime/src/ui/icons/runable-icon.tsx` — Badge icon SVG
    * `packages/website-runtime/src/ui/background.png` — Badge hover background

    Also remove the export from `packages/website-runtime/src/index.ts`:

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

  <Accordion title="Files you can leave alone">
    * `packages/website-runtime/src/core/selection.ts` — Contains `data-runable-badge` CSS rules. Harmless if left in place.
  </Accordion>
</AccordionGroup>

## Remove from Shared Chat (Optional)

A separate "Made with Runable" banner appears on shared chat pages. To remove it, modify `packages/web/src/components/chat/shared-chat-action.tsx` and remove or replace the `<SharedChatAction />` component.

## FAQ

<AccordionGroup>
  <Accordion title="Can I toggle the badge from my dashboard?">
    No. There is currently no subscription-based toggle, database field, or API endpoint to control badge visibility. It must be removed in code.
  </Accordion>

  <Accordion title="Will removing the badge affect my site?">
    No. The badge is purely cosmetic attribution. Removing it has no impact on functionality, analytics, or your Runable plan.
  </Accordion>

  <Accordion title="What does the badge look like?">
    A dark rounded pill with a white Runable icon and "Made with Runable" text. It has a subtle backdrop blur and lifts slightly with a cyan glow on hover.
  </Accordion>
</AccordionGroup>