Articles in this section

Viewing and Embedding

Avatar
Odalis
Updated
Follow

 

Once you've built your pages, you are now ready to view and/or embed your Live App.

View Your Live App

To view your Live App, hover over the eye icon in the top right of your Builder and select a start page from the drop-down menu. This will open your app in a new window or browser tab.

The URL that appears in your browser is the one that your users will need to access your Live App. If your Live App has multiple user roles, make sure you’re sharing the right start page with the proper permissions. Otherwise, your users will get an error telling them they don’t have permission to view the page.

Knack Tip: Want to have a single start page for all user roles? Click here to learn how.

Notes:

  • As you save changes in your Builder make sure you refresh any live app windows you have open to load those changes.

  • Clicking view links may load the app in the same browser or tab instead of new ones.

Embed Your App

If you already have a website or would like to use a custom domain you can embed your app into an external website.

When you embed a page of your Knack app, only the page itself is embedded. The header and page menu is not included in the embed code. 

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

First click on the gear icon in the top left corner of your Builder (next to the app's name), then click the Embed option.

Click the Add Embed Code button to open a new window. Give the embed code a name (useful if you will be embedding more than once). Then, if you have more than one start page, you can select which you want to embed.

After your settings are saved you can copy the generated code:

Any existing embed codes will be listed on the Embed page. Click on the "Embed Code" to get the code:

This is a snippet of code you'll need to copy and paste into the HTML of your website or blog.

Add this script to the BODY section 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.

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-publish anything.

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. 

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

2019-08-27_16-50-15.png

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

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, so no styles or design from the Wix site transfers to the app.

  • GoDaddy: does not appear to handle the Knack embed codes in a way that can successfully load the Knack app.

We often recommend Weebly for an easy and free option that works well for hosting Knack apps.

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 1 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: https://www.cssfontstack.com/

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: https://www.w3schools.com/cssref/pr_pos_overflow.asp.

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.

1 2 3 4 5 6 7 // ---- 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 Customization with CSS article.

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.

1
2
3		 $(document).on('knack-scene-render.any', function(){
$('base').remove();
});

 

 

Related articles