Documentación de Charitable

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

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!

Ú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!

embajadores Nuevo

🖨️ Presentamos Folletos y Carteles: ¡Recauda fondos fuera de la pantalla!

Gran parte de la recaudación de fondos entre particulares ocurre fuera de la pantalla: en la meta de una carrera de 5 km, en un tablón de anuncios escolar, en la cocina de una oficina. Charitable Ambassadors 3.4.7 añade 2 imprimibles: un folleto de recaudación de fondos que lleva la propia historia y código QR de cada recaudador, y un cartel de reclutamiento que inscribe a nuevos recaudadores. Ambos se abren como una página web normal y se imprimen directamente desde el navegador. Por qué esto es importante:

  • 🏁 Un folleto para cada recaudador: Cada uno lleva la foto, la historia y el objetivo del recaudador, con un código QR que abre su página en lugar de la de tu campaña principal.
  • 📌 Un cartel que recluta: Muestra "Reclutando ahora" encima del nombre de tu campaña con un gran código QR que abre tu formulario de inscripción, para que alguien pueda empezar a recaudar fondos sin esperar un enlace tuyo.
  • 🪄 No se necesita herramienta de diseño: Ambos imprimibles se muestran como una página web normal y se imprimen desde el navegador, sin necesidad de plugin PDF ni diseñador.
  • 📄 2 diseños de folleto: "Repartir" lleva la historia completa para dar a amigos y familiares, y "Colgar" lleva un breve gancho con 5 pestañas para arrancar para un tablón de anuncios.
  • 🛡️ Desactivado hasta que lo actives: Los folletos permanecen desactivados después de la actualización hasta que los habilites en Charitable » Ambassadors » Other » Fliers, y solo el propietario o un administrador puede abrir uno.

Consulta nuestro anuncio aquí.

Mejora Pagos

💸 Presentamos las tarifas escalonadas para el alivio de comisiones: ¡Ajusta la petición a la donación!

El alivio de comisiones hace una pregunta corta a tus donantes al finalizar la compra: ¿te gustaría cubrir la comisión de procesamiento de esta donación? Hasta ahora, esa pregunta utilizaba una única tarifa para cada donación en una pasarela, por lo que una donación de 10 $ y una de 500 $ recibían la misma pregunta de porcentaje. El alivio de comisiones 1.3.0 te permite establecer tantas bandas de donación como desees, cada una con su propia tarifa. Por qué esto es importante:

  • 🪙 Más suave con las donaciones pequeñas: Una comisión de transacción fija supone una parte mucho mayor de una donación de 10 $ que de una de 500 $, por lo que las bandas te permiten pedir menos en la parte inferior.
  • 🎚️ Tantas bandas como necesites: Cada banda tiene su propio porcentaje y su propio importe fijo, y la banda superior continúa sin límite superior.
  • 🛑 Un techo opcional: Un campo de comisión máxima evita que se pida a ningún donante más de una cantidad que tú elijas, por muy grande que sea la donación.
  • 🔌 Configurar por pasarela de pago: Stripe puede funcionar con cuatro bandas, mientras que Windcave y Payfast se mantienen con una tarifa única, ya que las bandas pertenecen a una pasarela y no a todo tu sitio.
  • 🛡️ Nada cambia hasta que tú lo digas: Tus tarifas actuales se mantienen exactamente como están hasta que actives Usar tarifas escalonadas en Charitable » Settings » Advanced » Fee Relief.

Consulta nuestro anuncio aquí.

Donaciones Mejora

📊 ¡Tu panel de control Pro ahora puede comparar, exportar y calificar!

