Iframe

By default, the Sleekplan widget is embedded on your website, as a widget that can be opened and closed. However, if you would like to be able to embed Sleekplan in an iframe or in a webview (e.g. via your mobile app), this article may help you.

Sleekplan provides a simple way to build links that allows you to include Sleekplan using an Iframe like the example from our changelog below.

Here's how to proceed:

• Go to: https://app.sleekplan.com (opens new window)
• Go to settings → widget (opens new window)
• Your product ID can be found in the Sleekplan widget snippet <script type="text/javascript">window.$sleek=[];window.SLEEK_PRODUCT_ID={PRODUCT_ID}; (we'll call it SLEEK_PRODUCT_ID there)

Your URL will take the following form (replace with your {PRODUCT_ID}):

https://embed-{PRODUCT_ID}.sleekplan.app/

Navgiating

You may want to display a specific page straight away. This can be done by appending /#/pagename. For example, to load the changelog you would use the following format:

<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app__/#/changelog/__"></iframe>

Settings

The table blow outlines parameters for customizing a board display. It includes options such as toggling a desktop-ready view, selecting a roadmap style, and hiding specific UI elements. Each parameter is described along with its default setting and available options for customization.

Parameter	Description	Default	Options
full	Indicates whether to display a desktop-ready version of the board	false	true, false
roadmap_style	Defines the style of the roadmap	list	list, kanban
hide_elements	Allows hiding specific UI elements, useful for managing them outside of the iframe	-	filter, navigation, footer

Examples:

For a basic full desktop embed:

<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?full=true#/"></iframe>

Embed with a specific roadmap style:

<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?roadmap_style=kanban#/roadmap/"></iframe>

Embed with hidden UI elements (as an array):

<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?hide_elements[]=filter&hide_elements[]=navigation&hide_elements[]=footer#/feedback/"></iframe>