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

# Conectar Framer o tu propio HTML

> Dos maneras de conectar un sitio hecho en Framer o a mano: pegar el formulario de Asistian, o enviar los datos desde tu servidor.

Si controlas el código de tu sitio —Framer, un HTML propio, Next.js, lo que
sea— tienes dos caminos. El primero funciona en cualquier sitio; el segundo te
deja quedarte con tu formulario tal como está, pero **necesita que tu sitio
tenga servidor propio**.

## 1. Pegar el formulario de Asistian

Armas el formulario en Asistian y pegas una línea en tu sitio. No escribes
validación, ni manejas errores, ni tocas nada cuando agregues una pregunta.

<Steps>
  <Step title="Arma el formulario">
    En **Configuración → Formularios**, crea el formulario y publícalo en modo
    **canal**.
  </Step>

  <Step title="Autoriza tu dominio">
    En **Configuración → Canales**, en el canal del formulario, agrega el
    dominio de tu sitio en **Dominios Permitidos**. Sin esto el formulario no
    carga.
  </Step>

  <Step title="Pega el fragmento">
    Cópialo de **Código para tu sitio**, en el editor del formulario, y pégalo
    donde quieras que aparezca. En Framer, en un componente de **Embed** o en
    los ajustes de código de la página.
  </Step>
</Steps>

El formulario se dibuja dentro de tu página y hereda tu tipografía y tus
colores, así que no tienes que darle estilo aparte.

<Note>
  Si quieres que aparezca en un lugar concreto, pon un contenedor vacío con un
  identificador y pásaselo al fragmento con `data-target`. Si no, el formulario
  se dibuja justo donde pegaste la línea.
</Note>

## 2. Enviar los datos desde tu servidor

Te quedas con tu formulario y le agregas el envío a Asistian.

<Warning>
  Esta llamada tiene que salir de **tu servidor**, no del navegador del
  visitante. La URL del canal no acepta peticiones desde otro dominio hechas
  con JavaScript de página: el navegador las bloquea antes de enviarlas.

  Si tu sitio no tiene servidor —Framer, un HTML estático, una página en un
  bucket— usa el camino 1, que está pensado exactamente para eso.
</Warning>

<Steps>
  <Step title="Copia la URL del canal">
    En **Configuración → Canales**, al editar el canal Formulario web.
  </Step>

  <Step title="Manda un POST con JSON">
    Desde el código de tu servidor, cuando recibas el formulario:

    ```js theme={null}
    await fetch("TU_URL_DE_ASISTIAN", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        first_name: "Ana",
        last_name: "López",
        email: "ana@ejemplo.com",
        phone: "+525512345678",
        message: "Quiero cotizar",
      }),
    });
    ```

    Hace falta **email o teléfono: al menos uno**. Lo demás es opcional, y
    cualquier campo extra que mandes se guarda como dato adicional de la
    conversación.
  </Step>

  <Step title="Prueba">
    Edita el canal, haz clic en **Iniciar Prueba** y envía tu formulario. Verás
    los campos que llegaron.
  </Step>
</Steps>

<Warning>
  Si tu formulario usa otros nombres de campo, no hace falta cambiarlo: envía
  una prueba y ajústalo en **Mapea tus campos**. Ver
  [Campos y mapeo del Webhook](/mintlify/canales/webhook-campos).
</Warning>

## Cuál elegir

|                            | Formulario de Asistian             | Tu formulario con POST |
| -------------------------- | ---------------------------------- | ---------------------- |
| Necesita servidor propio   | No                                 | **Sí**                 |
| Trabajo inicial            | Pegar una línea                    | Escribir el envío      |
| Cambiar los campos después | Desde Asistian, sin tocar el sitio | Editar el sitio        |
| Control del diseño         | Hereda el de tu página             | Total                  |
| Validación y errores       | Incluidos                          | Los haces tú           |

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="El formulario no aparece en mi página">
    Casi siempre es el dominio. Revisa que el de tu sitio esté en **Dominios
    Permitidos** del canal, tal como aparece en la barra del navegador. Si sigue
    sin salir, abre la consola del navegador: el error dice exactamente qué
    pasó.
  </Accordion>

  <Accordion title="¿Puedo mandar teléfonos sin código de país?">
    Mejor no. Un número de diez dígitos sin código de país puede interpretarse
    como de otro país, y el contacto quedaría con un teléfono equivocado.
    Manda siempre el formato internacional: `+525512345678`.
  </Accordion>

  <Accordion title="¿Cómo evito que me manden basura?">
    Si usas el formulario de Asistian, ya trae su propia trampa antispam y no
    tienes que hacer nada.

    Si mandas el POST desde tu servidor, activa la clave secreta del canal y
    envíala como cabecera desde ahí. Ver
    [Proteger tu Webhook con una clave secreta](/mintlify/canales/webhook-clave-secreta).

    <Warning>
      Nunca pongas esa clave en el código de la página. Todo lo que llega al
      navegador lo puede leer cualquier visitante, y con la clave a la vista
      podría usarla para meter en tu bandeja lo que quisiera. Una clave que
      viajó al navegador hay que darla por filtrada.
    </Warning>
  </Accordion>
</AccordionGroup>