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

5️⃣ ITONICS Sites — Open Innovation Made Easy 

ITONICS Sites are the key to achieving productive ideation. Build forms, campaigns, or full HTML sites directly within ITONICS.

This documentation will guide you through the process of setting up, configuring, and publishing your ITONICS Sites, ensuring you can harness their full potential for productive ideation and innovation.

  1. General Information
  2. Sites — Overview
    1. Site — Creation
    2. Site — Configuration, Creating & Editing
  3. Page — Overview
    1. Page Creation
    2. Layout-Page — Setup, Creating & Editing
    3. Form-Page — Setup, Creating & Editing
  4. Publishing & Managing Access

With ITONICS Sites, you can:

  1. Create engaging forms
    Easily design and deploy forms to gather specific information, whether for internal surveys or external data collection.
  2. Develop effective campaigns
    Launch targeted campaigns to foster ideation, encourage participation, and drive innovation across your teams.
  3. Build custom HTML sites
    Leverage the power of HTML to create fully customized sites that align with your branding and specific project requirements.

Create customized campaigns, landing pages for your innovation endeavours, and everything else you can think of. 

Sites — Overview

Note that any changes done to parts of a Site, be it to a layout page or a form page, will stay in a draft mode until published.

Saving edits will not push them to the live environment.

Get an overview of all Sites associated with this workspace and create new Sites.

General Sites structure

  • Sites can be Draft (default), Published, or Unpublished changes
  • Sites have Pages attached to them
    • Pages are either regular HTML Pages or Form Pages
      • Form Pages have element types attached, inherit their properties and always create elements. Created elements have Site source attached, “Site source” property
      • Layout Pages are regular HTML with optional inline css (via Tailwind) 

Navigate to the Sites Overview

  1. On the left side menu, press on More Tools
  2. Press on Sites
    1. It is also possible to pin items of the More Tools section to the menu bar by pressing the pin icon next to them, note that this pin is per user, items are not pinned globally.

Note that this settings-page is only available to users with Admin permissions.

Sites overview tab

Actions in the overview tab

Site Creation

This section explains how to create an ITONICS Site.

Creating the Site

  1. Click Create Site
  2. Select a template
  3. Enter a Site title

Site Configuration

This section explains the configuration options for Sites and Pages.

Site Configuration — Overview

Upon creation, you will land on a page that looks like this.

Actions in the Site configuration

There are several actions possible in this window, learn which ones below. Also, see the picture below, for reference.

Image of Sites configuration window

Page

ITONICS Page is the webpage the end-user will see when accessing the Site.

There are two types of Pages:

  1. Layout-Page
    The layout page is fully customizable with HTML, and Tailwind and can be used as a landing page and for whatever else that is needed. They can be dynamically changed and cross-referenced in other ITONICS Pages. Use them to setup the entire campaign page.
  2. Form-Page
    The form page, as the name indicates, is used to submit elements into the ITONICS Innovation OS, select an element type and submit any element you want.
    The form-page can be configured exactly like a processes form.
    Configure all properties necessary for the element, save, and any element submitted will appear in your Innovation OS.

This section explains how to create a Page, what to keep in mind, best-practices and an example.

Page Creation — Layout

Setup the HTML for the landing page, home page, contact page, privacy, and whatever else is needed for your use case. Follow the steps below to learn how.

After creating a Site, the next step is to add Pages to it.

  1. Go to Pages
  2. Press “+” next to “search pages”
  3. Select Layout
  4. Name the Page
  5. Press enter
    1. New Page will be created
    2. It will open in the editor window in the middle

Setting Options for Pages

A new page has a set of options that can be performed on the page.

Change its name or slug via the Page settings cog-icon and hidden behind the 3-dots button, perform:

  1. Mark as home
    Sets the redirect for the Site URL to this Homepage
    Only one Page can be set as home
  2. Hide page
    Important for already published Sites, hidden pages cannot be accessed outside of the editor.
  3. Rename
    Change name of the page
  4. Duplicate
    Creates an exact copy of the page

Page Setup — Layout

This section explains how to generate HTML code for the Layout Pages, how to integrate that into the Page, what else to keep in mind, and best-practices.

Prompt engineering

In the age of LLMs, creating HTML code is as easy as engineering the right prompt and copy-pasting it into the ITONICS code editor.

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 or not 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