La mayoría de los paneles de control de recaudación de fondos solo te dicen cuánto has recaudado. Charitable Pro 1.8.19 reconstruye el panel de control y la Descripción general de informes en torno a las preguntas más difíciles: si algo está roto, si este período superó al anterior y qué cambio único marcaría la mayor diferencia hoy. Por qué esto es importante:

  • 📈 Cada cifra tiene una tendencia: Elige un período y las fichas y el gráfico se mueven juntos, con cada total mostrado frente al período anterior.
  • 🗓️ Gráficos que se mantienen legibles: Los rangos cortos agrupan las donaciones día a día, mientras que los rangos más largos agrupan por semana o mes, por lo que un año completo se lee como una curva en lugar de una línea plana.
  • 🔀 Compara cualquier 2 períodos: No solo los consecutivos, para que puedas preguntar cómo fue este diciembre en comparación con el diciembre pasado. Eso importa porque la recaudación de fondos es estacional.
  • 📤 Exporta el resumen completo: Envía la descripción general completa como CSV o PDF, lista para un paquete de junta directiva o un informe de financiador.
  • 🎯 Califica tu configuración gratis: Haz que tu configuración de recaudación de fondos sea calificada, para que el único cambio que valga la pena hacer a continuación sea el que puedas ver.

Consulta nuestro anuncio aquí.

Función Nuevo

🎟️ Presentamos Eventos Benéficos: ¡Vende entradas dentro de tus campañas!

La mayoría de las organizaciones sin ánimo de lucro venden entradas para eventos en una herramienta y recaudan donaciones en otra, lo que genera dos conjuntos de informes y una conciliación manual al final del año. Eventos Benéficos une ambas cosas, vendiendo entradas a través de los mismos formularios de donación y pasarelas de pago que ya utilizas en Charitable. Por qué esto es importante:

  • 🎟️ Cada entrada es una donación: Las ventas de entradas se procesan a través de la pasarela que ya utilizas y cuentan para el objetivo de la campaña, con todo gestionado en Charitable » Eventos.
  • 📱 Registro con código QR desde cualquier teléfono: Cada asistente recibe su propio código QR en el recibo, y los voluntarios escanean en la puerta a través de un enlace de registro que no necesita cuenta de WordPress.
  • 🧾 Recibos listos para la declaración de impuestos: Asigna a cada tipo de entrada un valor justo de mercado, y Charitable incluirá el importe correcto deducible de impuestos en cada recibo de donante.
  • 📋 Detalles del asistente al finalizar la compra: Pregunta a cada invitado por su elección de comida, talla de camiseta o necesidades de acceso, con un registro de asistente independiente creado para cada entrada.
  • 🗓️ Bloques y calendarios incluidos: Tres bloques de editor, además de la compatibilidad con Sugar Calendar y The Events Calendar, muestran tus eventos donde los colaboradores ya los buscan.

Consulta nuestro anuncio aquí.

ia Nuevo

🚀 ¡Libera el poder de la IA en Charitable!

Tu asistente de IA ahora puede crear, editar y administrar tus campañas de recaudación de fondos de Charitable directamente, solo con pedírselo. Con Charitable Pro añadiendo soporte de escritura para la API de Habilidades de WordPress, herramientas como ChatGPT, Claude y Cursor pueden manejar acciones administrativas completas de forma segura a través de MCP. Por qué esto es importante:

  • 🤖 Creación de campañas en lenguaje natural: Pídele a tu asistente un objetivo como “Configura una recaudación de fondos para el refugio con un objetivo de 5.000 $”, y creará un borrador de campaña real completo con niveles de donación sugeridos.
  • 🎨 Ajustes instantáneos del formulario de donación: Añade campos personalizados, cambia los colores de los botones o reordena elementos sin tener que entrar en la configuración del formulario.
  • 📝 Registro de donaciones sin conexión: Informa a tu asistente sobre donaciones en efectivo o cheque, y cruzará los correos electrónicos de los donantes y registrará las transacciones en tu historial.
  • 🛡️ Seguridad y control por defecto: El acceso de escritura permanece estrictamente desactivado hasta que se active en Charitable » Herramientas » AI MCP, manteniendo el informe de solo lectura seguro por defecto.
  • 📜 Registro de auditoría completo: Cada cambio realizado por un asistente de IA se rastrea en Charitable » Herramientas » Registros, por lo que siempre sabrás quién (o qué) actualizó tu sitio.

Consulta nuestro anuncio aquí.