This application is a simple landing page built using Angular and the Cosmic Headless CMS that allows an organization to build a mailing list of users and in exchange deliver some premium content to the user via a download.
- The application owner sets up a campaign up in Cosmic which feeds details into the landing page.
- When the user visits the landing page they will receive information about the campaign and be presented with a form to sign up for the offered content.
- After the user's information is submitted, it is saved in a Cosmic Object and attached to the campaign Object.
- The user then receives the premium content downloaded to their machine.
One click install to a new Bucket with the following button:
You can also view more details, and select this app in the Cosmic App Marketplace.
Locally, the application requires a .env file holding the environment variables needed for the application to communicate with the Cosmic API. When moving to deployment, the application will pull the values from the server's environment variables and create an environment file for the application so it will have access to these values. The list of what variables are needed are the following (find these in your Cosmic dashboard located in Bucket Basic Settings > API Access):
# .env
COSMIC_BUCKET=<your-bucket-slug>
COSMIC_READ_KEY=<your-bucket-read-key>
COSMIC_WRITE_KEY=<your-bucket-write-key>
COSMIC_API_URL=https://api.cosmicjs.com/v1/
COSMIC_CAMPAIGN_NAME=<campaign-object-slug> # find this in the Campaigns > My First Campaign in the Cosmic DashboardClone this repo, install and run.
git clone https://github.com/cosmicjs/angular-marketing-landing-page
cd angular-marketing-landing-page
npm i
npm start
Go to your local running instance at https://localhost:4200.
Deploy to Netlify using the following button. You will need to add your Bucket slug and Bucket read key as environment variables. Find these in Basic Settings > API Access.
