Embebe la Campaña en tu Página Web

Necesitas incrustrar la caja de donación directamente en tu página web, o incrustar como página completa? Verás aquí cómo hacerlo!

Juan Yanez avatar
Escrito por Juan Yanez
Actualizado hace más de una semana

Opciones para embeber la Campaña

Después de terminar la configuración de tu campaña, cómo quieres mostrarla en tu sitio web?

Quieres que la caja de donación se abra como una ventana emergente (pop-up), que esté siempre visible en un punto determinado de tu página, o que muestre toda la campaña como una página web en pantalla completa (full-page)?

En este artículo, explicaremos todas las opciones disponibles y cómo hacerlo para tu campaña.

Para encontrar todas las opciones de incrustación, elija una campaña. A continuación, accede al apartado Configuración > Caja de donación y elige la pestaña Integración.

❗️ Ten en cuenta que todas las opciones de incrustación requieren la implementación de alguien que administre tu sitio web, preferiblemente con conocimientos técnicos.

❗️❗️ Debes copiar el codigo usando tus comandos de teclado comunes para copiar y pegar (Cmd + C para dispositivos MAC, Ctrl + C para otros dispositivos). Pégalo (Cmd + V para dispositivos MAC, Ctrl + V para otros dispositivos) y envíaselo a la persona que administra tu sitio web.

Embebe solo la Caja de Donación

Estilo modal (Pop-up)

Es posible crear un modal emergente, en el estilo pop-up con la Caja de Donación

Dentro de la pestaña Integración, elija la opción Estilo Modal. Esta opción le permite crear un botón con un CTA para abrir el formulario como un modal.

❗️ El botón CTA que abre el Modal viene con un texto por defecto ("Pagar Ahora!"). Actualmente no tenemos la opción de personalizar este botón CTA en nuestro Software, pero puede personalizar este texto cuando lo copias y lo pegas en tu página contenedora.

Cuando el donante clica el botón CTA, la Caja de Donación abrirá como un pop-up:

Estilo embebido

Si prefieres incrustar la Caja de Donación directamente en tu página web (sin el botón), debe elegir la opción Estilo embebido, en la misma pestaña Integración.

En este caso, el formulario de donación será visible de inmediato en la parte de tu sitio web donde lo haya incrustado:

Embebe la Campaña como Página HTML (full-page)

⭐️ Puedes encontrar más información sobre nuestras opciones de Hosting en este artículo.

En los planes Scale y Premium tenemos la opción de descargar el archivo HTML y subirlo a tus servidores.

Esto es ideal si desea tener tu Campaña de Stockcrowd alojada en tu propio dominio.

Para esto, necesitas:

  1. Un dominio o un nombre de dominio, por ejemplo: www.midonación.com

  2. Un servicio de hosting o alojamiento web contratado.

Una vez que tengas listo tanto tu servicio de hosting como tu dominio, debes cargar el archivo HTML en el servidor donde tienes alojada tu página web.

También puedes descargar el archivo HTML cada vez que vea tus Plantillas de Campaña.

Cómo cargar el archivo HTML en tu servidor (ejemplo)

❗️Estos son ejemplos, creados en el momento en que se creó este artículo. El proceso para cargar archivos HTML puede diferir de un caso a otro, y el equipo de soporte de Stockcrowd no puede ayudar con esta configuración.

Tienes diferentes métodos para subir el HTML de tu campaña, que efectivamente hacen lo mismo: te permiten subir el archivo HTML al servicio de alojamiento para que pueda mostrarse en tu sitio web.

Los métodos más comunes son:

  1. Subir un archivo HTML con Dreamweaver.

  2. Cargar el archivo HTML usando un programa FTP.

  3. Utilizar el panel de administración del host para cargar los archivos.

En este ejemplo, nos centraremos en la tercera opción, utilizando el panel de administración del host para cargar los archivos HTML.

1. Accede a tu panel de administración

Todos los hosts ofrecen un panel de administración, donde puedes editar la información de tu sitio web. Esta herramienta se utiliza normalmente para:

  • Modificar la configuración de tu sitio

  • Crear cuentas de correo

  • Administrar carpetas

  • Configurar la seguridad

  • Acceder y obtener estadísticas

Ten en cuenta que los servicios de alojamiento utilizan diferentes sistemas de gestión, pero la lógica es similar en todos ellos.

Uno de los más utilizados es Cpanel. Lo usaremos como base para nuestra explicación.

cpanel

2. Accede al Administrador de Archivos

Desde el panel de administración, puedes controlar todas las opciones de tu web. Selecciona la opción que le permite administrar y cargar archivos (File Manager).

Captura de pantalla 2019-06-17 a las 16.50.55

3. Sube un archivo

Dentro del administrador de archivos (file manager), busca la opción para cargar archivos (upload).

Puedes cargar tus archivos en tu sitio web como si estuviera cargando un archivo adjunto en tu correo electrónico.

subir_archivo

Si la Campaña está activa, se quedará visible en tu sitio web después de cargar el archivo.

❗️ Ten en cuenta que si haces los siguientes cambios en tu Campaña, debes repetir este proceso, descargando el nuevo HTML y subiéndolo a tus servidores:

  • Editar o crear nuevos campos para la Caja de Donación

  • Cambiar la política de consentimiento de cookies, agregando un píxel, p. un código de Google Analytics o Google Tag Manager

  • Editar o agregar botones para compartir en redes sociales

FAQs sobre la carga del archivo HTML en WordPress

Si tu Campaña estará alojada en WordPress, también debes verificar:

1. Si eres el administrador de tu servidor de WordPress:

En este caso, la mejor manera de cargar el archivo HTML es crear una URL dentro de tu servidor de WordPress, que aloja la Campaña.

Recuerda agregar un CTA (botón de llamada a la acción) que dirija a los usuarios desde tu WordPress a la URL donde cargas el HTML de la Campaña.

2. Si dependes de terceros a la hora de gestionar este servicio:

Si tú no administras directamente WordPress, envía el archivo HTML a los administradores y pídales que creen la URL y las CTA.

¿Ha quedado contestada tu pregunta?