Opciones de inserción

Tres formas de añadir tu formulario SupportRetriever a cualquier proyecto: URL directa, iframe o enlace HTML.

Obtener códigos de inserción

Cuando llamas a GET /api/agent/form, recibes todas las opciones de inserción:

{
  "embed": {
    "direct_url": "https://supportretriever.com/form/uuid",
    "iframe": "<iframe src=\"...\" width=\"100%\" height=\"600\" frameborder=\"0\" style=\"border: none;\"></iframe>",
    "html_link": {
      "default": "<a href=\"...\" class=\"support-btn\">Contact Support</a>",
      "with_styles": "<a href=\"...\" style=\"display:inline-block;padding:12px 24px;background:var(--color-primary);color: var(--color-on-primary);text-decoration:none;border-radius:6px;font-family:sans-serif;\">Contact Support</a>"
    }
  }
}

Opción 1: URL directa

Caso de uso: Enlaces, redirecciones, compartir

Formularioato:

https://supportretriever.com/form/[form-id]

Ejemplo de uso:

<!-- Enlace simple -->
<a href="https://supportretriever.com/form/abc123">Contáctanos</a>

<!-- Botón -->
<button onclick="window.location.href='https://supportretriever.com/form/abc123'">
  Obtener soporte
</button>

<!-- Redirección -->
<meta http-equiv="refresh" content="0; url=https://supportretriever.com/form/abc123">

Ventajas:

• Opción más simple
• Funciona en todos los sitios
• Amigable para móvil
• Puedes añadir parámetros URL para seguimiento

Desventajas:

• El usuario sale de tu página
• Sensación menos integrada

Opción 2: Inserción con iframe

Caso de uso: Formularioulario incrustado en tu página

Formularioato:

<iframe 
  src="https://supportretriever.com/form/abc123" 
  width="100%" 
  height="600" 
  frameborder="0" 
  style="border: none;">
</iframe>

Ejemplo de uso:

<div class="contact-section">
  <h2>Ponte en contacto</h2>
  <iframe 
    src="https://supportretriever.com/form/abc123" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none;">
  </iframe>
</div>

iframe responsive:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    src="https://supportretriever.com/form/abc123"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    frameborder="0">
  </iframe>
</div>

Ventajas:

• El formulario permanece en tu página
• Sensación más integrada
• Control total del estilo del contenedor

Desventajas:

• Requiere soporte de iframe
• Puede haber consideraciones de origen cruzado
• Hace falta una altura fija

Opción 3: Enlace/botón HTML

Caso de uso: Botones con estilo que abren el formulario

Versión simple:

<a href="https://supportretriever.com/form/abc123" class="support-btn">
  Contactar soporte
</a>

Versión con estilos (inline):

<a 
  href="https://supportretriever.com/form/abc123" 
  style="display:inline-block;padding:12px 24px;background:var(--color-primary);color: var(--color-on-primary);text-decoration:none;border-radius:6px;font-family:sans-serif;">
  Contactar soporte
</a>

Botón con estilo personalizado:

<a 
  href="https://supportretriever.com/form/abc123"
  class="btn btn-primary"
  style="
    display: inline-block;
    padding: 12px 24px;
    background: #007bff;
    color: var(--color-on-primary);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s;
  ">
  Obtener soporte
</a>

Ventajas:

• Control total del aspecto del botón
• Encaja con el diseño de tu sitio
• Funciona en todos los sitios

Desventajas:

• El usuario sale de tu página
• Requiere estilos personalizados

Parámetros URL para seguimiento

Añade parámetros de consulta para saber de dónde vienen los envíos:

https://supportretriever.com/form/abc123?origen=homepage&campaign=summer2024&type=support

Estos parámetros se capturan y almacenan automáticamente con cada envío para analíticas.

Elegir la opción adecuada

Consideraciones móvil

• URL directa: Mejor experiencia en móvil, se abre a pantalla completa
• iframe: Puede requerir contenedor responsive, probar en dispositivos
• Enlace HTML: Funciona bien, abre el formulario a pantalla completa

Probar la inserción

Antes de publicar:

1. Prueba en navegadores de escritorio (Chrome, Firefox, Safari)
2. Prueba en dispositivos móviles (iPhone, Android)
3. Prueba el envío del formulario de principio a fin
4. Comprueba que recibes los envíos
5. Verifica que se capturan los parámetros URL

Temas relacionados

• Personalización del formulario
• Empezar
• Por qué no mailto