You can access the navigation settings by clicking the Navigation button under the Companion Forums Site module in your Tightknit app home.

Within the Navigation Items settings modal, you can configure the up to 3 custom navigation items that will appear in the navigation sidebar of the companion site. Each item can either be an external link or an internal link to an embedded page.

Each navigation item configuration must be input on a separate line. For example:

Terms of Service | https://tightknit.ai/legal/terms-of-service | terms-of-service
Knowledge Base | https://example.com
Download the App | https://example.com

Navigation Items Modal

An external link is a simple URL that will be opened in a new tab when the navigation item is clicked. The navigation item configuration must follow the format: Name | URL.

For example, the following configuration will create a navigation item with the label “Knowledge Base” that will open the URL “https://example.com” in a new tab when clicked:

Knowledge Base | https://example.com

​
Internal Link (Embedded Page)

Internal embeds an advanced feature. In order to allow certain domains within the iframe for the page to function properly, you may need to configure certain site security protocols.

An internal link points to an embedded page within the companion site. The navigation item configuration must follow the format: Name | URL | slug. When an internal link is configured, the the embedded page is added to the companion site at the URL: https://<your-site>/p/<slug>.

For example, the following configuration will create a navigation item with the label “Terms of Service” that will open the embedded page at the URL: https://<your-site>/p/terms-of-service. This page will contain an embedded iframe with the contents of the URL https://example.com.

Terms of Service | https://example.com | terms-of-service

Embedded pages are useful for displaying content from external sources within your companion site. For example, you can embed your community’s calendar or other content from external sources. For best practices, make sure the embedded URL is the same domain as the companion site (see Site Details).

​
Content Security Policy

The URLs for internal embeds must meet certain criteria before they can be successfully emdedded in an iframe.

1

The Target URL Must Allow Itself to be Embedded

First, the target URL must allow itself to be embedded by the companion site’s domain. This accomplished by a combination of the X-Frame-Options header and/or the frame-ancestors directive in the Content-Security-Policy header. For modern browsers, it is recommended to use the Content-Security-Policy and include the companion site domain in frame-ancestors directive.

For example, you could configure your third-party site to use the following Content-Security-Policy header to allow it to be embedded within the companion site:

Content-Security-Policy: frame-ancestors 'self' https://my-site.tighktnit.community

Check with your site administrator to see which security settings are appropriate for your case.

2

The Domains Within the Embedded Page Must be Allowlisted

Second, you must register the domain(s) of any resource that could appear within the embedded experience. For example: if you have links to pages that could take the user to another domain, images that are hosted on another domain, etc., these domains must be registered with Tightknit in the Additional Allowed iframe Sources, or else they will fail to load within the iframe.

The Additional Allowed iframe Sources will be used in the frame-src directive of the Content-Security-Policy header on the companion site. The value must be a space-separated list of domains. Tightknit automatically includes 'self' and the domain of the navigation item URL.

You may use a wildcard within a domain (e.g. https://*.my-site.com) or by itself * to allow all domains.

Using the * wildcard to allow all domains should be used with caution. This may lead to security vulnerabilities if not properly configured.

Was this page helpful?