---
title: Visa native annonser
description: Lägg in interna Kalender-annonser på en egen webbplats utan externa annonsnätverk.
---

# Visa native annonser

Använd annonswidgeten när du vill visa kors-annonsering från Kalender.se på en egen sajt. Den hämtar annonser direkt från Kalender.se, renderar dem som vanliga kort och spårar visningar/klick via Kalender.se.

```html
<script
  src="https://widget.kalender.se/kalender-ads-embed.js"
  data-placement="homepage"
  data-limit="3"
  async>
</script>
```

## Placeringar

### Startsida

```html
<script
  src="https://widget.kalender.se/kalender-ads-embed.js"
  data-placement="homepage"
  data-title="Tips från Kalender.se"
  data-limit="4"
  async>
</script>
```

### Kategori

```html
<script
  src="https://widget.kalender.se/kalender-ads-embed.js"
  data-placement="category"
  data-category-slug="museum"
  data-title="Utvalt i kategorin"
  async>
</script>
```

### Sök eller kommun

```html
<script
  src="https://widget.kalender.se/kalender-ads-embed.js"
  data-placement="search"
  data-query="konsert"
  data-municipality-id="80"
  data-layout="list"
  async>
</script>
```

### Relaterat till en plats

```html
<script
  src="https://widget.kalender.se/kalender-ads-embed.js"
  data-placement="related"
  data-infopoint-id="12345"
  data-title="Liknande tips"
  async>
</script>
```

## Inställningar

| Attribut | Exempel | Beskrivning |
| --- | --- | --- |
| `data-placement` | `homepage`, `category`, `search`, `related` | Vilken annonsyta som ska användas. |
| `data-limit` | `3` | Max antal annonser, 1-12. |
| `data-title` | `Tips nära dig` | Rubrik över annonskorten. |
| `data-hide-title` | `true` | Dölj rubrikraden. |
| `data-layout` | `grid`, `list`, `inline` | Layout för korten. |
| `data-theme` | `light`, `dark`, `minimal` | Enkel visuell variant. |
| `data-target` | `_self`, `_blank` | Om klick ska öppnas i samma eller ny flik. |
| `data-empty` | `hide`, `message` | Vad som händer när inga annonser finns. |
| `data-api-base` | `https://kalender.se` | Behövs normalt inte. Används för testmiljöer. |

## Test lokalt

Om du kör backend lokalt kan du peka widgeten mot lokal API:

```html
<script
  src="/kalender-ads-embed.js"
  data-api-base="http://localhost:8080"
  data-placement="homepage"
  data-empty="message"
  async>
</script>
```

Widgeten kräver inga externa annonsnätverk och skickar inte användaren via Google, Meta eller liknande.