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

# Server-rendered ads

> Render Gravity-managed ad designs with the official SDKs.

Gravity can update a placement's ad design without requiring a publisher code change or SDK upgrade. Publishers only install the SDK and mount the appropriate ad component.

## React

```bash theme={null}
npm install @gravity-ai/react
```

Render the ad returned by your Gravity API request:

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

export function ChatResponse({ response, ads }) {
  return (
    <div>
      <p>{response}</p>
      {ads[0] && <GravityAd ad={ads[0]} />}
    </div>
  );
}
```

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

## React Native

```bash theme={null}
npm install @gravity-ai/react-native
```

Include `GRAVITY_RN_SPEC_OPTIONS` in your ad request, then render the returned ad:

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

export function ChatResponse({ response, ads }) {
  return (
    <GravityThemeProvider>
      <Text>{response}</Text>
      {ads[0] && <GravityAd ad={ads[0]} />}
    </GravityThemeProvider>
  );
}
```

See the [React Native SDK guide](/sdks/react-native) for request setup and list visibility wiring.

## iOS

Use `SpecAdView` with the ad returned by `getAds()`:

```swift theme={null}
SpecAdView(
    ad: ad,
    gravity: gravity,
    sessionId: sessionId
)
```

See the [iOS SDK guide](/sdks/ios) for installation and request setup.

## Android

Use `SpecAd` with the ad returned by `getAds()`:

```kotlin theme={null}
SpecAd(
    ad = ad,
    gravity = gravity,
    sessionId = sessionId,
)
```

See the [Android SDK guide](/sdks/android) for installation and request setup.

## Handled automatically

The official SDKs handle:

* compatible server-managed placement designs
* built-in fallback when no valid design is available
* impression and click tracking
* required ad disclosure
* light and dark themes
* server-requested feedback controls

A custom design changes presentation only. Tracking, attribution, and billing use the same ad response URLs.

## Image ads

When an ad has a product image, Gravity sends an image card layout with it: the image on one side, the copy on the other. The official SDKs render it with no code change, starting at `@gravity-ai/react` 1.3.0, `@gravity-ai/ui` 0.3.0 and `@gravity-ai/react-native` 0.2.0. Older versions keep showing the text card. Ads without an image always use the text card.

To preview an image ad, send a test request with `testAdFormat: "image"` — see [Image ads](/engine/contextual-ads#image-ads).

## Custom placement design

Contact [support@trygravity.ai](mailto:support@trygravity.ai) with your placement identifier and desired look. Gravity will configure and validate the design before it goes live.


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