Embedding Your Knack App

What you'll learn:

How to access and manage embed settings in your Knack app
How to create and configure embed codes 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

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.

Accessing Embed Settings

Navigate to your embed configuration through the app settings menu:

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

Creating a New Embed Code

To generate a new embed code for your application:

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

The system will create a unique iframe-based code that you can implement on an external website.

Embed Configuration Options

Start Page Selection

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

Display Options

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

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.

Sizing Configuration

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.

Managing Existing Embed Codes

From the main Embed settings page, you can manage all your embed codes:

Copying Embed Codes

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

Additional Options

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

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

⚠️Changing your app's slug or deleting the embed code will cause the embedded app to stop working on external websites.

Implementing Your Embed Code

Once you've generated and copied your embed code:

Copy the Code: Use the Copy Code button to copy the complete iframe code to your clipboard
Paste into Website: Insert the code into the HTML of your external website where you want the app to appear
Test Functionality: Verify that the embedded app displays correctly and maintains full functionality

The embed code includes all necessary elements to display your Knack app within an iframe container.

Authentication and Access Control

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

Best Practices and Troubleshooting

Styling

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.

Responsive Design Considerations

Test your embedded app on various screen sizes and devices
Consider the container width on the host website to ensure optimal display
Use dynamic height for better responsive behavior

Common Issues and Solutions

Embedded content not displaying:

Verify that the embed code 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.

⚠️Changing your app's slug or deleting the embed code will cause the embedded app to stop working on external websites.