Personalización

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, plantillas y creaciones masivas. Las formas, los marcos o los logotipos desconocidos se rechazan con 422.

Ejemplo de objeto de diseño

{
  "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:

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.

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.

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.

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, clipboardcard-hor no muestra etiqueta.

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.

{ "logoOptions": { "type": "suggested", "id": "logo-instagram", "scalePercent": 25 } }

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

Sube la imagen

Regístrala con Archivos usando "target": "logo" y sube después el archivo a la uploadUrl devuelta.

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.

{ "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, 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.
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

422 "Error correction is always Q and is not an input"

Quita styles.qrOptions de la solicitud.

422 "Frame caption is at most 12 characters"

Acorta frameOptions.text a 12 caracteres o menos.

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.

422 "Logo scale is a whole number from 15 to 45"

Envía scalePercent como porcentaje entero, por ejemplo 25, no 0.25.

El color de las esquinas no cambia

Las esquinas siempre usan dotsOptions.color. cornersSquareOptions.color y cornersDotOptions.color no tienen efecto.

API

Ejemplo de objeto de diseño

Estilos

Marcos

Logotipos

Logotipo sugerido

Tu propio logotipo

Tamaño del logotipo

Actualizar un diseño

Problemas habituales

Siguientes pasos

Códigos QR

Plantillas

Archivos

Descripción general del diseño

​Ejemplo de objeto de diseño

​Estilos

​Marcos

​Logotipos

​Logotipo sugerido

​Tu propio logotipo

​Tamaño del logotipo

​Actualizar un diseño

​Problemas habituales

​Siguientes pasos

Códigos QR

Plantillas

Archivos

Descripción general del diseño

Ejemplo de objeto de diseño

Estilos

Marcos

Logotipos

Logotipo sugerido

Tu propio logotipo

Tamaño del logotipo

Actualizar un diseño

Problemas habituales

Siguientes pasos