Notion Integration Guide

This guide shows you how to add Heyo to your Notion-based website.

Important Note

Native Notion pages have very limited custom code support. Heyo works best when using Notion with website builders like:

• Super.so (Recommended)
• Potion
• Fruition
• Other Notion-to-website tools

Installation with Super.so

Step 1: Access Custom Code Settings

1. Log in to your Super.so dashboard
2. Go to Site Settings
3. Navigate to Code or Custom Code section

Step 2: Add Heyo Script

In the Header Code or Custom Code field, add:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

Step 3: Save and Publish

Click Save and your chat widget will appear on your Notion site!

Installation with Potion

Step 1: Access Settings

1. Log in to your Potion dashboard
2. Go to your site settings
3. Find Custom Code or HTML Injection section

Step 2: Add Heyo Script

Paste the Heyo script in the appropriate field (usually called "Header" or "Before </head>"):

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

Step 3: Publish

Save your changes and publish your site.

Installation with Fruition

Fruition uses Cloudflare Workers, which is more technical:

1. Edit your Fruition Cloudflare Worker script
2. Add the Heyo script tag to the HTML transformation
3. This requires JavaScript/Cloudflare Workers knowledge

For simpler setup, consider using Super.so or Potion instead.

Use Cases

Portfolio Sites

Perfect for:

• Creative portfolios built in Notion
• Personal websites
• Designer showcases

Let visitors chat with you about your work.

Documentation Sites

Great for:

• Product documentation
• Help centers
• Knowledge bases

Allow users to ask questions while reading docs.

Public Wiki or Knowledge Base

Ideal for:

• Community wikis
• Resource libraries
• Educational content

Help visitors find information through chat.

Advanced Usage

Custom Positioning

If your Notion site builder supports custom CSS:

<style>
  #heyo-widget-button {
    bottom: 20px !important;
    right: 20px !important;
  }
</style>

Hide on Specific Pages

If using Super.so or Potion with page-specific code:

<style>
  /* Hide chat on specific paths */
  body[data-path="/login"] #heyo-widget-button,
  body[data-path="/signup"] #heyo-widget-button {
    display: none !important;
  }
</style>

Note: Implementation depends on your website builder's capabilities.

Limitations

Native Notion

Does NOT work with:

• Basic Notion pages without a website builder
• Notion shared links (notion.site URLs)
• Internal Notion workspaces

Only works with:

• Notion + Super.so
• Notion + Potion
• Notion + other website builders that support custom code

Best Practices

• Use a Notion website builder that supports custom code
• Super.so is the easiest and most recommended option
• Test the chat on your published site (not in Notion editor)
• Customize widget colors to match your Notion design
• Consider where visitors are most likely to need help

Troubleshooting

Chat not appearing

• Verify you're using a website builder (Super, Potion, etc.)
• Check that Project ID is correct
• Ensure custom code is saved and site is published
• Native Notion pages won't work - you need a builder

Not working on notion.site URLs

• Heyo requires a custom domain with a website builder
• Use Super.so or Potion for custom domains
• Native notion.site URLs don't support custom code

Conflicts with Notion blocks

• Heyo shouldn't conflict with Notion content
• If issues occur, try adjusting z-index in custom CSS
• Report specific issues to your website builder's support

Recommended Setup

For best results:

1. Use Super.so (easiest, best Notion integration)
2. Get a custom domain
3. Add Heyo via Super's custom code feature
4. Customize appearance to match your site

Alternative: Use Potion if you prefer their features.

Platform Comparison

Next Steps

• Customize widget appearance
• Set up integrations
• Learn about proactive messaging