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

# Personnalisation

> Stylisez vos QR codes via l'API : formes des points et des coins, couleurs, cadres et logos.

> [!NOTE]
>
> L'API GetQR est en version bêta et réservée à certains espaces de travail. Certains détails peuvent changer avant la disponibilité générale.

Stylisez un QR code avec les objets facultatifs `styles`, `frameOptions` et `logoOptions` lors de sa création ou de sa mise à jour. Tous les champs sont facultatifs, et des valeurs par défaut s'appliquent à tout ce que vous omettez.

Ces trois objets fonctionnent de la même façon pour les [QR codes](https://docs.getqr.com/fr/api/endpoints/qr-codes.md), les [modèles](https://docs.getqr.com/fr/api/endpoints/templates.md) et les [créations en masse](https://docs.getqr.com/fr/api/endpoints/bulk-qr-creations.md). Les formes, cadres ou logos inconnus sont refusés avec `422`.

## Exemple d'objet de design

```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 }
}
```

Envoyez-le avec le reste du 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" }
  }'
```

## Styles

L'objet `styles` définit les formes et les couleurs du motif.

| Champ | Valeurs |
| - | - |
| `dotsOptions.type` | Forme des points du corps : `square`, `dots`, `rounded`, `classy`, `classy-rounded`, `extra-rounded` |
| `cornersSquareOptions.type` | Forme du carré d'angle (cadre de l'œil) : `square`, `rounded`, `dot`, `classy-rounded` |
| `cornersDotOptions.type` | Forme du point d'angle (pupille de l'œil) : `square`, `dot`, `dots`, `rounded`, `classy` |
| `dotsOptions.color` | Couleur de premier plan. Par défaut `#000000`. |
| `backgroundOptions.color` | Couleur d'arrière-plan. Par défaut `#ffffff`. |
| `cornersSquareOptions.color`, `cornersDotOptions.color` | Acceptées mais sans effet : les coins utilisent toujours `dotsOptions.color`. |

* **Couleurs.** Valeurs hexadécimales uniquement : `#RGB` ou `#RRGGBB`.
* **Correction d'erreur.** Toujours `Q`, et non réglable. Envoyer `styles.qrOptions` renvoie `422`.
* **Branded designs et AI designs.** Impossible de les définir via l'API. Envoyer `styles.logoQrArt` renvoie `422`.
* **Contenu.** `styles.data` est ignoré. L'image encode toujours le contenu du QR code.

> [!TIP]
>
> Gardez un contraste suffisant entre les couleurs de premier plan et d'arrière-plan, avec un premier plan foncé sur un fond clair. Les codes peu contrastés risquent de ne pas être scannés. Consultez [Couleurs](https://docs.getqr.com/fr/design/colors.md).

## Cadres

L'objet `frameOptions` ajoute autour du QR code un cadre décoratif avec un appel à l'action.

| Champ | Description |
| - | - |
| `id` | Obligatoire si vous envoyez `frameOptions`. Le type de cadre, parmi les listes ci-dessous. `none` signifie aucun cadre. |
| `text` | Libellé de l'appel à l'action, jusqu'à 12 caractères. Par défaut `Scan me!`. |
| `color` | Couleur du cadre, en hexadécimal. |
| `textColor` | Couleur du libellé, en hexadécimal. Doit être différente de `color` quand le cadre affiche un libellé, sauf si la paire fait partie des préréglages de couleurs intégrés du cadre. |
| `borderColor` | Couleur de la bordure, en hexadécimal. |
| `fingerPrintColor` | Couleur d'accent de l'icône du cadre, en hexadécimal. |

> [accordion] Cadres généraux
>
> `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` n'affiche pas de libellé.

