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

Knack makes it easy to embed your live Knack app directly on your own website or blog.

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.

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.

  • Google Sites: does NOT work, they don't currently allow Javascript embeds.

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

Common Embed Issues

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

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.

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


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.

View Your Live App Using a Custom Domain

Custom domains are only used when you don't have a website but still want a custom domain to point directly to the app.

A custom domain is not specific to one app. You would be able to access any of your apps with that domain simply by including the app name after the custom domain in the URL.

Note: Custom Domains are NOT available to accounts in the trial period and are ONLY available on Pro plans and above.

Decide on a Domain

Before you request a custom domain, know what the domain is you are going to use. Keep in mind that some domains may not work.

1.) if you have an existing website at www.mydomain.com, you can't use that domain for Knack, or the website will no longer function.

2.) In almost all cases, you can't use a root domain such as mydomain.com by itself. DNS systems typically don't allow CNAME records for root domains. Instead you'll need to include a sub domain such as app.mydomain.com or members.mydomain.com and even www.mydomain.com is okay as long as you don't have an active website at www.mydomain.com.

Request a Custom Domain

You'll need to submit a formal request to enable a custom domain on your account. Once we've received the request and responded, you'll be able to proceed to the DNS change. This can take 24-48 hours.

Update your DNS Settings

It is important that you have received confirmation that your custom domain has been attached to your account before proceeding with this step.

The final step is to change or add a DNS CNAME record for your domain. You'll need to have access or know who has access, to make DNS changes for your domain. The CNAME record should point to customdomains.knack.com. It also is helpful to be knowledgeable about DNS.

Please allow a few hours for propagation to occur.

Setting up the CNAME

  1. Login to your hosting provider and edit the DNS settings for the domain you’ll be configuring to work with Knack.
  2. Create a new CNAME record with the Host value set to what you’d like to use for your subdomain. For example, if you want your Knack App to be accessed via portal.domain.com you would enter ‘portal’ as the Host value
  3. Point the record to our subdomain: customdomains.knack.com.
  4. Save your handywork.

Knack Tip: These exact instructions may differ among hosting providers. Below is an example of what this would look like:

Add_DNS_REcord.png

  • Host Record: This is the domain or subdomain you wish to use.
  • Points to: This is the destination server that the domain or subdomain is sending the traffic to.
  • TTL: The 'time to live' value indicates the amount of time the record is cached by a DNS Server, such as your Internet service provider. The default (and lowest accepted) value is 14400 seconds (4 hours). You generally do not need to modify this value.

SSL Certificates

When using a custom domain, we do not support using your own SSL certificate. While all the data being transmitted is still encrypted by Knack, the URL shown in the end-user's browser won't show https. It will also show up in Chrome as "Not Secure" or in Firefox as "This connection is not secure." since there isn't a SSL certificate being used for your domain. If you require a custom SSL, you'll want to look at embedding your app into a site where you can install your secure certificate.

As we cannot support using your own SSL Certificate, the Secure Browser Live App Security Setting cannot be used with custom domains.

Include App Name in URL

We are able to pre-set what account goes with your domain, but there isn't a way to automatically default an app. This means you'll need to include the app name in the URL for anybody to access it. Without the app name, you'll see a login for the builder.

Related articles