410 lines
16 KiB
Markdown
Executable File
410 lines
16 KiB
Markdown
Executable File
# Change Maker Simple Button
|
|
|
|
<div style="background: linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,246,169,0.05)); padding: 2rem; border-radius: 15px; margin: 1.5rem 0;">
|
|
<p style="font-size: 1.5rem; text-align: center; margin: 0; background: linear-gradient(135deg, #ffd700, #fff6a9); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: bold; line-height: 1.4;">
|
|
Transform any website into a powerful catalyst for change with our seamless, one-click solution.
|
|
</p>
|
|
<p style="font-size: 1.1rem; text-align: center; margin: 1rem 0 0; color: #666; text-shadow: 0 1px 2px rgba(255,215,0,0.1);">
|
|
Free. Open. Built by activists, for activists.
|
|
</p>
|
|
</div>
|
|
|
|
<style>
|
|
@media (max-width: 768px) {
|
|
.hero-flex-container {
|
|
flex-direction: column !important;
|
|
padding: 0.5rem !important;
|
|
margin: 1rem 0 !important;
|
|
}
|
|
.hero-flex-container > div {
|
|
width: 100% !important;
|
|
margin: 0.25rem 0 !important;
|
|
}
|
|
.feature-grid {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 0.25rem !important;
|
|
margin: 0.5rem 0 !important;
|
|
}
|
|
.feature-card {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
text-align: left !important;
|
|
padding: 0.5rem !important;
|
|
}
|
|
.feature-card > div:first-child {
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
.iframe-container {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important; /* Center the iframe container */
|
|
}
|
|
.iframe-container iframe {
|
|
min-height: 600px !important;
|
|
width: 100% !important;
|
|
max-width: 400px !important;
|
|
margin: 0 !important; /* Remove margins to align properly */
|
|
}
|
|
.iframe-title {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="hero-flex-container" style="display: flex; gap: 2rem; align-items: start; background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,246,169,0.1)); padding: 2rem; border-radius: 20px; margin: 2rem 0;">
|
|
<div class="hero-container" style="background: linear-gradient(135deg, #1a1a1a, #2d2d2d); border-radius: 15px; padding: 1.5rem; color: white; flex: 1;">
|
|
<h1 style="background: linear-gradient(135deg, #ffd700, #fff6a9); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2rem; text-align: center; margin: 0;">Simple Button</h1>
|
|
|
|
<p style="text-align: center; font-size: 1rem; margin: 1rem 0 1.5rem; color: #e0e0e0;">Empower your community with zero technical hassle.</p>
|
|
|
|
<div class="feature-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1rem 0;">
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">📧</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Direct Impact</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">Real emails that work</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">⚡</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Instant Setup</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">From idea to action in minutes</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">🔒</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Privacy First</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">Your data stays yours</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">💝</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Always Free</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">No hidden costs</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">🤝</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Community Built</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">By organizers, for organizers</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">🌐</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Instant Pages</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">Built-in landing pages</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">🔌</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Embed Anywhere</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">Works on any website</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">🛟</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Ongoing Support</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">Community backed help</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(255,255,255,0.05); padding: 0.6rem; border-radius: 8px; text-align: center;">
|
|
<div style="font-size: 1.5rem;">👩💻</div>
|
|
<div>
|
|
<h3 style="margin: 0.3rem 0; font-size: 0.8rem; color: #ffd700;">Open Code</h3>
|
|
<p style="margin: 0; font-size: 0.7rem; color: #e0e0e0;">Transparent & secure</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="iframe-container" style="flex: 1; min-width: 300px; display: flex; flex-direction: column; align-items: center;">
|
|
<h2 class="iframe-title" style="text-align: center; font-size: 1.2rem; margin: 0 0 0.5rem; background: linear-gradient(135deg, #ffd700, #fff6a9); -webkit-background-clip: text; background-clip: text; color: transparent;">Live Demo</h2>
|
|
<iframe
|
|
id="emailButtonIframe-change"
|
|
src="https://button.bnkops.com/embed/change"
|
|
style="width: 100%; max-width: 450px; height: 580px; border: none; overflow: hidden; border-radius: 10px; margin: 0 auto;"
|
|
scrolling="no"
|
|
frameborder="0"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
## Why Use Simple Change Button?
|
|
|
|
- ✨ **Free Forever** - No hidden costs, no premium features
|
|
- 🚀 **5-Minute Setup** - From zero to action in minutes
|
|
- 📧 **Real Impact** - Emails come from real people's accounts
|
|
- 🔒 **Privacy First** - No invasive tracking of users
|
|
- 💪 **Community Owned** - Built by organizers, for organizers
|
|
|
|
Install Simple Change Button on your website and start making a difference today!
|
|
|
|
## Installation Guide
|
|
|
|
Simple Change Button is a self-hosted tool that requires Docker & Docker Compose to run. Follow these steps to get started:
|
|
|
|
Install Docker & Docker Composer
|
|
|
|
[Docker Installation Instructions](Installation.md){ .md-button }
|
|
|
|
Releases of the latest version of Simple Change Button are released with the newsletter. To get the latest version, subscribe to the newsletter below:
|
|
|
|
<form method="post" action="https://listmonk.bnkops.com/subscription/form" class="listmonk-form">
|
|
<div style="
|
|
background-color: #fbbf24;
|
|
padding: 1.25rem;
|
|
padding-top: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
color: #1f2937;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 1rem 0;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
animation: glow 2s ease-in-out infinite;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: inline-block;
|
|
">
|
|
<style>
|
|
@keyframes glow {
|
|
0% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
|
|
50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); }
|
|
100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.listmonk-form > div {
|
|
width: 90% !important;
|
|
max-width: 600px !important;
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.listmonk-form > div {
|
|
width: 95% !important;
|
|
max-width: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
<h3 style="font-size: 1.25rem; font-weight: bold; margin-bottom: 0.75rem; color: #1f2937;">Subscribe</h3>
|
|
<input type="hidden" name="nonce" />
|
|
<div style="display: flex; gap: 1rem; margin-bottom: 0.5rem;">
|
|
<p style="margin: 0; flex: 1;">
|
|
<input type="email"
|
|
name="email"
|
|
required
|
|
placeholder="E-mail"
|
|
style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; background: white; color: #4b5563; ::placeholder { color: #9ca3af; }" />
|
|
</p>
|
|
<p style="margin: 0; flex: 1;">
|
|
<input type="text"
|
|
name="name"
|
|
placeholder="Name (optional)"
|
|
style="width: 100%; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; background: white; color: #4b5563; ::placeholder { color: #9ca3af; }" />
|
|
</p>
|
|
</div>
|
|
|
|
<p style="display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem 0;">
|
|
<input id="038eb"
|
|
type="checkbox"
|
|
name="l"
|
|
checked
|
|
value="038eb469-e141-435d-86eb-2ab4df20cf9c"
|
|
style="width: 1rem; height: 1rem; accent-color: #1f2937;" />
|
|
<label for="038eb" style="font-size: 0.875rem;">Weekly(ish) Update</label>
|
|
</p>
|
|
|
|
<p style="margin: 0;">
|
|
<input type="submit"
|
|
value="Subscribe"
|
|
style="width: 100%; padding: 0.75rem; background-color: #1f2937; color: white; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: all 0.2s; hover: { background-color: #374151; transform: translateY(-1px); }" />
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
Or you can email the admin directly and request access:
|
|
|
|
<div style="width: 350px; margin: 0 auto;">
|
|
<iframe
|
|
id="emailButtonIframe-email-admin"
|
|
src="https://button.bnkops.com/embed/email-admin"
|
|
style="width: 100%; height: 120px; border: none; overflow: hidden;"
|
|
scrolling="no"
|
|
frameborder="0"
|
|
></iframe>
|
|
</div>
|
|
|
|
## Install
|
|
|
|
### Independent Installation
|
|
|
|
#### Download and Unzip the Latest Release
|
|
|
|
#### Update .env Files
|
|
|
|
In the Simple Change Button directory, update the `.env` files with your desired settings. Theese two files can be found in the `backend` and `frontend` directories.
|
|
|
|
!!! example ".frontend/.env"
|
|
```
|
|
REACT_APP_API_URL=http://localhost:5000
|
|
REACT_APP_PRODUCTION_URL=https://button.bnkops.com // Change this to your domain
|
|
NODE_ENV=development // change to production for production
|
|
PORT=5001
|
|
```
|
|
|
|
|
|
!!! example ".backend/.env"
|
|
```
|
|
JWT_SECRET=your-very-secure-and-very-long-secret-key-here // Change this to a secure key
|
|
MONGODB_URI=mongodb://127.0.0.1:27017/emailcounter
|
|
PORT=5000
|
|
NODE_ENV=development // change to production for production
|
|
CORS_ORIGIN=http://localhost:5001
|
|
```
|
|
|
|
Run `docker-compose up` in the Simple Change Button directory.
|
|
|
|
Your Simple Change Button instance will be available at `http://localhost:5001` in your browser.
|
|
|
|
### Install With Changemaker
|
|
|
|
If you are using Changemaker, you can install Simple Change Button during installation.
|
|
|
|
Run `./start.sh` in the root directory and select Simple Change Button from the list of available tools.
|
|
|
|
## First Open
|
|
|
|
On first open, you will be prompted to create an admin account. Fill in the details and click "Create Account". You will then be redirected to the dashboard.
|
|
|
|
### Quick Start
|
|
|
|
1. Create a button in the dashboard
|
|
2. Copy the embed code
|
|
3. Paste it anywhere on your site
|
|
4. Track real engagement
|
|
|
|
## Dashboard
|
|
|
|
|
|
|
|
The dashboard is where you can create, manage, and track your buttons. You can also manage users and view statistics.
|
|
|
|
### Dashboard Features
|
|
|
|
- Total emails sent
|
|
- Per-button metrics
|
|
- Usage trends
|
|
- Real-time statistics
|
|
- Export capabilities
|
|
- User Management
|
|
|
|
## Analytics
|
|
|
|
|
|
|
|
Analytics are available in real-time and provide insights into button performance. You can also export data for further analysis.
|
|
|
|
## User Management
|
|
|
|
|
|
|
|
User management allows you to add, remove, and edit user accounts. Future updates will include assign roles and permissions to users.
|
|
|
|
## Creating a Button
|
|
|
|
|
|
|
|
1. Log into admin dashboard
|
|
2. Click "Create New Button"
|
|
3. Fill in button details
|
|
4. Optional: Add CC/BCC
|
|
5. Save and get embed code
|
|
|
|
## Editing a Button
|
|
|
|
|
|
|
|
Buttons are listed according to time of creation and can be edited at any time. You can change the button text, email body, and other settings.
|
|
|
|
## Standalone Button Page
|
|
|
|
|
|
|
|
All buttons also generate a standalone page that can be shared directly. This page includes the button, email body, and other details. Useful for sharing on social media or in emails.
|
|
|
|
## Privacy & Security
|
|
|
|
- No personal data collection
|
|
- GDPR-compliant design
|
|
- Encrypted connections
|
|
- Local data storage only
|
|
|
|
## Deployment
|
|
|
|
Bnkops uses Cloudflare for secure, fast, and reliable hosting. You can also deploy Simple Change Button on your own server.
|
|
|
|
We have instructions for deployment through Cloudflare for the whole Changemaker suite.
|
|
|
|
[Cloudflare Deployment](Get Site Online.md){ .md-button }
|
|
|
|
However, you can also deploy Simple Change Button independently. Here is a sample configuration file for Cloudflare Tunnel:
|
|
|
|
!!! example "Cloudflare Tunnel Configuration"
|
|
```yaml
|
|
tunnel: [YOUR-TUNNEL-ID]
|
|
credentials-file: [path-to-credentials-file]
|
|
ingress:
|
|
- hostname: [button.your-domain.com]
|
|
service: http://localhost:5001
|
|
- service: http_status:404
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
!!! tip "Design Recommendations"
|
|
|
|
- Keep email body concise
|
|
- Use clear call-to-action text
|
|
- Test buttons before deployment
|
|
- Monitor performance regularly
|
|
|
|
## Troubleshooting
|
|
|
|
!!! question "Common Issues"
|
|
**Button not tracking:**
|
|
|
|
- Check internet connection
|
|
- Verify proper embedding
|
|
- Clear browser cache
|
|
|
|
**Stats not updating:**
|
|
|
|
- Refresh dashboard
|
|
- Check server connection
|
|
- Verify permissions
|
|
|
|
## Support
|
|
|
|
Contact system administrator for:
|
|
|
|
- Technical issues
|
|
- Feature requests
|
|
- Account problems
|
|
- General assistance
|
|
|
|
---
|
|
Built with ♥️ by communities, for communities
|
|
|
|
|
|
|