> ## Documentation Index
> Fetch the complete documentation index at: https://developers.arg.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Link previews

> Choose whether a shared link to your app shows a picture of it running.

When someone pastes a link to an HTML, TSX or JSX app (or to the `.app` launcher that opens it) into Slack, Arg posts a card with a picture of the app. Pasting a link is not the same as choosing to run the app, so by default Arg takes that picture without running your code. Your app's source decides whether it may run.

| Your app | Picture on the card |
| - | - |
| `.html` with the marker | The app running, scripts on |
| `.html` without the marker | The page's markup and CSS, scripts off |
| `.tsx` / `.jsx` with marker | The app running, scripts on |
| `.tsx` / `.jsx` without it | No picture - a React app is blank without scripts |

A `.app` launcher is pictured as the file it launches, so put the marker in that file. A launcher that opens a published Site gets no picture.

## Opt in from HTML

Add the `arg-live-preview` metadata to the document's `<head>`:

```html theme={null}
<!doctype html>
<html>
  <head>
    <meta name="arg-live-preview" />
    <title>Q3 revenue</title>
  </head>
  <body>
    <main id="chart"></main>
    <script type="module" src="./chart.js"></script>
  </body>
</html>
```

## Opt in from TSX or JSX

Add the same element to the tree your component returns, or put a source directive at the top of the file:

```tsx theme={null}
/* @arg-live-preview */
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(<App />);
```

## How the picture is taken

* Your app runs on the same isolated origin the Slack side panel uses, with no Arg session, so it cannot act as the person who shared the link.
* `arg.fs` reads only the files the person who shared the link can open in Arg, and only read-only.
* The picture is taken a few seconds after the page loads, at 1200 x 630.
* The picture is cached until the app's file changes.

Opt in once the app draws something worth showing on load. Leave the marker off a page whose first paint is a sign-in form, a spinner or an empty state, since that is what the card would show.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.