How to Add KNav to Your Framer Website
Adding KNav to your Framer site is quick and straightforward. This guide walks you through embedding the KNav command palette so your visitors can press Cmd+K (or Ctrl+K) to instantly search and navigate your site.
Prerequisites
Before you begin, make sure you have:
- A KNav account with a configured workspace
- Your KNav workspace ID (found in your dashboard under Settings)
- A Framer project (custom code works on both free and paid plans)
The KNav Embed Code
Your KNav embed code looks like this:
<script
src="https://www.knav.app/embed.js"
data-workspace="your-workspace-id"
></script>
Replace your-workspace-id with your actual workspace ID from the KNav dashboard.
Method 1: Site-Wide Installation (Recommended)
This method adds KNav to every page on your Framer site—the recommended approach for most users.
Step 1: Open Site Settings
- In the Framer editor, click the gear icon in the top-right corner to open Site Settings
- Alternatively, use the keyboard shortcut
Cmd+,(Mac) orCtrl+,(Windows)
Step 2: Navigate to General Settings
- In the Settings panel, ensure you're on the General tab
- Scroll down to find the Custom Code section
Step 3: Add the KNav Script
- In the End of
<body>tag field, paste your KNav embed code:
<script
src="https://www.knav.app/embed.js"
data-workspace="your-workspace-id"
></script>
- The code saves automatically
Step 4: Publish Your Site
- Click the Publish button in the top-right corner
- Select your domain and confirm
That's it! KNav is now active on your entire Framer site.
Method 2: Page-Specific Installation
If you only want KNav on specific pages (like your documentation or pricing page), use page-level custom code.
Step 1: Select the Page
- In the left sidebar, open the Pages panel
- Click on the page where you want to add KNav
Step 2: Open Page Settings
- With the page selected, click the gear icon next to the page name, or
- Right-click the page and select Page Settings
Step 3: Add Custom Code
- Scroll to the Custom Code section
- In the End of
<body>tag field, paste your KNav embed code:
<script
src="https://www.knav.app/embed.js"
data-workspace="your-workspace-id"
></script>
Step 4: Repeat and Publish
- Repeat for any other pages where you want KNav
- Click Publish to make your changes live
Method 3: Using a Code Component (Advanced)
For Framer users who prefer working with React components, you can create a Code Component that loads KNav. This approach gives you more control and keeps everything within Framer's component system.
Step 1: Create a New Code Component
- In the left sidebar, go to Assets → Code
- Click the + button and select New Component
- Name it
KNavEmbed
Step 2: Add the Component Code
Replace the default code with:
import { useEffect } from "react"
export default function KNavEmbed() {
useEffect(() => {
// Check if script already exists
if (document.querySelector('script[src*="knav.app/embed.js"]')) {
return
}
const script = document.createElement("script")
script.src = "https://www.knav.app/embed.js"
script.dataset.workspace = "your-workspace-id" // Replace with your workspace ID
script.async = true
document.body.appendChild(script)
return () => {
// Cleanup on unmount (optional)
script.remove()
}
}, [])
return null // This component doesn't render anything visible
}
Step 3: Add to Your Page
- Drag the
KNavEmbedcomponent onto any page where you want KNav - The component is invisible but will load the KNav script
Step 4: Publish
Click Publish to see KNav in action.
Verifying the Installation
After publishing, visit your live Framer site and:
- Press
Cmd+K(Mac) orCtrl+K(Windows) - The KNav command palette should appear
- Try searching for content you've added to your KNav workspace
If the palette doesn't appear:
- Make sure you've published after adding the code
- Check that your workspace ID is correct
- Open browser DevTools (F12) and check the Console for any errors
Tips for Framer Users
Use Site-Wide Installation for Consistency
Unless you have a specific reason to limit KNav to certain pages, site-wide installation ensures a consistent experience across your entire site.
Staging vs Production
Framer lets you preview your site before publishing. Note that custom code only runs on the published site, so you'll need to publish to test KNav.
Performance
The KNav embed script is lightweight (~15KB) and loads asynchronously, so it won't slow down your page load times.
What's Next?
Once KNav is installed, head to your KNav dashboard to:
- Add commands and navigation shortcuts
- Configure AI to answer questions about your content
- Upload documents, PDFs, and add URL sources
- Customize the appearance to match your Framer site's design
- View analytics to see what your visitors are searching for
Need help? Reach out to us at support@knav.app or check our documentation.
