Files
calvana/pledge-now-pay-later/docs/EMBED_GUIDE.md

135 lines
3.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Embed Guide — Add Pledge Now, Pay Later to Your Website
## Option 1: QR Code + Direct Link (Recommended)
The simplest way — just share your pledge page URL or print the QR code.
### Get Your Link
Every QR source generates a unique link:
```
https://your-domain.com/p/{code}
```
### Add a Button to Your Website
```html
<a href="https://your-domain.com/p/YOUR_CODE"
style="display:inline-block; background:#1e40af; color:#fff; padding:16px 32px;
border-radius:12px; font-weight:700; font-size:18px; text-decoration:none;">
Pledge Now →
</a>
```
### Embed as Full-Page iframe
```html
<iframe
src="https://your-domain.com/p/YOUR_CODE"
width="100%"
height="700"
style="border:none; border-radius:16px; max-width:480px;"
title="Make a Pledge"
></iframe>
```
## Option 2: QR Code for Print Materials
1. Go to **Dashboard → Events → [Your Event] → QR Codes**
2. Click **Download PNG** for each QR code
3. Print on table cards, flyers, or banners
### Recommended Sizes
- **Table cards**: 5cm × 5cm QR with label below
- **Banners**: 15cm × 15cm QR
- **Flyers**: 3cm × 3cm QR (still scannable)
### Print Template (HTML)
```html
<div style="text-align:center; padding:20px; border:2px solid #1e40af; border-radius:16px; width:200px;">
<img src="/api/events/EVENT_ID/qr/QR_ID/download?code=CODE" width="150" height="150" />
<p style="font-weight:700; margin-top:8px;">Scan to Pledge</p>
<p style="font-size:12px; color:#666;">Table 5 · Ramadan Gala 2025</p>
</div>
```
## Option 3: Webhook Integration (Advanced)
Connect reminders to your existing email/SMS tools:
### Poll for Due Reminders
```bash
curl -X GET "https://your-domain.com/api/webhooks?since=2025-01-01T00:00:00Z" \
-H "x-org-id: YOUR_ORG_ID"
```
### Response Format
```json
{
"events": [
{
"event": "reminder.due",
"timestamp": "2025-03-17T10:00:00Z",
"data": {
"reminderId": "clx...",
"pledgeId": "clx...",
"step": 1,
"channel": "email",
"donor": {
"name": "Sarah Khan",
"email": "sarah@example.com",
"phone": "07700900001"
},
"pledge": {
"reference": "PNPL-7K4P-50",
"amount": 5000,
"rail": "bank"
},
"event": "Ramadan Gala 2025"
}
}
]
}
```
### Zapier / Make Setup
1. Create a scheduled trigger (every 15 minutes)
2. HTTP GET to `/api/webhooks?since={{last_run}}`
3. For each event, send email/SMS via your provider
4. Templates available in Dashboard → Exports
## Option 4: CRM Integration
### Export Pledge Data
```bash
curl -X GET "https://your-domain.com/api/exports/crm-pack" \
-H "x-org-id: YOUR_ORG_ID" \
-o pledges.csv
```
### CSV Fields
| Field | Description |
|-------|-------------|
| pledge_reference | Unique ref (PNPL-XXXX-NN) |
| donor_name | Donor's name |
| donor_email | Email address |
| donor_phone | Phone number |
| amount_gbp | Amount in pounds |
| payment_method | bank / gocardless / card |
| status | new / initiated / paid / overdue / cancelled |
| event_name | Source event |
| source_label | QR source label |
| volunteer_name | Assigned volunteer |
| table_name | Table assignment |
| gift_aid | Yes / No |
| pledged_at | ISO timestamp |
| paid_at | ISO timestamp (if paid) |
| days_to_collect | Number of days to payment |
### Salesforce Import
1. Download CRM pack CSV
2. Salesforce → Setup → Data Import Wizard
3. Map fields: pledge_reference → External ID, amount_gbp → Amount, etc.
### Beacon CRM Import
1. Download CRM pack CSV
2. Beacon → Contacts → Import
3. Map donor fields and donation amount