By default, Sleekplan appears as a toggleable widget on your site. If you prefer a full-page experience—inside an iframe on your website or in a WebView within your mobile app—you can use our dedicated embed endpoint. Follow the steps below to set it up and tailor the view to your use case.
Steps to implement Sleekplan as an iframe
Get your Product ID
In your Admin dashboard, go to Settings > General , copy your product id.
2. Paste the product id into the main embed URL which is going to be used in the <iframe> or WebView :
https://embed-{PRODUCT_ID}.sleekplan.app/This would be an example of an embed URL with the product id already on it:
3. Place the iframe element in your HTML code with the URL above as a src attribute or in your WebView code in your app :
<iframe src="https://embed-177308079.sleekplan.app"></iframe>
webView.loadUrl("https://embed-177308079.sleekplan.app" width="50%");Some Additional Settings
👉You can link straight to a specific page in your iframe by appending a hash route (/#/pagename) to the URL.
Common routes:
Home/Board: #/
Changelog: #/changelog/
Roadmap: #/roadmap/
Feedback (board): #/feedback/
<iframe src=""https://embed-177308079.sleekplan.app/#/changelog/"></iframe>
👉 Enable full desktop layout (optional)
<iframe src="https://embed-177308079.sleekplan.app/?full=true#/"> </iframe>
👉 Choose a list style to display your roadmap
<iframe src="https://embed-177308079.sleekplan.app/roadmap_style=kanban#/roadmap/" ></iframe>
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 |