> [accordion] Cadres par type de QR code
>
> | Type | Cadres avec libellé | Cadres sans libellé |
> | - | - | - |
> | App Link | `app-3` | `app-1`, `app-2` |
> | vCard | `contact-1`, `contact-5` | `contact-2`, `contact-3`, `contact-4` |
> | Email | `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` |
> | Location | `location-3` | `location-1`, `location-2`, `location-4`, `location-5`, `location-6` |
> | Multi-Link | `multilink-3` | `multilink-1`, `multilink-2` |
> | Payment | — | `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` |
>
> Tous les cadres fonctionnent avec tous les types de QR codes. Le regroupement reprend celui du tableau de bord.

Les cadres sans libellé n'ont pas de champ d'appel à l'action dans le tableau de bord, et la règle selon laquelle `textColor` doit différer de `color` ne s'applique pas à eux.

## Logos

L'objet `logoOptions` place un logo au centre du QR code. Définissez `type` pour choisir le type de logo.

### Logo suggéré

Définissez `type` sur `suggested` et choisissez un `id` dans le catalogue. Utilisez `logo-none` pour ne mettre aucun logo.

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

> [accordion] Tous les ID de logos suggéré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`

### Votre propre logo

**1. Importez l'image**

Enregistrez-la avec [Fichiers](https://docs.getqr.com/fr/api/endpoints/files.md) en utilisant `"target": "logo"`, puis importez le fichier vers l'`uploadUrl` renvoyée.

**2. Référencez le fichier**

Définissez `type` sur `uploaded` et `fileId` sur le `fileId` renvoyé. `fileId` est obligatoire et doit être un ID renvoyé par l'endpoint Files.

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

Un fichier inconnu, un import inachevé ou un fichier importé pour une autre cible est refusé.

### Taille du logo

`scalePercent` définit la taille du logo en pourcentage du QR code. La valeur est un nombre entier de 15 à 45. La valeur par défaut est 25. Les autres valeurs, y compris les ratios comme `0.25`, renvoient `422`.

## Modifier un design

* **Mises à jour partielles.** Avec [Modifier un QR code](https://docs.getqr.com/fr/api/endpoints/qr-codes.md#modifier-un-qr-code), `styles`, `frameOptions` et `logoOptions` sont fusionnés avec le design enregistré. Un objet partiel ne modifie que ce qu'il mentionne.
* **Changer de logo.** Choisir un autre logo remplace celui enregistré, mais conserve son `scalePercent`.
* **Modèles.** Avec `templateId` à la création, les champs que vous envoyez sont fusionnés par-dessus le design du modèle. Consultez [Modèles](https://docs.getqr.com/fr/api/endpoints/templates.md).
* **Branded designs et AI designs.** Un QR code dont le `designKind` vaut `branded` ou `ai` a été créé dans le tableau de bord. L'API ne peut pas modifier son image, mais la conserve quand vous modifiez d'autres champs.
* **Lire un design.** Les réponses renvoient le design enregistré sous `design`, avec la même structure que les champs de la requête : vous pouvez donc le renvoyer tel quel.

## Problèmes courants

> [accordion] 422 "Error correction is always Q and is not an input"
>
> Retirez `styles.qrOptions` de la requête.

> [accordion] 422 "Frame caption is at most 12 characters"
>
> Raccourcissez `frameOptions.text` à 12 caractères ou moins.

> [accordion] 422 "Frame caption color must differ from the frame color"
>
> `textColor` et `color` sont identiques sur un cadre qui affiche un libellé. Choisissez un `textColor` contrasté.

> [accordion] 422 "Logo scale is a whole number from 15 to 45"
>
> Envoyez `scalePercent` sous forme de pourcentage entier, par exemple `25`, et non `0.25`.

> [accordion] La couleur des coins ne change pas
>
> Les coins utilisent toujours `dotsOptions.color`. `cornersSquareOptions.color` et `cornersDotOptions.color` n'ont aucun effet.

## Et ensuite

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

> [card] [Modèles](https://docs.getqr.com/fr/api/endpoints/templates.md)

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

> [card] [Présentation du design](https://docs.getqr.com/fr/design/overview.md)


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