> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-docs-es/dforms/design/share-card.md).

# Tarjeta al compartir

Controla la imagen de vista previa que aparece cuando se comparte el enlace de tu formulario de dForms en chat o en redes sociales: una tarjeta de 1200×630 generada sola a partir de tu diseño, o tu pr

Un formulario se comparte como enlace mucho más de lo que se encuentra buscando. Cuando alguien pega tu enlace público en WhatsApp, Slack, LinkedIn, X o un cliente de correo, esas apps muestran una tarjeta de vista previa: un título, una descripción corta y una imagen. dForms construye esa imagen por ti, en el tamaño estándar de 1200×630, directamente a partir de los colores, la tipografía, el logo y el texto de portada de tu formulario. Cambia un color en **Diseño** y la tarjeta cambia con él. No hay que subir nada.

Si ya tienes una pieza diseñada, pega su URL y se usa esa en su lugar.

***

**Paso 1:** Abre tu formulario, abre la pestaña **Diseño** y baja a la sección **Tarjeta al compartir**. La maqueta pequeña de arriba muestra cómo se lee el enlace (tu código de cuenta y el título), para que compruebes la redacción de un vistazo.

**Paso 2:** Para usar tu propia imagen, pega un enlace público en **URL de la imagen**. El tamaño ideal es 1200×630 píxeles. Deja el campo vacío para conservar la tarjeta generada.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-693e2f1e7e6c7672a5df1b0bec88235d2e4d50ff%2Fforms-share-card-01-design-section.png?alt=media" alt="La sección Tarjeta al compartir en el panel Diseño: una mini vista previa del enlace, el campo URL de la imagen con la pista Tamaño ideal 1200×630, y la nota de que un campo vacío genera la tarjeta con los colores y el logo de arriba"><figcaption><p>La sección <strong>Tarjeta al compartir</strong>. Pega una URL de imagen para anular la tarjeta generada, o déjala vacía.</p></figcaption></figure>

**Paso 3:** Haz clic en **Publicar**. Para ver la imagen generada, abre tu enlace público y añade `/opengraph-image` al final, por ejemplo `https://app.dforms.ai/acme/f/product-fit-quiz/opengraph-image`.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-3ad8457d9ee501c720df50c2c4337abcab2230b7%2Fforms-share-card-02-generated-card.png?alt=media" alt="La tarjeta generada de 1200 por 630: el fondo claro del tema del formulario, la marca dForms, el texto del banner como píldora, el titular y el subtítulo de la portada, una barra de progreso, el número de preguntas, el nombre del sitio y un botón para empezar en el color de marca"><figcaption><p>La tarjeta generada de un formulario con tema oscuro, banner y portada. El botón de inicio toma el color de acento del formulario.</p></figcaption></figure>

## Qué muestra la tarjeta generada

La tarjeta se compone a partir del propio diseño de tu formulario, así que se parece a la página que abre.

| Parte de la tarjeta                    | De dónde sale                                                                                                                                                                                                                                                                                                                       |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Fondo y colores                        | El **Tema**, los **Colores** y el **Estilo de fondo** del formulario (incluida una imagen de fondo, atenuada para que el texto siga siendo legible).                                                                                                                                                                                |
| Tipografía, esquinas y estilo de botón | **Tipografía** y **Forma y controles** en el panel de Diseño.                                                                                                                                                                                                                                                                       |
| Logo                                   | **URL del logo del formulario** (o **URL del logo de la portada**) de la sección **Distribución**. Sin logo, la tarjeta muestra la marca de dForms.                                                                                                                                                                                 |
| Píldora sobre el titular               | El **Texto del banner** de la portada, si lo hay.                                                                                                                                                                                                                                                                                   |
| Titular                                | El **Titular** de la portada. Si está vacío, el **Título del formulario** público; si ese también lo está, el nombre interno del formulario.                                                                                                                                                                                        |
| Segunda línea                          | El **Subtítulo** de la portada. Si está vacío, el texto de la primera pregunta.                                                                                                                                                                                                                                                     |
| Pie                                    | El número de preguntas, el nombre del host (por ejemplo app.dforms.ai) y un botón de inicio en el color de acento. El botón muestra la palabra de siempre en el idioma del formulario (**Comenzar**, o **Start** en un formulario en inglés), nunca tu **Texto del botón de inicio**. El número de preguntas va en el mismo idioma. |

El título y la descripción de la vista previa del enlace (el texto junto a la imagen) salen de los mismos sitios: el **Título del formulario** público (recurriendo al nombre del formulario), y el **Subtítulo** de la portada. Sin subtítulo, la descripción es *Completa {nombre} en línea.*, o *Fill out {nombre} online.* en un formulario en inglés, donde `{nombre}` es el título público.

## Bueno saberlo

* **Las actualizaciones tardan unos minutos.** La tarjeta generada se refresca aproximadamente cada 10 minutos, así que un cambio en **Diseño** puede tardar ese tiempo en aparecer cuando vuelvas a compartir el enlace. Las plataformas sociales guardan su propia copia más tiempo; la mayoría ofrece una herramienta de «volver a rastrear» o «refrescar vista previa» si necesitas la tarjeta nueva de inmediato.
* **Tu propia imagen gana del todo.** Cuando la **URL de la imagen** está puesta, la tarjeta generada no se usa en absoluto. Usa un enlace HTTPS público a un PNG o JPG; las plataformas ignoran las imágenes que no pueden descargar.
* **Publica primero.** La tarjeta se construye a partir de la versión publicada del formulario, así que los cambios de diseño que todavía no has publicado no aparecen en ella.
* **La tarjeta sigue el idioma del formulario.** Las apps de chat y las redes sociales piden la tarjeta sin indicar un idioma, así que un formulario en **Auto** recibe el texto en inglés. Pon el **Idioma** del formulario en **Español** para tener una tarjeta en español. Un enlace con `?lang=es` cambia la descripción junto a la imagen, no la imagen. Mira [Idioma y texto de los botones](/dapta-docs-es/dforms/design/language-and-button-text.md).

## Qué sigue

* [Portada y banner](/dapta-docs-es/dforms/design/cover-screen-and-banner.md)
* [Logos, distribución y transiciones](/dapta-docs-es/dforms/design/logos-layout-transitions.md)
* [Temas, colores y fondo](/dapta-docs-es/dforms/design/themes-colors-background.md)
* [Tu enlace público](/dapta-docs-es/dforms/share/public-link.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.dapta.ai/dapta-docs-es/dforms/design/share-card.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.