Documentación de Charitable

Aprende a sacar el máximo partido a Charitable con instrucciones claras y paso a paso.

Recursos populares

Empieza aquí

Gestión de donantes

Donaciones recurrentes

Recaudación de fondos entre pares

Integraciones

Extensiones

Botón de donación modal de campaña

El Botón de donación modal (también conocido como Botón de campaña modal) te permite colocar un botón que abre un formulario de donación en una ventana emergente modal, o enlaza directamente a la página de donación de la campaña, en cualquier lugar de tu sitio. Está disponible tanto como bloque de WordPress como shortcode, y forma parte del Sistema de donación modal universal de Charitable.

Tabla de Contenidos

Requisitos

  • Charitable Pro: Versión 1.8.13 o superior
  • WordPress: Versión 6.2 o superior
  • PHP: Versión 7.4 o superior

Empezar

Bloque: Edita una página o publicación en el Editor de bloques → añadir bloque → busca Botón de donación modal o Charitable → inserta el bloque → elige una campaña y configura el botón en la barra lateral.

Shortcode: Usa [charitable_modal_button campaign_id="123"] en cualquier publicación, página o widget. Reemplaza 123 con el ID de tu campaña. Puedes añadir atributos opcionales para el texto del botón y las clases CSS (ver Shortcode).

Beneficios clave

  • Coloca en cualquier lugar: Botones en barras laterales, pies de página, cuadrículas de campañas (p. ej., Showcase de campañas) o contenido en línea.
  • Modal o enlace: El bloque te permite elegir “Ventana emergente modal” (formulario de donación en una ventana emergente) o “Enlace a página de donación” (enlace normal). El shortcode solo es modal.
  • Sin recarga de página: En modo modal, el formulario se carga a través de AJAX y se abre en una superposición; los donantes permanecen en la misma página hasta que envían o cierran.
  • Control del selector de campaña: Cuando el selector de campaña está habilitado globalmente, puedes ocultarlo para un botón específico para que el modal muestre solo la campaña elegida.

Bloque (Editor)

El bloque está registrado como Botón de donación modal (charitable/modal-donate-button) bajo la categoría Widgets.

Ajustes del bloque (barra lateral)

Configuración

  • Campaña – Requerido. Selecciona la campaña que utilizará este botón para las donaciones.
  • Texto del botón – Etiqueta en el botón (por defecto: “Donar ahora”).
  • Acción del botón
    • Ventana emergente modal – Al hacer clic se abre el formulario de donación en una ventana emergente (por defecto).
    • Enlace a página de donación – Al hacer clic se va a la página de donación de la campaña.
  • Abrir en una nueva pestaña – Solo cuando la Acción del botón es “Enlace a página de donación”. Abre la página de donación en una nueva pestaña.
  • Ocultar selector de campaña – Solo cuando la Acción del botón es “Ventana emergente modal”. Cuando está habilitado, el menú desplegable del selector de campaña está oculto en este modal, incluso si está habilitado en los ajustes de Charitable.

Colores

  • Fondo – Color de fondo del botón.
  • Texto – Color del texto del botón.
  • Borde – Color del borde del botón.

Paso del ratón

  • Fondo – Fondo del botón al pasar el ratón.
  • Texto – Color del texto del botón al pasar el ratón.

Tamaño y espaciado

  • Ancho del botón – p. ej. auto, 100%, 200px.
  • Tamaño de fuente – p. ej. 16px, 1.2em.
  • Radio del borde – p. ej. 4px, 25px.
  • Relleno horizontal – p. ej. 24px, 2em.
  • Relleno vertical – p. ej. 12px, 1em.

Avanzado

  • Clase CSS personalizada – Clase(s) adicional(es) en el elemento del botón.
  • Clase CSS del modal – Solo cuando la Acción del botón es “Modal emergente”. Clase(s) adicional(es) en el contenedor del modal (la clase modal predeterminada es charitable-universal-modal).

El editor muestra una vista previa del botón y el nombre de la campaña seleccionada. En el frontend, el bloque produce el mismo comportamiento que el shortcode (en modo modal) o un enlace con estilo (en modo enlace).

Shortcode

Nombre del shortcode: caritativo_modal_boton

Atributo requerido

  • campaign_id – El ID de la campaña. El botón abrirá el formulario de donación para esta campaña en un modal.

