Donate Button

Il Donate Button è uno script da incorporare nel tuo sito web per aprire una modale di donazione direttamente nella pagina, senza redirect. Il checkout viene caricato in un iframe sovrapposto alla pagina tramite una finestra modale.

Generazione guidata da Riseact

Per generare il codice senza scrivere HTML a mano, vai al dettaglio della campagna su Riseact, apri il menu Azioni e clicca su Pulsante di donazione. Il form ti permette di configurare aspetto e comportamento. Copia-incolla il codice pronto all'uso!

Embedding

Per ogni bottone che vuoi aggiungere alla pagina, inserisci tre elementi nell'HTML:

1. Un elemento <button> con classe riseact-donate-btn
2. Un blocco <script> con la configurazione
3. Il tag <script> che carica lo script Riseact (basta una sola volta)

<button class="riseact-donate-btn">Dona ora</button>

<script>
  (window.riseactDonateBtns = window.riseactDonateBtns || []).push({
    checkoutUrl: "https://tua-org.riseact.site/campaigns/nome-campagna/donate"
  })
</script>

<script src="https://checkout.riseact.org/donate-button.js"></script>

info

Puoi inserire più bottoni nella stessa pagina. Ripeti il blocco <button> + <script> di configurazione per ciascuno, quindi carica lo script una sola volta alla fine.

Parametri di configurazione

Parametro	Tipo	Obbligatorio	Default	Descrizione
checkoutUrl	string	Sì	—	URL del checkout Riseact della campagna
buttonColor	string	No	#7f20df	Colore esadecimale del bottone
width	string o number	No	50%	Larghezza della finestra di checkout. Accetta percentuale ("70%") o pixel (800 oppure "800px")
height	string o number	No	80%	Altezza della finestra di checkout. Accetta percentuale ("90%") o pixel (600 oppure "600px")
closeOnOuterClick	boolean	No	false	Se true, chiude la modale al click sull'area sfumata esterna al checkout
closeButtonSize	string o number	No	1rem	Dimensione della "×" di chiusura in pixel (24) o come stringa CSS ("1.5rem")
closeButtonColor	string	No	#000000	Colore esadecimale della "×" di chiusura. Utile quando lo sfondo della pagina è scuro
redirectUrl	string	No	—	URL a cui redirigere la pagina al completamento della donazione. Se non impostato, la modale si chiude e l'evento checkoutCompleted rimane disponibile per i listener custom sulla pagina

Esempio completo

<button class="riseact-donate-btn">Dona ora</button>

<script>
  (window.riseactDonateBtns = window.riseactDonateBtns || []).push({
    checkoutUrl: "https://tua-org.riseact.site/campaigns/nome-campagna/donate",
    buttonColor: "#805AD5",
    width: "70%",
    height: "85%",
    closeOnOuterClick: true,
    closeButtonSize: 24,
    closeButtonColor: "#ffffff",
    redirectUrl: "https://tuosito.it/grazie"
  })
</script>

<script src="https://cdn.riseact.org/donate-button.js"></script>

Gestione del completamento donazione

Al termine del checkout, l'iframe invia un evento checkoutCompleted alla pagina padre tramite postMessage.

Con redirectUrl impostato: la modale si chiude e la pagina viene reindirizzata all'URL specificato.

Senza redirectUrl: la modale si chiude e l'evento resta disponibile. Puoi intercettarlo con un listener custom aggiunto prima del tag dello script Riseact:

<script>
  window.addEventListener('message', function(event) {
    if (event.data?.type === 'checkoutCompleted') {
      console.log('Donazione completata!', event.data.payload);
    }
  });
</script>

<script src="https://cdn.riseact.org/donate-button.js"></script>