Guía de Integración
¿Cómo poner una encuesta en tu web?
Tenés tres maneras muy simples de sumar encuestas a tu sitio o aplicación: incrustada como un bloque, como ventana emergente o como botón flotante en una esquina.
Importante: Para que la experiencia sea rápida y la gente responda al instante en webs externas, el bloque incrustado muestra hasta 2 preguntas, y el pop-up o widget muestran 1 pregunta.
1. Bloque Incrustado (iFrame)
Dentro de tu páginaQueda integrado directamente adentro del texto o contenido de tu web (en un artículo, al finalizar una compra o en el panel de tu app):
<iframe
src="https://oppros.web.app/embed.html?id=ID_DE_TU_ENCUESTA&transparent=true"
width="100%"
height="300"
frameborder="0"
style="border-radius:12px;overflow:hidden;border:none;">
</iframe>
•
Reemplazá
ID_DE_TU_ENCUESTA por el código de tu encuesta (lo sacás desde el botón Compartir > pestaña Embeber en OPPROS).2. Ventana Emergente (Pop-up)
Al tocar un botónAbre una tarjeta centrada con fondo oscuro cuando el usuario hace clic en un botón:
<!-- Botón para abrir -->
<button onclick="document.getElementById('oppros-modal').style.display='flex'" style="padding:10px 18px;border-radius:8px;background:var(--primary,#0C6E67);color:#fff;border:none;cursor:pointer;font-weight:600">
💬 Dar mi opinión
</button>
<!-- Ventana emergente -->
<div id="oppros-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:99999;align-items:center;justify-content:center;padding:16px" onclick="if(event.target===this)this.style.display='none'">
<div style="background:#fff;border-radius:16px;width:100%;max-width:440px;position:relative;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.2)">
<button onclick="document.getElementById('oppros-modal').style.display='none'" style="position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.4rem;cursor:pointer">×</button>
<iframe src="https://oppros.web.app/embed.html?id=ID_DE_TU_ENCUESTA&popup=true" width="100%" height="260" frameborder="0" style="border:none;display:block"></iframe>
</div>
</div>
Probá el pop-up en esta pantalla:
3. Botón Flotante en la Esquina (Widget)
En una sola líneaEs la opción más fácil. Pegás esta línea antes de cerrar la etiqueta </body> de tu web y aparece automáticamente un botón en la esquina inferior:
<script
src="https://oppros.web.app/widget.js"
data-survey="ID_DE_TU_ENCUESTA"
data-position="bottom-right">
</script>
Fijate en la esquina inferior derecha:
Ahí tenés un botón de ejemplo listo para probar cómo se ve y cómo responde.
¿Dónde copiar el código con tu ID en OPPROS?
1 clic
1
En tu perfil o en la lista de encuestas, tocá el botón Compartir () de la encuesta que quieras.
2
Elegí la pestaña Embeber en tu Web / App.
3
Elegí el formato (iFrame, Pop-up o Widget) y tocá Copiar código. Ya viene con tu ID listo.