Email capture page using Notion API

Overview

Notion Capture

This starter shows how to use the new Notion API with Next.js. You can capture emails that will populate a Notion database.

Deploy your own

Deploy the example using Vercel.

How to use

Change into the project directory and run the following command:

yarn && yarn dev

Update Notion Keys

You need to add the following to your env.local file (and in the environment variables in Vercel/Netlify when deployed).

MY_NOTION_TOKEN=
DATABASE_ID=

You can find more details on how to get these here.

Update Site Metadata

You can update your site metadata in the next.config.js file.

env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://notioncapture.vercel.app',
  siteImagePreviewUrl: '/images/preview.png',
  twitterHandle: '@your_handle'
} 

Update Colors

You can update the color palette in tailwind.config.js file.

colors: {
  palette: {
    light: '',
    primary: '',
    dark: '',
  },
},

Update Image

The images are generated from the Unplash Random API. The cool gradient effect on the images is achieved by using the Tailwind Mix Blend Mode feature. You can experiment with this effect using this tool.

Update Progressive Web App (PWA) data

Update the manifest.json file and the icons under the public/images/icons folder.

You can use free tools online such as https://realfavicongenerator.net/ to quickly generate all the different icon sizes and favicon.ico file.

Want to have someone set it up for you?

Hit me up on Twitter and let's chat :)

If you are looking for more choices/ production ready websites I have more templates that might suit your needs.

You might also like...

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

GDSC MCE Blogs This repo is what GDSC MCE uses to power their blogging website gdsc-mce-blogs. It uses Notion as a CMS, fetching content from Notion a

Dec 16, 2022

Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients.

Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients.

Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients. It aims to seperate the concerns of generating the emails and delivering them.

Jan 2, 2023

Email Genie Allows autocomplete on email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.).

Email Genie  Allows autocomplete on email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.).

Allows users to easily and quickly complete an email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package stands out for its flexibility, its compatibility with libraries / frameworks, but especially its use of basic HTML and Javascript functionalities that maximize the native behavior of desktop AND mobile browsers.

Oct 4, 2022

DDG Email Panel is the open source unofficial DuckDuckGo Email Protection panel.

DDG Email Panel 简体中文 Open source unofficial DuckDuckGo Email Protection panel. ⭐ Features No need to install DuckDuckGo browser extension Supports all

Dec 28, 2022

🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

🦉The jQuery plugin

🦉 The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Feb 10, 2022

🍎 A simple application which enables you to sync readings from your Withings scale to a Notion page.

🍎 A simple application which enables you to sync readings from your Withings scale to a Notion page.

weight-logger weight-logger is a simple application which enables you to sync readings from your Withings scale to a Notion page. Preview Installation

Jan 14, 2022

This project is a web application that allows the user to select a location on a map, display the selected region, and capture an image of that region. The captured image is then applied as a texture to a 3D cuboid using BabylonJS.

Map-Babylon Client repo commit details https://github.com/hashmat-noorani/mapbox-babylon-client Server repo commit details https://github.com/hashmat

Mar 21, 2023

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Nov 15, 2022

A landing page, as well as a results page, that utliize both Yelp API and Google Maps API.

A landing page, as well as a results page, that utliize both Yelp API and Google Maps API.

Economic Eats Group Project #1 Maintained By: Austin Donovan John Hysong John Guzzetta Jahnathan Exantus Description This project contains a landing p

Aug 4, 2022

📧 Layanan pengirim pesan elektronik (email) dengan API.

📧 Fimail Fimail, layanan pengirim pesan elektronik dengan API. Dibuat dengan ❤ dan NodeJs oleh Feri Irawan pada 31/12/2021 06.27 ⚡ Memulai Cepat Beri

Dec 22, 2022

thetool is a CLI tool to capture different cpu, memory and other profiles for your node app in Chrome DevTools friendly format

thetool is a CLI tool to capture different cpu, memory and other profiles for your node app in Chrome DevTools friendly format

thetool thetool is a CLI tool to capture different cpu, memory and other profiles for your node app in Chrome DevTools friendly format. Quick start np

Oct 28, 2022

Capture website screenshots

Capture website screenshots

Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It's speedy and generates 100 screenshot

Dec 28, 2022

Capture a famous phrase, download it without hassle and share it with your friends. 🎉

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Mar 8, 2022

📷 Detects your face and adds filters from your webcam. You can capture and download images.

📷 Detects your face and adds filters from your webcam. You can capture and download images.

Snapchat Filters on WebCam 📷 Detects your face and adds filters from your webcam. You can capture and download images. 👉 Visit site 📌 Screenshots ?

Apr 27, 2022

A quick capture plugin for Obsidian, all data from your daily notes.

A quick capture plugin for Obsidian, all data from your daily notes.

Obsidian Memos 中文文档 A new way for you to quick capture an idea in Obsidian. Which is highly based on the awesome open source project: memos and awesom

Jan 3, 2023

An application to capture the 10 most watched movies/series on netflix.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 6, 2022

A social media platform aimed to capture the essence of all popular, existing social media platforms

A social media platform aimed to capture the essence of all popular, existing social media platforms

Social Fuel Reimagining Social Media, step by step 📌 About A social media platform aimed to capture the essence of all popular, existing social media

Feb 12, 2022

An application to capture screenshots automatically of your screen!

 An application to capture screenshots automatically of your screen!

TASCA : The Automatic Screenshot Capturing Application An application to capture screenshots automatically of your screen! Report Bug · Request Featur

Jan 27, 2022
📫 Offline email validation - JS or TS

email-seems-valid An offline check to see if an email seems valid. Contains TS or JS packages for browser or Node.js emailSeemsValid('[email protected]')

earnifi 12 Dec 25, 2022
DiscordEmailVerifier - Quickly verify emails on your tokens for completely free using mail.tm's api.

DiscordEmailVerifier Quickly verify emails on your tokens for completely free using mail.tm's api. /* ❗ No, this code doesn't verify the email for you

eric 3 Jun 7, 2022
Reading emails from Gmail provider using Node.js along with Google API

?? Project summary Reading emails from Gmail provider using Node.js along with Google API (study only). ?? Technologies Project was built using Node.j

Jhony Walker 2 Jan 8, 2022
Creating a Blog API, with full CRUD using NodeJS, Express, Mongoose, and MongoDB.

Blog API Blog API that uses CRUD to create, login users, delete and update blog posts. https://blog-api12.herokuapp.com/ Installation Make a new folde

Eros Nolasco Mendoza 18 Jun 29, 2022
Schema-Inspector is an JSON API sanitisation and validation module.

Schema-Inspector is a powerful tool to sanitize and validate JS objects. It's designed to work both client-side and server-side and to be scalable wit

null 494 Oct 3, 2022
Tag-input - A versetile tag input component built with Vue 3 Composition API

TagInput A versetile tag input component built with Vue 3 Composition API. Please read this article to learn how to build this package step by step an

Mayank 12 Oct 12, 2022
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Yogesh Sharma 0 Jan 3, 2022
A library for validate a string using regular expressions.

Fogex Form Regex Quickly and easily check if the content is valid. Installation npm install fogex or yarn add fogex Usage import fogex from 'fogex';

null 5 May 5, 2022
Schema validation utilities for h3, using typebox & ajv

h3-typebox JSON schema validation for h3, using typebox & ajv. Install # Using npm npm install h3-typebox # Using yarn yarn install h3-typebox # Usi

Kevin Marrec 43 Dec 10, 2022