Using website integrations
Website integrations or third-party tools can turn a simple Notion page into a powerful, automated site. The best part is you can manage all your content and integrations in one place — in Notion alongside everything you use the app for already.
The following are some examples of how you could use integrations:
Turn your website into a paid membership site
Embed files, projects, and other assets
Sell online using Gumroad integration
Embed a video from YouTube or Vimeo
Show your favorite or best-performing Tweet on your site
See below some common integrations to enhance your site if you’re looking to embed third-party tools into your site. This is not the complete list, though. We regularly add new features and tools you can integrate, so keep checking back for updates in our roadmap. If there is a feature you would like to see added, fill in our contact form below the roadmap — we love to hear your comments.
Add Google maps to your site
If you run a business, for example, a physical store, you may want to show users where to find you. With the Google Maps embed, you can show the exact location:
Go to Google Maps and locate the address you want to share
Either click on your business Google Maps profile or left-click on the map to drop a pin and click on the address window that appears bottom of the map
Click the Share icon
Copy the link for sharing
Head back into your Notion page and type
/Google
where you want to place the mapSelect Google Maps
Paste the link you copied from Google Maps. That’s it! Site visitors can now see the embedded map on your site and easily find your shared address
Embed PDFs and other assets
Super makes file embedding easy. If you want to show site visitors a PDF, embed an image or an illustration (take a look at our free illustrations), or share a project or file (like from your Google Drive, CodePen, Behance, and other sites), you can upload local files or embed using a link:
Type the
/embed
command in your Notion pageChoose Embed link to paste a link to your asset or Upload for local files on your device
The linked or uploaded file will appear in your Notion and your Super site
If you are sharing a link, you can also:
Copy and paste your URL directly in your Notion page
Select Create embed from the popup window
Integrate video content
Videos can be compelling and drive more traffic to your site. Embed eye-catching videos on your Supers site with these simple steps:
Type
/video
directly in your Notion pagePaste URL to your video uploaded on YouTube or Vimeo or choose a local video upload on your device
Share your Tweet
You may have a Twitter post that takes off, or you may want to highlight a Tweet that mentions you for some social proof. You can embed a Tweet on your Super site:
Press Share under your Tweet and click Copy link to Tweet
Head back to your Notion page and either type
/Tweet
and paste your link in the field or paste it directly in your Notion page and select Embed Tweet
Add Tally forms
Tally offers no-code forms seamlessly integrated with Notion. You can embed those on your Super site, too:
Create your Tally form and press Publish
Head to Share tab and select the Standard option
Customize the embed options
Click Copy embed link
Type the
/embed
command in your Notion page and paste the link you just copied. Done!
Sell digital or physical products using Gumroad online store
If you want to sell online, Gumroad can help you get started. It could be a course, digital files, or anything else — Gumroad handles your online store and payments. To add your Gumroad product or store to a Super site:
Copy your Gumroad product or store profile URL
Paste the link to your Notion page
Select Create embed
Protect and monetize your content
If you want to earn from running a paid online community or teaching a course, you can create member-only access pages in your Notion and Super. All you need is a paid MemberSpace account to handle members, billing, drip-fed content, and more. Follow these steps to get set up.
You can find some membership set up guides here:
Adding your own fonts
Use the font embed code you get from Google and then set some CSS variables:
Here is how we got the code from google: https://share.cleanshot.com/6mxxQ6
Add this code in the Head section of Code for your site:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&family=Space+Grotesk:wght@300;400&display=swap" rel="stylesheet">
And this code in the CSS section
::root { --primary-font: 'Space Grotesk', sans-serif; !important; --secondary-font: 'Quattrocento', serif; !important; }
Note that there is no Light for Quattrocento so we used regular and bold.