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

# Show ads

> Render Gravity ads with the official React component.

## React

```tsx theme={null}
import { GravityAd } from '@gravity-ai/react';

{ads[0] && <GravityAd ad={ads[0]} />}
```

`GravityAd` handles the placement design, impression and click tracking, disclosure, feedback controls, and fallback automatically.

Pass the API key used for the ad request to enable feedback submissions:

```tsx theme={null}
<GravityAd
  ad={ads[0]}
  sessionId={sessionId}
  apiKey={gravityApiKey}
/>
```

<Note>
  `apiKey` is visible in the browser and used for feedback submissions. Pass it down from your server
  with the ad response rather than referencing a server-only environment
  variable in client code.
</Note>

## Multiple placements

The response order matches the placement order in your request. Render each slot only when it fills:

```tsx theme={null}
{ads[0] && <GravityAd ad={ads[0]} />}
{ads[1] && <GravityAd ad={ads[1]} />}
```

## Custom rendering

Use the official component unless you need a fully custom renderer. Custom renderers must:

1. Open `ad.clickUrl`, not the raw landing-page URL.
2. Request `ad.impUrl` exactly once when the ad becomes visible.
3. Show a clear ad disclosure.

See the [JavaScript and React SDK guide](/sdks/javascript) for request setup.


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