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

# Personalización

> Da estilo a los códigos QR con la API: formas de puntos y esquinas, colores, marcos y logotipos.

> [!NOTE]
>
> La API de GetQR está en beta y solo está disponible para algunos espacios de trabajo. Los detalles pueden cambiar antes del lanzamiento general.

Da estilo a un código QR con los objetos opcionales `styles`, `frameOptions` y `logoOptions` al crearlo o actualizarlo. Todos los campos son opcionales, y lo que omitas toma los valores por defecto.

Los mismos tres objetos funcionan en [códigos QR](https://docs.getqr.com/es/api/endpoints/qr-codes.md), [plantillas](https://docs.getqr.com/es/api/endpoints/templates.md) y [creaciones masivas](https://docs.getqr.com/es/api/endpoints/bulk-qr-creations.md). Las formas, los marcos o los logotipos desconocidos se rechazan con `422`.

## Ejemplo de objeto de diseño

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

Envíalo junto con el resto del código QR:

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

## Estilos

El objeto `styles` define las formas y los colores del patrón.

| Campo | Valores |
| - | - |
| `dotsOptions.type` | Forma de los puntos del cuerpo: `square`, `dots`, `rounded`, `classy`, `classy-rounded`, `extra-rounded` |
| `cornersSquareOptions.type` | Forma del cuadrado de esquina (marco del ojo): `square`, `rounded`, `dot`, `classy-rounded` |
| `cornersDotOptions.type` | Forma del punto de esquina (pupila del ojo): `square`, `dot`, `dots`, `rounded`, `classy` |
| `dotsOptions.color` | Color de primer plano. Por defecto, `#000000`. |
| `backgroundOptions.color` | Color de fondo. Por defecto, `#ffffff`. |
| `cornersSquareOptions.color`, `cornersDotOptions.color` | Se aceptan, pero no tienen efecto: las esquinas siempre usan `dotsOptions.color`. |

* **Colores.** Solo valores hexadecimales: `#RGB` o `#RRGGBB`.
* **Corrección de errores.** Siempre `Q`, y no es un parámetro de entrada. Enviar `styles.qrOptions` devuelve `422`.
* **Branded designs y AI designs.** No se pueden definir con la API. Enviar `styles.logoQrArt` devuelve `422`.
* **Contenido.** `styles.data` se ignora. La imagen siempre codifica el contenido del código QR.

> [!TIP]
>
> Mantén suficiente contraste entre los colores de primer plano y de fondo, con un primer plano oscuro sobre un fondo claro. Los códigos con poco contraste pueden no escanearse. Consulta [Colores](https://docs.getqr.com/es/design/colors.md).

## Marcos

El objeto `frameOptions` añade un marco decorativo con una llamada a la acción alrededor del código QR.

| Campo | Descripción |
| - | - |
| `id` | Obligatorio si envías `frameOptions`. El tipo de marco, de las listas siguientes. `none` significa sin marco. |
| `text` | Etiqueta de la llamada a la acción, hasta 12 caracteres. Por defecto, `Scan me!`. |
| `color` | Color del marco, en hexadecimal. |
| `textColor` | Color de la etiqueta, en hexadecimal. Debe ser distinto de `color` cuando el marco muestra una etiqueta, salvo que el par sea uno de los preajustes de color del marco. |
| `borderColor` | Color del borde, en hexadecimal. |
| `fingerPrintColor` | Color de acento del icono del marco, en hexadecimal. |

> [accordion] Marcos generales
>
> `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` no muestra etiqueta.

> [accordion] Marcos por tipo de código QR
>
> | Tipo | Marcos con etiqueta | Marcos sin etiqueta |
> | - | - | - |
> | App Link | `app-3` | `app-1`, `app-2` |
> | vCard | `contact-1`, `contact-5` | `contact-2`, `contact-3`, `contact-4` |
> | Correo electrónico | `email-1` | `email-2`, `email-3`, `email-4`, `email-5` |
> | Opiniones | — | `feedback-1`, `feedback-2`, `feedback-3`, `feedback-4`, `feedback-5` |
> | Image | — | `image-1`, `image-2`, `image-3`, `image-4`, `image-5`, `image-6` |
> | Ubicación | `location-3` | `location-1`, `location-2`, `location-4`, `location-5`, `location-6` |
> | Multi-Link | `multilink-3` | `multilink-1`, `multilink-2` |
> | Pago | — | `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` |
>
> Cualquier marco funciona con cualquier tipo de código QR. La agrupación es la misma que en el panel.

Los marcos sin etiqueta no tienen campo de llamada a la acción en el panel, y la regla de que `textColor` debe ser distinto de `color` no se les aplica.

## Logotipos

El objeto `logoOptions` coloca un logotipo en el centro del código QR. Define `type` para elegir el tipo de logotipo.

### Logotipo sugerido

Define `type` como `suggested` y elige un `id` del catálogo. Usa `logo-none` para no poner logotipo.

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

> [accordion] Todos los ID de logotipos sugeridos
>
> `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`

### Tu propio logotipo

**1. Sube la imagen**

Regístrala con [Archivos](https://docs.getqr.com/es/api/endpoints/files.md) usando `"target": "logo"` y sube después el archivo a la `uploadUrl` devuelta.

**2. Haz referencia al archivo**

Define `type` como `uploaded` y `fileId` con el `fileId` devuelto. `fileId` es obligatorio y debe ser un ID devuelto por el endpoint de archivos.

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

Se rechaza un archivo desconocido, una subida sin terminar o un archivo subido para otro target.

### Tamaño del logotipo

`scalePercent` define el tamaño del logotipo como porcentaje del código QR. Acepta un número entero de 15 a 45. El valor por defecto es 25. Otros valores, incluidas proporciones como `0.25`, devuelven `422`.

## Actualizar un diseño

* **Actualizaciones parciales.** En [Actualizar un código QR](https://docs.getqr.com/es/api/endpoints/qr-codes.md#actualizar-un-código-qr), `styles`, `frameOptions` y `logoOptions` se combinan con el diseño guardado. Un objeto parcial solo cambia lo que indica.
* **Cambiar el logotipo.** Elegir otro logotipo sustituye el guardado, pero conserva su `scalePercent`.
* **Plantillas.** Con `templateId` al crear, los campos que envías se combinan sobre el diseño de la plantilla. Consulta [Plantillas](https://docs.getqr.com/es/api/endpoints/templates.md).
* **Branded designs y AI designs.** Un código QR con `designKind` `branded` o `ai` se creó en el panel. La API no puede editar su imagen, pero la conserva cuando cambias otros campos.
* **Leer un diseño.** Las respuestas devuelven el diseño guardado en `design`, con la misma forma que los campos de la solicitud, así que puedes volver a enviarlo.

## Problemas habituales

> [accordion] 422 "Error correction is always Q and is not an input"
>
> Quita `styles.qrOptions` de la solicitud.

> [accordion] 422 "Frame caption is at most 12 characters"
>
> Acorta `frameOptions.text` a 12 caracteres o menos.

> [accordion] 422 "Frame caption color must differ from the frame color"
>
> `textColor` y `color` son iguales en un marco que muestra una etiqueta. Elige un `textColor` que contraste.

> [accordion] 422 "Logo scale is a whole number from 15 to 45"
>
> Envía `scalePercent` como porcentaje entero, por ejemplo `25`, no `0.25`.

> [accordion] El color de las esquinas no cambia
>
> Las esquinas siempre usan `dotsOptions.color`. `cornersSquareOptions.color` y `cornersDotOptions.color` no tienen efecto.

## Siguientes pasos

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

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

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

> [card] [Descripción general del diseño](https://docs.getqr.com/es/design/overview.md)


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