Generate Code to Embed Your Knack App

What you'll learn:

How to access and manage settings for embedding your Knack app
How to create and configure code snippets for different display needs
How to customize display options, navigation, and sizing for embedded content
Best practices for implementing embedded apps on external websites

About Next-Gen Embedding Feature

Knack's embedding feature uses iframe technology to display your app or specific pages on external websites.

When embedded, your app maintains complete functionality including data management, user interactions, authentication, and all custom styling and branding you've applied in Themes.
This approach is ideal when you want to integrate your app's functionality into an existing website without requiring users to navigate away from their current environment.

Navigate to your configuration settings through the app settings menu:

Open the Settings menu in your Knack builder
Select Embed from the left navigation panel
View your existing code snippets or create new ones using the + Code Snippet button

To generate a new code snippet for your application:

Click the + Code Snippet button on the main settings page
Enter a name for your code snippet (this is for your reference only)
Configure your settings using the options detailed below
Click Save to generate your code snippet

The system will create a unique iframe-based code that you can implement on an external website.
Choose which page serves as the entry point for your embedded app:

Select from the Start Page dropdown to specify which page users will see first
The selected page becomes the landing point when users access your embedded content

📝 Only top-level and parent pages are available for embedding

Control how much of your app's interface appears in the embedded version:

Display navigation menu only: Shows just the page navigation tabs without header elements
Display navigation menu with background: Includes navigation with a header background but excludes app name and logo
Display full navigation: Shows the complete header including app name, logo, navigation menu, and background styling
Hide Navigation: All navigation, including the navigation menu, logo and links to the user profile will be hidden

The preview panel on the right side of the configuration dialog shows an example image of how your selected display option will appear when embedded.

Determine how the embedded container handles height:

Dynamic Height: Container automatically adjusts to fit the content size, expanding and contracting as needed. With Dynamic Height options, the navigation bar will always be horizontal.
Fixed Height: Set a specific pixel height (default 600px) with scrollable content if it exceeds the container height

📝Dynamic height works best for content that varies in size, such as forms with display rules that conditionally show or hide fields, or tables with changing data volumes. Fixed height provides a consistent layout, and may require scrolling for longer content.

From the main settings page, you can manage all your code snippets:

Click the Copy Code button next to any code snippet to automatically copy to your clipboard
The copied code includes all necessary iframe elements and scripts for implementation

Access more functions through the three-dot menu (...) next to each code snippet:

Settings: Modify the configuration options for an existing code snippet
View Code: Display the full code snippet in a popup for easy copying
Delete: Remove code snippets you no longer need

🚧
Changing your app's slug or deleting the code snippet will cause the embedded app to stop working on external websites

Once you've generated and copied your code snippet:

Paste into Website

Insert the code into your external website where you want the app to appear

Test Functionality

Verify that the embedded app displays correctly and maintains expected functionality
The code snippet includes all necessary elements to display your Knack app within an iframe container.

When embedding pages that require user authentication:

Users must still log in to access protected content within the embedded app
Authentication flows work normally within the iframe environment
User roles and permissions apply exactly as they do in the standalone app
Session management functions identically to the full app experience
Your Knack app's custom themes and branding appear automatically in embedded content. You can adjust the Theme's custom colors and fonts to match your website branding.
Test your embedded app on various screen sizes and devices
Consider updating the container width on the host website to ensure optimal display
Use dynamic height for better responsive behavior

Embedded content not displaying:

Verify that the code snippet was copied completely and pasted correctly
Check that the host website allows iframe content

💡Updating your page or app name will not affect your embedded pages