# 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

![alt text](image-21.png)

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

![alt text](image-23.png)

Analytics are available in real-time and provide insights into button performance. You can also export data for further analysis.

## User Management

![alt text](image-24.png)

User management allows you to add, remove, and edit user accounts. Future updates will include assign roles and permissions to users.

## Creating a Button

![alt text](image-22.png)

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 

![alt text](image-25.png)

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

![alt text](image-26.png)

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