# Native

Sticky Native is Panxo's direct integration method. Install a script on your site and Panxo automatically detects AI traffic and serves native ad formats. No SSP or ad server required.

## How It Works

{% stepper %}
{% step %}

### Overview

The Panxo script runs on every pageview and analyzes the visit in real-time.
{% endstep %}

{% step %}
If the visitor was referred by an AI assistant (ChatGPT, Perplexity, Claude, Gemini, etc.), the script requests an ad from Panxo.
{% endstep %}

{% step %}
A native ad format renders on the page (sticky banner, announcement bar, smart corner, or content pause).
{% endstep %}

{% step %}
If the visitor is human, the script does nothing — your existing ads are unaffected.
{% endstep %}
{% endstepper %}

## Integration

{% stepper %}
{% step %}

### Install the script

Get your unique script tag from your dashboard at [app.panxo.ai](https://app.panxo.ai/) → **Settings → Integration**.

{% tabs %}
{% tab title="Google Tag Manager" %}

1. Create a new **Custom HTML** tag
2. Paste your script:

{% code title="GTM - Custom HTML" %}

```html
<script async src="https://cdn.panxo.ai/o/{YOUR_HASH}"></script>
```

{% endcode %}

3. Set trigger to **All Pages** (Page View)
4. Test in Preview mode — look for `[Panxo]` in the browser console
5. Publish
   {% endtab %}

{% tab title="Direct Script" %}
Add to your `<head>`:

{% code title="Direct script" %}

```html
<head>
  <script async src="https://cdn.panxo.ai/o/{YOUR_HASH}"></script>
</head>
```

{% endcode %}
{% endtab %}

{% tab title="WordPress" %}

1. **Plugins → Add New** → search **"Panxo AI Monetization"**
2. Install and activate
3. Done — the plugin handles script injection and ads.txt automatically
   {% endtab %}
   {% endtabs %}

The `async` attribute ensures the script never blocks page rendering.
{% endstep %}

{% step %}

### Configure ads.txt

Append these lines to your `ads.txt` file. Get the exact lines with your unique IDs from **Settings → Ads.txt** in your dashboard.

```
#PanxoAI
panxo.ai, YOUR_PANXO_ID, DIRECT
bidgx.com, YOUR_BIDGX_ID, DIRECT
kntxy.com, YOUR_KNTXY_ID, DIRECT
rubiconproject.com, 27034, RESELLER, 0bfd66d529a55807
themediagrid.com, FNG4LA, RESELLER, 35d5010d7789b49d
pubmatic.com, 166733, RESELLER, 5d62403b186f2ace
smartadserver.com, 5397, RESELLER, 060d053dcf45cbf3
xandr.com, 17781, RESELLER
```

The `DIRECT` IDs are unique per property — copy them from the dashboard. The `RESELLER` lines are the same for all publishers.

{% hint style="info" %}
WordPress plugin manages ads.txt automatically. Skip this step if you use the plugin.
{% endhint %}
{% endstep %}

{% step %}

### Verify

In your dashboard, click **Verify**. Panxo checks that the script loads and ads.txt is correct. Verification runs every 6 hours and completes within 24 hours.
{% endstep %}
{% endstepper %}

## Ad Formats

All formats are native cards containing: image, title, description, advertiser badge, and CTA button. Enable/disable each format from your dashboard. All achieve **CLS = 0**.

### Sticky Banner

Fixed card in the bottom-right corner of the viewport (320px wide).

* Collapsed: Thumbnail + title + CTA button (80px height)
* Expanded: Full image + advertiser badge + title + description + CTA button
* Trigger: Expands when user scrolls 200px. Auto-collapses after 5s. Dismissible.
* CLS: Uses `position: fixed` — no layout shift.

### Announcement Bar

Full-width bar at the top of the viewport.

* Collapsed: Logo + title + subtitle + "Learn More" button
* Expanded: Image + advertiser badge + title + description + CTA button (expands on hover)
* CLS: Reserves a placeholder at page load — no layout shift on expand/collapse.

### Smart Corner

Floating card in the bottom-right corner (260px wide).

* Collapsed: Small pill with logo + title + arrow icon
* Expanded: Full native card with image + advertiser badge + title + description + CTA button
* Trigger: Expands on hover or scroll.
* CLS: Uses `position: fixed` — no layout shift.

### Content Pause

Inline native card inserted between content blocks.

* Creative: Image + title + description + "Sponsored" label
* Trigger: Appears after the user pauses scrolling multiple times.
* CLS: Invisible placeholder reserved at page load — no layout shift when the card appears.

## Technical Specs

|                     |                                               |
| ------------------- | --------------------------------------------- |
| **Size**            | \~20 KB gzipped (104 KB raw)                  |
| **CDN**             | Cloudflare with Brotli/Gzip                   |
| **Load time**       | < 50ms from edge                              |
| **Loading**         | Async, non-blocking                           |
| **CLS / LCP / FID** | Zero impact                                   |
| **Browsers**        | Chrome 60+, Firefox 55+, Safari 11+, Edge 79+ |

## Troubleshooting

| Problem                     | Solution                                                                                                                   |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Script not loading          | Check browser console for errors. Verify URL matches dashboard. Disable ad blocker.                                        |
| No ads appearing            | Expected for human traffic. Panxo only shows ads to AI-referred visits. Check ads.txt is verified and formats are enabled. |
| Ads.txt verification failed | File must be at `https://yourdomain.com/ads.txt`. Copy lines from dashboard to avoid typos. Allow 24h.                     |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.panxo.ai/integrations/native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
