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

# Aanpassing

> Geef QR-codes via de API een eigen stijl: vormen van stippen en hoeken, kleuren, frames en logo's.

> [!NOTE]
>
> De GetQR API is in bèta en beschikbaar voor geselecteerde workspaces. Details kunnen nog veranderen vóór de algemene release.

Geef een QR-code een stijl met de optionele objecten `styles`, `frameOptions` en `logoOptions` wanneer je hem maakt of bijwerkt. Alle velden zijn optioneel, en voor alles wat je weglaat gelden standaardwaarden.

Dezelfde drie objecten werken bij [QR-codes](https://docs.getqr.com/nl/api/endpoints/qr-codes.md), [sjablonen](https://docs.getqr.com/nl/api/endpoints/templates.md) en [bulkaanmaak](https://docs.getqr.com/nl/api/endpoints/bulk-qr-creations.md). Onbekende vormen, frames of logo's worden geweigerd met `422`.

## Voorbeeld van een ontwerpobject

```json theme={null}
{
  "styles": {
    "dotsOptions": { "type": "rounded", "color": "#000000" },
    "backgroundOptions": { "color": "#ffffff" },
    "cornersSquareOptions": { "type": "dot", "color": "#000000" },
    "cornersDotOptions": { "type": "dot", "color": "#000000" }
  },
  "frameOptions": { "id": "card", "text": "Scan me!", "color": "#000000", "textColor": "#ffffff" },
  "logoOptions": { "type": "suggested", "id": "logo-google", "scalePercent": 25 }
}
```

Stuur het mee met de rest van de QR-code:

```bash theme={null}
curl -X POST "https://getqr.com/api/v1/qrs" \
  -H "Authorization: Bearer $GETQR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "qrType": "website",
    "data": "https://example.com",
    "styles": { "dotsOptions": { "type": "rounded", "color": "#1E40AF" } },
    "frameOptions": { "id": "card", "text": "Scan me!" },
    "logoOptions": { "type": "suggested", "id": "logo-website-3" }
  }'
```

## Stijlen

Het `styles`-object bepaalt de vormen en kleuren van het patroon.

| Veld | Waarden |
| - | - |
| `dotsOptions.type` | Vorm van de stippen in het patroon: `square`, `dots`, `rounded`, `classy`, `classy-rounded`, `extra-rounded` |
| `cornersSquareOptions.type` | Vorm van het hoekvierkant (oogframe): `square`, `rounded`, `dot`, `classy-rounded` |
| `cornersDotOptions.type` | Vorm van de hoekstip (oogbal): `square`, `dot`, `dots`, `rounded`, `classy` |
| `dotsOptions.color` | Voorgrondkleur. Standaard `#000000`. |
| `backgroundOptions.color` | Achtergrondkleur. Standaard `#ffffff`. |
| `cornersSquareOptions.color`, `cornersDotOptions.color` | Worden geaccepteerd, maar hebben geen effect: hoeken gebruiken altijd `dotsOptions.color`. |

* **Kleuren.** Alleen hexwaarden: `#RGB` of `#RRGGBB`.
* **Foutcorrectie.** Altijd `Q`, en niet instelbaar. Stuur je `styles.qrOptions` mee, dan krijg je `422`.
* **Branded en AI designs.** Kun je niet via de API instellen. Stuur je `styles.logoQrArt` mee, dan krijg je `422`.
* **Inhoud.** `styles.data` wordt genegeerd. De afbeelding codeert altijd de inhoud van de QR-code.

> [!TIP]
>
> Zorg voor genoeg contrast tussen voorgrond- en achtergrondkleur, met een donkere voorgrond op een lichte achtergrond. Codes met weinig contrast worden mogelijk niet gescand. Zie [Kleuren](https://docs.getqr.com/nl/design/colors.md).

## Frames

Het `frameOptions`-object voegt een decoratief frame met een call-to-action rond de QR-code toe.

| Veld | Beschrijving |
| - | - |
| `id` | Verplicht als je `frameOptions` meestuurt. Het frametype, uit de lijsten hieronder. `none` betekent geen frame. |
| `text` | Call-to-actionlabel, maximaal 12 tekens. Standaard `Scan me!`. |
| `color` | Kleur van het frame, hex. |
| `textColor` | Kleur van het label, hex. Moet verschillen van `color` als het frame een label toont, tenzij het paar een van de ingebouwde kleurpresets van het frame is. |
| `borderColor` | Randkleur, hex. |
| `fingerPrintColor` | Accentkleur van het frame-icoon, hex. |

> [accordion] Algemene frames
>
> `none`, `card`, `card-1`, `card-2`, `card-3`, `card-4`, `card-5`, `card-7`, `card-8`, `card-9`, `card-10`, `card-11`, `card-12`, `card-13`, `card-14`, `card-15`, `card-hor`, `wreath`, `envelope`, `waitress`, `coffee-cup`, `scooter`, `clipboard`
>
> `card-hor` toont geen label.

> [accordion] Frames per QR-codetype
>
> | Type | Frames met een label | Frames zonder label |
> | - | - | - |
> | App Link | `app-3` | `app-1`, `app-2` |
> | vCard | `contact-1`, `contact-5` | `contact-2`, `contact-3`, `contact-4` |
> | E-mail | `email-1` | `email-2`, `email-3`, `email-4`, `email-5` |
> | Feedback | — | `feedback-1`, `feedback-2`, `feedback-3`, `feedback-4`, `feedback-5` |
> | Image | — | `image-1`, `image-2`, `image-3`, `image-4`, `image-5`, `image-6` |
> | Locatie | `location-3` | `location-1`, `location-2`, `location-4`, `location-5`, `location-6` |
> | Multi-Link | `multilink-3` | `multilink-1`, `multilink-2` |
> | Betaling | — | `payment-1`, `payment-2`, `payment-3`, `payment-4`, `payment-5` |
> | PDF | `pdf-1` | `pdf-2`, `pdf-3`, `pdf-4` |
> | SMS | `sms-3`, `sms-5`, `sms-7` | `sms-1`, `sms-2`, `sms-4`, `sms-6` |
> | Social Media | `social-3` | `social-1`, `social-2`, `social-4` |
> | Video | `video-1`, `video-3` | `video-2`, `video-4`, `video-5`, `video-6` |
> | Website | `website-1` | `website-2`, `website-3`, `website-4`, `website-5` |
> | WhatsApp | `whatsapp-2` | `whatsapp-1`, `whatsapp-3`, `whatsapp-4` |
> | WiFi | — | `wifi-1`, `wifi-2`, `wifi-3`, `wifi-4` |
>
> Elk frame werkt met elk QR-codetype. De indeling volgt het dashboard.

Frames zonder label hebben in het dashboard geen veld voor een call-to-action, en de regel dat `textColor` moet verschillen van `color` geldt voor hen niet.

## Logo's

Het `logoOptions`-object plaatst een logo in het midden van de QR-code. Kies met `type` het soort logo.

### Voorgesteld logo

Stel `type` in op `suggested` en kies een `id` uit de catalogus. Gebruik `logo-none` voor geen logo.

```json theme={null}
{ "logoOptions": { "type": "suggested", "id": "logo-instagram", "scalePercent": 25 } }
```

> [accordion] Alle ID's van voorgestelde logo's
>
> `logo-none`, `logo-website-3`, `logo-website-4`, `logo-link`, `logo-pdf-1`, `logo-pdf-2`, `logo-pdf-3`, `logo-picture-1`, `logo-picture-2`, `logo-picture-3`, `logo-picture-5`, `logo-picture-7`, `logo-picture-8`, `logo-video-1`, `logo-video-5`, `logo-whatsapp-1`, `logo-whatsapp-2`, `logo-whatsapp`, `logo-wifi-1`, `logo-wifi-2`, `logo-wifi-3`, `logo-wifi`, `logo-airbnb`, `logo-apple`, `logo-binance`, `logo-bitcoin`, `logo-bolt-food`, `logo-booking`, `logo-facebook`, `logo-glovo`, `logo-google`, `logo-google-maps`, `logo-google-play`, `logo-instagram`, `logo-linkedin`, `logo-location`, `logo-mail`, `logo-paypal`, `logo-stripe`, `logo-venmo`, `logo-cashapp`, `logo-braintree`, `logo-square`, `logo-verifone`, `logo-google-pay`, `logo-apple-pay`, `logo-klarna`, `logo-ayden`, `logo-giropay`, `logo-cartes-bancaires`, `logo-restaurant`, `logo-scan-me`, `logo-tripadvisor`, `logo-trustpilot`, `logo-uber-eats`, `logo-youtube`, `logo-spotify`, `logo-spotify-black`

### Je eigen logo

**1. Upload de afbeelding**

Registreer haar via [Bestanden](https://docs.getqr.com/nl/api/endpoints/files.md) met `"target": "logo"` en upload het bestand daarna naar de teruggegeven `uploadUrl`.

**2. Verwijs naar het bestand**

Stel `type` in op `uploaded` en `fileId` op de teruggegeven `fileId`. `fileId` is verplicht en moet een ID zijn die het Files-endpoint heeft teruggegeven.

```json theme={null}
{ "logoOptions": { "type": "uploaded", "fileId": "file_7bQ2xR9mKp", "scalePercent": 35 } }
```

Een onbekend bestand, een onvoltooide upload of een bestand dat voor een andere target is geüpload, wordt geweigerd.

### Logogrootte

`scalePercent` bepaalt de grootte van het logo als percentage van de QR-code. Het is een geheel getal van 15 tot 45. De standaardwaarde is 25. Andere waarden, ook verhoudingen zoals `0.25`, krijgen `422`.

## Een ontwerp bijwerken

* **Gedeeltelijke updates.** Bij [Een QR-code bijwerken](https://docs.getqr.com/nl/api/endpoints/qr-codes.md#een-qr-code-bijwerken) worden `styles`, `frameOptions` en `logoOptions` samengevoegd met het opgeslagen ontwerp. Een gedeeltelijk object wijzigt alleen wat het noemt.
* **Het logo wijzigen.** Kies je een ander logo, dan vervangt dat het opgeslagen logo, maar blijft de `scalePercent` behouden.
* **Sjablonen.** Met `templateId` bij het aanmaken worden de velden die je meestuurt samengevoegd met het ontwerp van het sjabloon. Zie [Sjablonen](https://docs.getqr.com/nl/api/endpoints/templates.md).
* **Branded en AI designs.** Een QR-code met `designKind` `branded` of `ai` is in het dashboard gemaakt. De API kan de afbeelding ervan niet bewerken, maar behoudt die wanneer je andere velden wijzigt.
* **Een ontwerp lezen.** Antwoorden geven het opgeslagen ontwerp terug onder `design`, in dezelfde vorm als de velden in het verzoek, zodat je het ongewijzigd terug kunt sturen.

## Veelvoorkomende problemen

> [accordion] 422 "Error correction is always Q and is not an input"
>
> Verwijder `styles.qrOptions` uit het verzoek.

> [accordion] 422 "Frame caption is at most 12 characters"
>
> Kort `frameOptions.text` in tot 12 tekens of minder.

> [accordion] 422 "Frame caption color must differ from the frame color"
>
> `textColor` en `color` zijn gelijk bij een frame dat een label toont. Kies een contrasterende `textColor`.

> [accordion] 422 "Logo scale is a whole number from 15 to 45"
>
> Stuur `scalePercent` als geheel percentage, bijvoorbeeld `25`, niet `0.25`.

> [accordion] De hoekkleur verandert niet
>
> Hoeken gebruiken altijd `dotsOptions.color`. `cornersSquareOptions.color` en `cornersDotOptions.color` hebben geen effect.

## Volgende stappen

> [card] [QR-codes](https://docs.getqr.com/nl/api/endpoints/qr-codes.md)

> [card] [Sjablonen](https://docs.getqr.com/nl/api/endpoints/templates.md)

> [card] [Bestanden](https://docs.getqr.com/nl/api/endpoints/files.md)

> [card] [Ontwerpoverzicht](https://docs.getqr.com/nl/design/overview.md)


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