How to Add KNav to Your Webflow Website

Adding KNav to your Webflow site takes just a few minutes. 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)
• A Webflow site with a paid plan (custom code requires a paid Webflow plan)

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 Webflow site—the recommended approach for most users.

Step 1: Open Project Settings

1. In the Webflow Designer, click the Webflow icon (W) in the top-left corner
2. Select Project Settings from the dropdown menu

Step 2: Navigate to Custom Code

1. In Project Settings, click the Custom Code tab in the left sidebar
2. You'll see two sections: Head Code and Footer Code

Step 3: Add the KNav Script

1. Scroll down to the Footer Code section (labeled "Before </body> tag")
2. Paste your KNav embed code:

<script
    src="https://www.knav.app/embed.js"
    data-workspace="your-workspace-id"
></script>

3. Click Save Changes

Step 4: Publish Your Site

1. Go back to the Designer
2. Click Publish in the top-right corner
3. Select your domain and click Publish to Selected Domains

That's it! KNav is now active on your entire Webflow site.

Method 2: Page-Specific Installation

If you only want KNav on specific pages (like your documentation or help center), use this method.

Step 1: Open Page Settings

1. In the Webflow Designer, open the Pages panel (click the page icon in the left sidebar)
2. Hover over the page you want to add KNav to
3. Click the gear icon to open Page Settings

Step 2: Add Custom Code

1. Scroll down to the Custom Code section
2. In the Before </body> tag field, paste your KNav embed code:

<script
    src="https://www.knav.app/embed.js"
    data-workspace="your-workspace-id"
></script>

3. Click Save

Step 3: Repeat and Publish

1. Repeat for any other pages where you want KNav
2. Click Publish to make your changes live

Method 3: Using an Embed Element

If you need more control over where KNav loads, you can use Webflow's Embed element.

Step 1: Add an Embed Element

1. In the Designer, click the Add Elements panel (+ icon)
2. Scroll to Components and drag an Embed element onto your page
3. Place it at the bottom of your page (inside the footer or at the end of the body)

Step 2: Add the Code

1. Double-click the Embed element to open the code editor
2. Paste your KNav embed code
3. Click Save & Close

Step 3: Publish

Publish your site to see KNav in action.

Verifying the Installation

After publishing, visit your live Webflow site and:

1. Press Cmd+K (Mac) or Ctrl+K (Windows)
2. The KNav command palette should appear
3. Try searching for content you've added to your KNav workspace

What's Next?

Once KNav is installed, head to your KNav dashboard to:

• Add more content sources (URLs, documents, PDFs)
• Customize the appearance to match your brand
• View analytics to see what your visitors are searching for

Need help? Reach out to us at support@knav.app or check our documentation.