Atributos opcionales

AtributoDescripciónPredeterminado
textoEtiqueta del botón.“Donar ahora”
claseClase(s) CSS adicional(es) para el botón.–
modal_claseClase(s) CSS adicional(es) para el contenedor del modal.–

Ejemplos

[charitable_modal_button campaign_id="42"]
[charitable_modal_button campaign_id="42" text="Give to this campaign"]
[charitable_modal_button campaign_id="42" class="my-donate-btn" modal_class="my-modal"]

Nota: El shortcode siempre abre el formulario de donación en un modal. Para enlazar a la página de donación en su lugar, use el bloque con la Acción del botón establecida en “Enlace a la página de donación”, o use el enlace/shortcode de donación estándar (p. ej. [charitable_donate_button] con el comportamiento de campaña y enlace apropiado).

Cómo funciona el modal

  1. Desencadenante: El botón tiene la clase charitable-modal-trigger y un atributo data-campaign-id. El script del Modal Universal escucha los clics en esta clase.
  2. Carga: Al hacer clic, el script carga el formulario de donación a través de AJAX para la campaña dada y lo inyecta en la superposición del modal.
  3. Visualización: El modal se abre (utilizando la misma superposición y estructura que los modales existentes de Charitable). Los donantes pueden completar el formulario o cerrar el modal.
  4. Selector de Campaña: Si la función Selector de Campaña está habilitada en la configuración de Charitable y no se anula por el botón (ver más abajo), el formulario puede mostrar un menú desplegable para cambiar de campaña. Los botones individuales pueden forzar su ocultación con la opción del bloque “Ocultar Selector de Campaña” o pasando data-hide-campaign-selector al construir el botón en el código.

El modal utiliza el Sistema de Donación del Modal Universal (Charitable Pro 1.8.13+), por lo que funciona de manera consistente tanto si el botón proviene del bloque, del shortcode, como de otras funciones (por ejemplo, botones de donación rápida en el bloque Showcase de Campañas).

Selector de campaña en el modal

  • Configuración global: Configuración de Charitable → General → Formulario de Donación → Selector de Campaña. Cuando está habilitado, los formularios de donación pueden mostrar un menú desplegable “Elegir una Campaña”.
  • Anulación por botón (solo bloque): En el bloque Botón de Donación Modal, cuando la Acción del Botón es “Ventana Modal”, habilita Ocultar Selector de Campaña para ocultar ese menú desplegable para el modal de este botón. Útil cuando el botón es para una sola campaña y no deseas el selector en la ventana emergente.
  • Shortcode: El shortcode no expone un atributo “ocultar selector de campaña”. Para ocultarlo para un botón de shortcode, necesitarías agregar una clase CSS personalizada y usar JavaScript para establecer data-hide-campaign-selector en el desencadenante, o usar el filtro charitable_modal_donate_button_html para agregar el atributo de datos.

Solución de problemas

El botón no hace nada al hacer clic

  • Confirma que el ID de la campaña es válido y que la campaña está publicada.
  • Asegúrate de que el script del Modal Universal se cargue (sin errores de script ni eliminación agresiva de scripts de Charitable en esa página).
  • Comprueba la consola del navegador en busca de errores de JavaScript al hacer clic en el botón.

El modal no se abre o el formulario no se carga

  • Verifica que estás en Charitable Pro 1.8.13+ y que ningún plugin/tema está bloqueando charitable-universal-modal o la solicitud AJAX que carga el formulario.
  • Prueba con un tema predeterminado y con otros plugins desactivados para descartar conflictos.
  • Asegúrate de que la campaña pueda recibir donaciones (por ejemplo, que no haya finalizado, que no esté completamente financiada si eso bloquea las donaciones).

El botón se ve mal o falta el estilo

  • Utiliza las opciones de Colores, Tamaño y Espaciado y Avanzado (clase personalizada) del bloque para ajustar la apariencia.
  • Para el shortcode, a tilde;ade una clase y aplica estilo a esa clase en tu tema o CSS personalizado. El disparador usa la clase charitable-modal-trigger adem ails de las clases que pases.

“Enlace a la P ailina de Donaci

  • Esa opci

Recursos para desarrolladores

PHP

  • Funci
  • Ayudante de eco: charitable_modal_donate_button( $campaign_id, $args ) – Muestra el mismo HTML.

