# Embed Ads on your Website

Boatvertizer offers 3 ways to integrate your boats into your website.


# JavaScript Embed

Embed your ads within minutes. Our embed is the easiest way to integrate your boats into your website.

### Getting Started

For each integration, you need to create an embed code in Boatvertizer. Go to "Tools > Embed".

Each embed code consists of two lines of code containing a token:

{% code title="Boatvertizer Embed Code" %}

```html
<div id="boatvertizer" data-token="..." data-language="en"></div>
<script src="https://embed.boatvertizer.com/v1/loader.js"></script>
```

{% endcode %}

Simply copy and paste this code (including your embed token) and integrate it into the body of your website. The ads will be rendered automatically into the site.

For technical reasons, it is not possible to integrate more than one embed on a single HTML page.

### Changing the language

To change the language of the integration, simply set the language code in the data-language attribute.

<pre class="language-html" data-title="Language Code"><code class="lang-html">&#x3C;div id="boatvertizer" data-token="..." data-language="<a data-footnote-ref href="#user-content-fn-1">it</a>">&#x3C;/div>

</code></pre>

#### Available languages

`en, de, fr, it, es, pt, nl, dk, se, fi, no, pl`

### Page Header Offset

If a visitor clicks on an ad in your embed, the browser will focus on top of the detail view of the ad. If you have a large page header and you want to keep this page header visible, you can define a offset value in pixels:

{% code title="Offset Value" %}

```
<div id="boatvertizer" data-token="..." data-offset="150"></div>
```

{% endcode %}

With this offset value set, the detail view will open with x pixels of the page header visible.

[^1]: Language Code


# JSON API

Integrate your ads in your own custom application with our straightforward JSON API.

### Getting Started

Start by creating an export token (API key) in Boatvertizer. Go to "Tools > JSON-Export".

### Basic Structure

The JSON delivers all ads in the data array. Each ad contains various attributes, presented in both formatted and raw value. We recommend using the raw values for filtering and formatted values for the user output. The formatted values are translated into the selected output [language](#language) (see further below), the raw values are not affected by the language settings.

```json
{
  "status": "ok",
  "count": 12,
  "data": [
    {
      "id": 7898,
      "status": {
        "formatted": "active",
        "value": "active"
      },
      "new_or_used": {
        "formatted": "Used Boat",
        "value": "usedboat"
      },
      "boat_category": {
        "formatted": "Power Boat",
        "value": "power"
      },
      "boat_type": {
        "formatted": "Motor Yacht",
        "value": [
          "motoryacht"
        ]
      },
      "title": {
        "formatted": "Princess 50 Fly",
        "value": "Princess 50 Fly"
      },
      "price": {
        "formatted": "EUR 500.000",
        "value": 500000,
        "currency": "EUR"
      },
```

#### Field labels

The JSON also contains a fields array with a translated description of all attributes. You can use those field labels to display the data in various languages in your application. The field labels are also translated according to your [language](#language) parameter.

```json
"fields": {
        "status": "Status",
        "advert_type": "Advert Type",
        "boat_category": "Category",
        "boat_type": "Type",
        "title": "Title",
        "price": "Asking Price",
```

### Language

You can set the language with the GET parameter **lan** in the URL of the JSON request.

#### Available languages

`en, de, fr, it, es, pt, nl, dk, se, fi, no, pl`

### Images

The fotos are listed in an array inside of each ad:

```json
"fotos": [
                {
                    "url": "https://static.boatvertizer.com/fotos/qwerty/123456-large.jpg",
                    "width": 1024,
                    "height": 575,
                    "caption": "",
                    "description": ""
                },
```

You can rewrite the **-large** suffix in the URL to the desired [image size](/embed-ads-on-your-website/image-sizes).


# XML API

{% hint style="warning" %}
The XML API is **deprecated**. We recommend using our [JSON API](/embed-ads-on-your-website/json-api).
{% endhint %}


# Raw Data XML

{% hint style="warning" %}
The XML API is **deprecated**. We recommend using our [JSON API](/embed-ads-on-your-website/json-api).
{% endhint %}


# Formatted XML

{% hint style="warning" %}
The XML API is **deprecated**. We recommend using our [JSON API](/embed-ads-on-your-website/json-api).
{% endhint %}


# Image Sizes

Available image sizes in the JSON and XML API

### Rewriting the URL

You can rewrite all Boatvertizer image URLs provided in our APIs by changing the **-{size}.jpg** suffix in the URL, e.g.:

```url
https://static.boatvertizer.com/fotos/qwerty/12345-{size}.jpg
https://static.boatvertizer.com/fotos/qwerty/12345-small.jpg
https://static.boatvertizer.com/fotos/qwerty/12345-large.jpg
```

### Available Image Sizes

Small sizes are cropped to the given dimensions, while medium and large sizes are proportionally resized to fit the longest side.

| {size}     | width (px) | height (px) | longest side (px) |
| ---------- | ---------- | ----------- | ----------------- |
| mini       | 75         | 75          |                   |
| thumbnail  | 100        | 75          |                   |
| square     | 200        | 200         |                   |
| small      | 250        | 200         |                   |
| thumblarge | 350        | 200         |                   |
| medium     |            |             | 500               |
| large      |            |             | 1024              |
| xlarge     |            |             | 1920              |