Embedding Contents On a Website You Own

How to embed a content into any website you can modify the HTML for.

There are three ways you can embed content into a website. All of them are available via the share icon on the left sidebar, under the Website section.

Using a Publishable Key

This method does not support persistent code, but is the easiest form of embed. You can copy and paste this code into any website.

This embed type may only be used for testing purposes. For production usage, authenticated embeds are required.

Using an Access Token

This method is recommended as it supports persistent code and allows you to generate a secure access token using your secret key and a content identifier.

The general process for this embed is as follows:

  1. Obtain your secret key from your organization page.

  2. Using your secret key and content identifier, submit a POST request to the access tokens endpoint, as described here.

  3. Render an iframe using the returned access token by replacing ACCESS_TOKEN in the following HTML:

<iframe src="https://api.next.tech/api/v1/access_token/ACCESS_TOKEN" frameBorder="0" marginHeight="0" marginWidth="0" height="768px" width="100%" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>

Embed Options

Two embed options can be used to configure the embed code. These options do not persist for the content.

Embed View

If enabled, the left navigation is hidden. This prevents the user from being able to navigate to different sidebars in their project, change their settings, and so forth.

Toggling this option results in a more seamless embed experience when displaying the project alongside existing interface elements in your website.

When this option is not set, a project will look like this:

When set, it will look like this:

Note the lack of the left sidebar.

Overlay View

When embedding multiple contents into a single page, the overlay option should be used. This prevents all embeds from launching when the page loads, which leads to increased costs.

When enabled, the user will first be shown an overlay like the following:

Upon clicking the Launch button, the project will render like normal. The text and button text can be configured for your account.