Argumentos para charitable_get_modal_donate_button:

ClaveTipoPredeterminadoDescripción
textocadena“Donar ahora”Etiqueta del botón.
clasecadenadisparador_modal_caritativoClase(s) CSS para el bot
modal_clasecadenamodal_universal_caritativoClase CSS para el contenedor del modal.
etiqueta_botoncadenapara ver cómo está quedando tu campaña. button o a.
estilocadena''Cadena de estilo en l
ocultar_selector_campanabooleanofalseCuando es verdadero, a tilde;ade data-hide-campaign-selector="1" para que el modal oculte el selector de campa tilde;a.

Filtros

  • charitablemodaldonatebuttonshortcode_output – Filtra la salida del shortcode. Par
  • charitablemodaldonatebuttonhtml – Filtra el HTML del bot

CSS / HTML

  • Bot
  • Contenedor del bloque: .wp-block-charitable-modal-donate-button.
  • Modal: La superposici

Historial de versiones

Versi Cambios
1.8.13Bloque y shortcode de Bot

Para la configuraci

¿Todavía tienes preguntas? ¡Estamos aquí para ayudarte!

Enviar un ticket de soporte
Contáctanos

Última modificación:

Novedades en Benéfico

Ver las últimas actualizaciones
🔔 Suscríbete para recibir nuestras últimas actualizaciones
📧 Suscribirse a correos electrónicos

Suscripción por correo electrónico

Únete a nuestro boletín

No te enviaremos spam. Solo enviamos un correo electrónico cuando creemos que realmente te ayudará. ¡Date de baja en cualquier momento!

Mejora Pagos

💰 Acepta donaciones recurrentes con Windcave y Charitable

Un donante configura su donación una vez en la página de pago segura de Windcave, y Charitable factura cada renovación según lo programado. Por qué esto es importante:

🏦 Organizaciones con sede en Nueva Zelanda o Australia: donaciones mensuales en la pasarela con la que tu banco ya te ha configurado, sin un segundo procesador que incorporar.
⛪ Iglesias que reciben diezmos y ofrendas regulares: los miembros de la congregación establecen su propio calendario una vez, que es la forma más sencilla de lanzar donaciones recurrentes para la iglesia sin una plataforma separada.
🌏 Grupos con donantes en varias divisas: Windcave gestiona más de 20, por lo que un donante puede dar en la divisa que realmente posee.
📅 Fondos operativos en lugar de campañas puntuales: activa el modo Solo Recurrente y la opción única desaparece, por lo que cada donación a esa campaña es una suscripción.
🧾 Equipos sin desarrollador en plantilla: 3 conjuntos de credenciales pegados en una página de configuración, y sin código en ninguna parte.

Consulta nuestro anuncio aquí.

automatización actualizar

⚡ Creador Visual de Automatización: ¡Arrastrar y Soltar Sin Código!

Charitable Automation Connect 2.3.0 presenta el Generador de Automatización Visual, un lienzo a pantalla completa que presenta cada automatización como un flujo de tarjetas conectadas: un desencadenador, condiciones opcionales y una lista de acciones que se ejecutan en orden.

🧩 Muchas acciones, un desencadenador: Etiqueta a un donante, envía un correo electrónico, agrega una nota y activa una llamada webhook desde un solo evento, arrastrado en cualquier orden.

✉️ Actúa dentro de Charitable: Las nuevas acciones Enviar correo electrónico, Etiquetar donante y Agregar nota de donante se ejecutan sin necesidad de un servicio externo.

🔤 Etiquetas de combinación: Personaliza correos electrónicos y notas con campos en vivo como {first_name}, {total} y {campaign_name}.

🔁 Aplicar a donantes existentes: Ejecuta Etiquetar donante y Agregar nota de donante contra los donantes que ya tienes.

🖥️ Lienzo o Simple: Cambia de vista en cualquier momento, y las automatizaciones creadas antes de la 2.3.0 siguen funcionando sin cambios.

Lee más aquí.

Integración actualizado

📬 Presentamos Brevo para Charitable: Convierte donantes en suscriptores automáticamente

El momento en que un donante realiza una donación es cuando está más comprometido. Con la nueva integración de Brevo para Charitable, puedes convertir automáticamente a esos donantes únicos en suscriptores a largo plazo sin tocar una sola hoja de cálculo.

