New Builder
Get Started
Manage Your Records
How Knack Works
Design Your Database
Do More With Knack
View and Share Your App
Build Your Live Application
Learn More
Connect Related Data
Reporting & Dashboards
E-Commerce & Payments
Search & Queries
Emails & Notifications
Workflow
Calculations & Logic
Users & Access
Builder Guide
Pages
Working with Pages
Deleting a Page That's Being Linked to
Printing Pages & PDFs
Page Rules
User Pages
Page Menu
Objects & Connections
Plan Your Objects
Plan Your Connections: Complex Example
Plan Your Connections: Simple Example
Special Objects
Connecting Records Together
Use Connections in Your App
About Connections
Connection Types
Working With Objects
Connections: Troubleshooting & FAQs
App Customization
Live App Design
Embed Your App
Integrate with Formstack Documents
Integrate with Zapier
Integrate with Integromat
Working with Icons
Other Customization Options
E-Commerce
Views
Using Action Links
Using Record Rules
Table Settings
Table Column Settings
About Views
Combining Fields from Connected Records in Views
Reports
Source: Which Records Will the View Display
Forms
Searches
Using Display Rules
Tables
Lists
Maps
Details
Rich Text
Calendars
Using Submit Rules
Menus
Records
Importing Connections
Import Records
Working with Records
CSV Format Guide for Importing
Export Records
Batch Updates
Delete Records
Tasks & Emails
Builder Basics
Users & Logins
Live App Security Settings
Live App Security Settings: HIPAA Plans
Manage Roles & Permissions
Manage User Records
About Users
Users and the Page Menu
Single Sign-On with Google, Facebook, Twitter, and Custom
Logins and Registrations
Fields
FAQ
Support
Working With Support
I need help with CSS, Javascript, or jQuery.
What is a dedicated support manager?
Accounts
Is there an option to pay via invoice, check, wire transfer, or something other than a credit card?
Where can I find a copy of my receipt or invoice?
I'm over the storage limit for my account. How do I add more storage or get under the limit?
I'm over the record limit for my account. How do I add more records or get under the limit?
How do I freeze or pause my Knack account?
Need account access or to transfer account access because account owner or colleague left the company
How do I cancel my Knack account?
How do I add more API calls to my account?
Managing Apps
How do I remove the "Powered by Knack" logo at the bottom of my app?
How do I give Builder access to a colleague or developer for one of my apps?
How do I change the favicon for my app?
How do I backup or export my apps and data?
How do I white label my app?
How do I copy an app from my account to another account?
How can I track what users are doing in my app?
App Building
How do I find the most recent date from a connected object?
How do I move or copy fields or data from one object to another?
How do I add a logo to my app?
How can I change the color of something in my app?
The menu isn't showing for my app on mobile devices. How do I fix that?
How do I create a field that always shows today's date?
How do I show multiple dates on a calendar?
Is there a way to add a display rule to multiple columns at one time instead of having to update each column individually?
How can I show a customer's payment history if I'm collecting payments through my Knack app and through cash or check?
Can I combine two date fields into a single date field? For example, combining a start and end date into a single field?
Is it possible to display more than 100 records at a time on a table, list, or search view?
Is there a way to have new users be automatically logged-in after they register?
Do I need a separate user role object for my Vendors, Customers, Employees, Contacts, etc?
How do I create an "If, Then" or conditional equation?
Does Knack offer a service for building apps or have developers I can hire?
How can I set up my app so users see only their own data?
How do I bulk upload or import multiple images?
How do I bulk upload or import multiple files?
How do I merge my apps, or copy pages, objects, or other app elements between my apps?
Can I share or connect data between apps?
Can I?
Can I customize the look and feel of my Knack pages?
Can I migrate or transfer data from Zoho, Quickbase, or TrackVia?
Can I add Google Analytics to my Knack app?
Do you have a sandbox or developer environment?
Can I integrate Knack with other data, products, and services?
Can I have an app in a language besides English?
Can I use Knack on mobile devices?
Can I create invoices and accept payments?
Can I migrate my Access, Filemaker, SQL, or other databases?
Can I use a barcode or credit card scanner with Knack?
Can I prototype for others?
Can I send SMS or text messages using Knack?
Can I email PDFs or other attachments to users with Knack?
Can I add chat or messaging to my app?
Can I sell my Knack apps?
Other
Does the signature captured through a signature field constitute a legally binding signature?
How does Knack work on mobile devices? Is it mobile-friendly? Can users download my apps?
Storing sensitive data (credit cards, social security numbers, etc.)
How secure is Knack?
Will Knack sign an NDA (Non-Disclosure Agreement)?
Does Knack offer access to beta features?
Does Knack offer a partner program?
Is Knack GDPR compliant?
How do I batch download all of the images and files In my app?
Which browsers do you support?
Imports
Some of my fields aren't importing correctly. How can I fix that?
I'm having trouble importing into a connection field. What can I do?
I'm seeing an odd character when importing data. How can I get rid of it?
Can I import something other than data? Like objects, pages, views, etc?
My import is failing or getting stuck. What do I do?
Can my users import data from the live app, instead of going through the builder/back-end?
Can I schedule or automate imports?
Can I import data into more than one object at the same time?
Can I undo or reverse an import?
I am importing data for the first time. How do I do that?
How do I update existing data using an import?
My import is taking a long time. Can you take a look?
I'm having trouble importing into a specific type of field. What can I do?
I'm getting an error when importing. What do I do?
Do the validation rules on fields trigger when importing data?
How To Guides
Users & Logins
Save a User's Payment Method
Force Users to Reset Their Passwords
Create a Single Login Page for Multiple User Roles
Show Records Connected To The Logged-in User's Company Or Other Group
Create an Admin User Role to View All Records
Add Read-Only Access For Users
Show Records Connected to the Logged-in User
Add Functionality to Your Live App
Manage Your Records
Use an Edit Form to Create Records If They Don't Exist
Use Zapier to Insert Connected Records
Copy a Record Using Record Rules
Create a Version History for Records
Track When Records are Created and Updated
Track Which User Last Updated a Record
Workflow & Automations
Add Stages to Your App
Using Mailchimp
Add Status Indicators to Your App
Add Assignments to Your App
Notify a User That an Item is Ready for Review
Create a Registration Form with Limited Availability
Add a Pipeline to Your App
Create a Button or Link that Updates a Field to a Custom Value
Add Notification & Reminder Emails to Your App
Approve New Records Before Displaying Them
Store Multiple Images or Files for Individual Records
Use Multiple Image Sources for a Single Image Field
Workflow Tools
Work with Connected Records
How to Show Multiple Fields in Your Connection Drop-Down
Showing Parent-Child Records in the Live App
Logic, Equations & Formulas
How to Display Multiple Date Formats Using a Single Date Field
How To Number Line Items
Show Upcoming Birthdays
How to Set a Random ID
Display a Message When a Deadline is Approaching
Generate Simple Numeric Barcodes Automatically
Calculate Age in Years from a Birthday
How to Extract the Start and End Dates from a Date Field
Start an Auto Increment Field from Any Number
Customize Views
How to Add Inline Editing to a Table
Create a Print-Friendly Invoice Page
How to Click on an Image to Go to Another Page
How to Add Connection Links to Views
How to Add a Map to a Details View
How to Add Groupings to a Table
Reports, Queries, and Summaries
App Walkthroughs
Build a Quiz App
Build an Inventory Manager App
Build an Orders App
Build a Warehouse Manager App
Build a Member Directory
Build a Map Directory or Store Locator App
Forms
Create a Multi-Part Form
How to Change the Layout of Forms
How to Add Instructions to a Form
How to Customize the Text on a Submit Button
How to Limit an Uploaded File’s Size
How to Automatically Capture a User’s Location on a Form
How to Allow Users to Add New Options in Forms
How to Use URL Variables to Pre-Populate a Form
Add Read-Only Fields to a Form
How to Create Dynamic Dropdowns in Forms
Manage Your Account
Table of Contents
- All Categories
- Builder Guide
- App Customization
- Embed Your App
Embed Your App
Updated
by Danielle Kellogg
What is an Embedded App?
Knack apps can be embedded into external sites. So if you already have a website or would like to use a custom domain you can embed your app directly into an external website.
Embedding your app is done by generating a new embed code from your Builder. Then adding that embed code to your external website.
Manage Embed Codes
Embed codes are managed from the "Embed" section of your app Settings in the Builder.
Add Embed Codes
To add a new embed code, navigate to the "Settings" section of the Builder, then select the "Embed" option. Next click the "Add New Embed Code" button.
Next you will be prompted to give the embed code a name and select which page you want to embed:
- Embed Code Name: The embed code name is for reference in your app and is helpful if you are using multiple embed codes. This name is not publicly visible.
- Page to Embed: The page selected will be the initial page shown when viewing the embedded app on the external website.
After adding your embed code name and page click "save" to generate your embed code. Then you can copy your embed code to add to your external site.
Edit Embed Codes
Existing embed codes are listed on the Embed page in the app Settings. If you need to get an existing embed code, click the "< > get embed code" button. This will display the embed code so you can copy it.
You can also edit the embed code name and embedded page by clicking on the more icon (the "..." icon") and then on "Settings".
Delete Embed Codes
Existing embed codes can be deleted from the Embed page in the app Settings. To delete the embed code click on the more icon (the "..." icon") and then on "Delete".
Adding Embed Codes to External Websites
To embed your app into an external website, copy the embed code and paste into the HTML of your website or blog. This can be added directly to HTML or website CMS.
Add this script within the <body></body> tags of the website if you are adding it to the raw HTML. Add the script at the location where you would like the app to appear within the body.
If you are using a CMS (like Weebly or Squarespace) you will likely add embed code to a code module within the CMS.
Once your code is added to your site, any changes you make to your app will be automatically updated to your website. You don't have to re-add your embed code.
HTML Requirements
If your embedded app isn't displaying correctly, doesn't work well on a mobile device, or has issues with a specific browser, the following suggestions may help:
HTML Doc Type
Add the following doc type before the opening html tag:
<!DOCTYPE html public "-//w3c//dtd html 4.01//en" "https://www.w3.org/tr/html4/strict.dtd">
Mobile Meta Tag
Add the following meta tag in your document's HEAD section. This will ensure the app scales well for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=160, maximum-scale=1">
Encoding/Charset
Make sure your web server is setting a Content-Type of utf-8. If you do not have control over this, you can add the following meta tag in your document's HEAD section:
<meta charset="utf-8">
Remove Base Hrefs
This will prevent some links from opening properly, therefore it is not supported when embedding a Knack app.
CMS Considerations
If you use a CMS like Weebly or WordPress, please consult their documentation for more information on embedding Javascript code snippets.
The following are notes for embedding Knack apps into different CMS systems.
- Weebly: works great, no known issues
- Wordpress: works well, some potential with conflict with certain plugins. Note: only works with self-hosted WordPress sites, not sites run from wordpress.com.
- Joomla: works well, some conflict potential with certain plugins.
- Drupal: works well, some conflict potential with certain plugins.
- Squarespace: There have been issues with a handful of themes, be sure to test during your trial if you have a website established with a specific theme.
- Wix: works, but they use an iFrame to embed Javascript. This means that no styles from the Wix site transfers to the app and also means that the page's URL is not passed to the browser address bar.
- GoDaddy: does not appear to handle the Knack embed codes in a way that can successfully load the Knack app.
- Google Sites: does not handle Knack's relative URLs and the # included as a part of the URL. This causes links clicked within a Knack app not to load.
What if I don't have a website to embed into?
You can use a service like Neocities to host a simple webpage which you can embed your app into.
Notes & Troubleshooting
Embedding on a Local Host
If you are unable to get your app to work, it is important to note that embedded apps will only work on a live website. If you are running your site on a local host, your app will not work until your website is live.
Multiple Embed Codes
Currently, Knack only supports one embed code per HTML page. You can use a single embed code, then use the page menu to navigate to different pages from the single code.
Fonts Don’t Match
Your app should automatically take on the styling of your website. If you would like to override this you can use some custom CSS and the "!important" attribute to set your app to your choice of web safe fonts.
.kn-content { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif !important; }
You can available find web safe fonts here.
App Doesn't Fit Entirely in Page
If your app appears to not fit in the embedded area and parts of your app are cut off, this can often be the wrapping setting in the website you are embedding into. If you are able to add custom code to your website or have access to a web developer, this can be fixed if by adding some custom CSS using the "overflow" property.
When adding this code to your website, you will need to replace the "div" selector, with the appropriate selector to target where your app is embedded on your site.
div { overflow: scroll; }
You can read more about the overflow property here.
URLs in Browser Address Bar Don't Update
We've found in testing that Weebly will update the embedded URL in the browser address bar as you navigate through the Knack app. Wix and Squarespace do not do this; the URL in the browser address bar will display the URL where the embed code is inserted.
Loading on Squarespace
We have seen users have trouble loading embeds in a Squarespace site with Ajax loading enabled. You may need to work with Squarespace support to correct this.
Squarespace Links
There are some templates within Squarespace that have issues with what is known as the hash change event. If you're seeing your app load, but can't click some of the links then you've selected one of those lucky templates. We've included a code snippet that you can paste into the Builder's Javascript section which will address this issue.
// ---- This fixes the issue with some Squarespace templates ignoring clicks on some links ----
$(document).on('knack-page-render.any', function(event, page) {
if ($('html').hasClass('squarespace-damask')) {
$('.kn-content a').not('[href^="http"],[href^="https"],[href^="mailto:"]').each(function() { $(this).attr('href', function(index, value) { if (value && value.length > 0 && value.substr(0,1) !== "/") {
return (window.location.protocol + '//' + window.location.host + window.location.pathname + value); }}); }); } });
You can learn more about adding custom code, in our developer documentation.
Another difficulty that Squarespace has with hash links comes specifically with use on Internet Explorer. On IE, some templates will not register the hash links correctly and the link will redirect to the website's homepage. In this event, the following code snippet will address this problem.
$(document).on('knack-scene-render.any', function(){
$('base').remove();
});