Table of Contents

Embed Your App

Danielle Kellogg Updated by Danielle Kellogg

What is an Embedded App?

Knack apps can be embedded into external sites. So if you already have a website 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.

Only the page is embedded. The header, which includes your app name or logo, is not included in the embed code. 

Manage Embed Codes

Embed codes are managed from the "Embed" section of your app Settings in the Builder.

Add Embed Codes

Knack's embed code uses Javascript, <script type="text/javascript", so be sure the site you're embedding into supports Javascript.

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".

Deleting an embed code will prevent the embedded app from working wherever that unique embed code was used.

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.
We often recommend Weebly for an easy and free option that works well for hosting Knack apps.

What if I don't have a website to embed into?

Hosting

You can use a service like Neocities to host a simple webpage which you can embed your app into. 

If you wish to embed the full app (including the Header) you will need to copy/paste the HTML by grabbing viewing the page source in the browser.

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.

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();
});

How did we do?

Embedded Login Security Settings

Integrate with Integromat

Contact