Simplemente recopila el consentimiento del donante directamente en tu formulario de donación y comienza tu serie de bienvenida de inmediato.

Novedades:

🔄 Sincronización automática de suscriptores: Los nuevos donantes que aceptan se añaden directamente a tu lista de contactos de Brevo tan pronto como se procesa su pago, sin necesidad de exportaciones manuales ni importaciones de CSV.

🎯 Control granular de consentimiento y opción de suscripción: Personaliza la etiqueta de tu casilla de verificación, elige si se marca por defecto o no, o activa la doble opción de suscripción de Brevo para mantener tu lista limpia y conforme.

📋 Mapeo de listas por campaña: Dirige a los donantes a tu lista de correo global o mapea campañas específicas a listas de Brevo dirigidas para adaptar tus mensajes de seguimiento.

⚡ Configuración en 5 minutos: Conéctate al instante pegando tu clave API de Brevo en la configuración de Newsletter, mapea tus campos de contacto y empieza a crear tu lista de correo en piloto automático.

¿Listo para hacer crecer tu lista de correo? Brevo ya está disponible a partir del plan Charitable Plus. ¡Conecta tu cuenta hoy mismo!

donaciones recurrentes actualizado

💳 Presentamos Actualizaciones de Tarjeta: ¡Soluciona Tarjetas Caducadas Sin Perder Suscripciones!

Las tarjetas de crédito caducadas o actualizadas son una de las mayores fugas silenciosas en la recaudación de fondos recurrente. Con las actualizaciones de tarjetas en la extensión de donaciones recurrentes, los donantes ahora pueden actualizar sus detalles de pago directamente, manteniendo intactas su suscripción, su calendario y su historial de donaciones.

Sin planes cancelados, sin historial perdido y sin dolores de cabeza administrativos para tu equipo.

Novedades:

⚡ Autoservicio en 30 Segundos: Los donantes obtienen un botón dedicado de “Actualizar Tarjeta” en su panel que abre el Portal de Clientes seguro y compatible con PCI de Stripe para actualizar los detalles de la tarjeta al instante.

🔒 Acceso Seguro y Delimitado: Delimitado exclusivamente a las actualizaciones de tarjetas por defecto, los donantes no pueden cancelar ni alterar accidentalmente sus planes desde el portal, manteniendo tus webhooks y datos sincronizados.

🤝 Soporte Asistido por Administrador: ¿Ayudando a un donante por teléfono? Abre su portal seguro de Stripe con un solo clic desde tu pantalla de administrador o genera un enlace de actualización de un solo uso para enviárselo por correo electrónico.

📋 Pista de Auditoría Automática: Cada actualización de método de pago se registra automáticamente con una marca de tiempo tanto en los registros generales del sistema como en el perfil del donante individual.

¡Listo para proteger tus ingresos recurrentes? Obtén el plan Plus o Pro y actualiza Donaciones Recurrentes a la versión 2.3.0+ y activa “Actualizar Método de Pago” en tu Configuración hoy mismo.

Integración constructor de páginas

¡Fans de Divi, regocíjense! ¡Módulo nativo de barra de progreso de campaña para Divi 5!

Con nuestro nuevo módulo nativo para Divi 5, puedes anclar tus micrositios con estadísticas de recaudación de fondos en tiempo real directamente en el lienzo visual. Así es como funciona y por qué vale la pena activarlo hoy.

Crea actualizaciones de campaña que sean VISUALES Y EN VIVO. También puedes:

📊 Barra de progreso de la campaña: Inserta una barra de progreso en vivo en cualquier diseño de Divi 5 y muestra el progreso de los objetivos en tiempo real.

🎨 Controles de estilo avanzados: Personaliza fácilmente el color de la barra y el seguimiento, la altura y el radio para que coincidan perfectamente con tu marca.

👁️ Listo para el constructor visual: Configura y previsualiza todo directamente en el lienzo de Divi como un módulo de primera clase.

🔁 Renderizado idéntico: El mismo motor exacto impulsa este módulo, lo que significa un diseño consistente sin soluciones alternativas heredadas.

✅ Lanzamientos más rápidos: Nunca salgas de la interfaz de Divi 5 para configurar códigos cortos o adivinar cómo se verán las etiquetas de tus objetivos.

Más información aquí.

Ver todos los anuncios