Package Exports

@epurchasepower/can-action-carousel
@epurchasepower/can-action-carousel/dist/production/can-plugin.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@epurchasepower/can-action-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Climate Action Now Web Plugin

A React-based web plugin for embedding climate action cards into any website. Built with TypeScript, Vite, and Tailwind CSS.

Embedding

📖 Complete Embedding Guide →

Quick start for embedding the plugin:

<!-- Option 1: Script Embedding (auto-sizing) -->
<script 
  src="https://unpkg.com/@epurchasepower/can-action-carousel@latest/dist/production/embed-loader.js"
  data-client-id="can"
  data-campaign-code="173"
  data-theme="light">
</script>

<!-- Option 2: Direct Iframe (most reliable) -->
<iframe 
  src="https://unpkg.com/@epurchasepower/can-action-carousel@latest/dist/production/src/embed.html?clientId=can&campaignCode=173&theme=light"
  width="100%" 
  style="border: 0; height: 600px;"
  title="Climate Action Plugin"
  sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write">
</iframe>

Features

Action Cards: Interactive climate action cards with completion tracking
Multi-Step Flows: Petition signing, calling representatives, and learning actions
Responsive Design: Works on desktop and mobile devices
Theme Support: Light and dark themes
Auto-Resize: Dynamic height adjustment (script embedding)
Cross-Origin Safe: Bypasses browser security restrictions

Development

Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Start iframe development (for embedding tests)
pnpm dev:iframe

# Build for production
pnpm build:staging    # Staging build
pnpm build:production # Production build

# Run tests
pnpm test
pnpm check-types
pnpm lint

Environment Configuration

Create .env.development from .env.example:

VITE_API_BASE_URL=http://localhost:8040
VITE_TENANT_ID=can
VITE_CAMPAIGN_CODE=173

Architecture

Built with React, TypeScript, and Tailwind CSS. Key directories:

src/components/ - React components
src/features/ - Feature modules (actions, carousel)
src/hooks/ - Custom React hooks
src/services/ - API services

Contributing

Create a feature branch
Make your changes
Run pnpm test and pnpm check-types
Submit a pull request