Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

1️⃣2️⃣ Pages — Guide users on their innovation endeavours

Create fully tailored workspace views using HTML for user guidance.

Configurable Pages allow creating custom pages using HTML and use them as entry points within a workspace. Pages behave like standard views and can be placed anywhere in the workspace navigation. When positioned at the top of the navigation, a Page automatically becomes the workspace landing page, providing users with immediate orientation and guidance upon login.

To access the ITONICS Pages, navigate to the main navigation menu on the left side. Here, you will find all the already existing Page views that you have created or that are publicly available. Click on any Page view to access it. You can also create a new Page view from here.

Create a Page

Set up a new page view: 

  • Click on the + icon next to workspace views in the side navigation [1]

  • Choose "Page" [2]

  • Enter a Page name and allocate a Folder (optional) [3]

  • Make the page public or private [4]

  • Press Create

Create_page

Edit a Page

When you want to change a page view, find the “Edit” Option at the top right of the page . Clicking on it opens a code editor with preview option. 

Code Tab

Use HTML to build your full customized landing page. Use your own coding skills or any vibe coding tool of your choice. 

To generate HTML code that can be copy-pasted into the Page editor, follow these steps.

  1. Use case: Think of the exact scenario that you want to cover with this page.
    1. LLMs will consider every part of your prompt, therefore be as accurate as possible.
    2. Personalize — include the company's name, the goal of its innovation endeavours and if you have access to your companies style-guide, and you are allowed to upload it to an LLM, upload that pdf too (this will ensure exceptional design results).
    3. Required buttons — Include whether the page should have a button to submit information (a link to a form page) and other UI elements.
    4. [Optional] If you have technical knowledge, feel free to include detailed information.
  2. Required keywords, keyphrases and best-practices: Include these keywords in your prompt, otherwise it will not work.
    1. Use HTML
      To ensure the result will be HTML code.
    2. Use only Tailwind styling, any other styling will be removed by the code editor
      To ensure the result will be of high quality and will be able to be displayed properly.
      Tailwind CSS is a utility-first CSS framework, it is responsible for making the pages appear pretty, without this, all Pages will look dull and lame.
    3. Attach your company-specific style guide
      Most LLMs nowadays allow you to upload attachments. Use this to attach your company-specific style guide (Warning: check first if your companies regulations allow for this, as some companies might prohibit this), this will greatly improve design and align it with the rest of your online presence.
    4. Template to paste into every prompt
      1. Create HTML code to paste into an online code editor, this code editor has strict guidelines that you have to follow, these are: only ever use regular html with inline tailwind, if state management is needed, use CSS-only Tailwind group variants, do not include a , replace tags with
        , do not ever use