5️⃣ ITONICS Sites (Professional Plan) 

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

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

Navigate to the Sites Overview

1. Enter workspace settings
2. Go to Sites tab

Sites in the Workspace Settings

Actions in the settings tab

Action		Description
Enter Site Configuration		Click on the title to enter a Sites configuration
Sort	1	Sort by Creation date Last published Name Order Ascending Descending
Preview	2	Preview how a Site looks like
Duplicate	2	Duplicate Site with all its components
Delete	2	Delete Site (with confirmation window), this will hard delete a Site and all of its components except created properties and elements.
Create	3	Create new Site Select a template Form Includes Form page template Thank You page template Campaign Includes Form page template Home page template (visually appealing setup) Thank You page template Blank Includes Blank page

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 the table, for reference.

Action		Description
Pages	1	All pages of the Site
Settings	2	Settings General Change Site Name Custom URL (URL = Domain + Slug) Domain Choose a domain Slug Choose a Slug (what appears after the domain) Preview Preview & copy the URL
Site settings	3	Site settings Rename Change Site name Duplicate Duplicates and opens duplicated Site as “Copy of [Site name]” Delete Deletes the Site entirely, with confirmation window
Visibility	4	Draft Default after Site creation Published Site is accessible via the URL to certain users Unpublished Changes Site is accessible, but has unpublished changes
Synced	5	Indicates whether changes on the Site are up to date with the cloud
Manage access	6, 10	Manage who can access the published Site Invite users to the site People with access List of users with access General access Private Only invited users Workspace members This workspaces’ members and invited users No “public access” option yet (coming soon) Copy link Copy link of home-page Note: only users with access
Preview	7	In a new tab, preview how to page will look like to the end user, this will always display the "home-page”
Publish	8, 11	Configure how to publish the Site Preview page URL Set unpublish date Options: Never, In an hour, In a day, In a week, Choose Date
Preview / Code	9	Main work area Preview Preview how this page will look to the end user Code Coding window, enter HTML for the page
Page settings	12	Page Settings Page name Change name for the page Page slug Change the slug for this page (part after domain, “page identifier”)

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. 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.
      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 any technical knowledge, feel free to include detailed information.
   2. Required Keywords: Include these keywords in your prompt, otherwise it will not work.
      1. HTML — to ensure the result will be HTML code
      2. Tailwind — 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.
2. Create your prompt
   1. Combine all the above into a single prompt, this can look something like this:
      

      Create a landing page for an Innovation Campaign at [company_name], think of their identity, they want to collect ideas that have the potential to enhance company processes and anything else that is beneficial to them. Include a button to submit ideas. Use HTML and Tailwind to make the site look good and professional. Include any animated <style> elements in the body, not the head.

Copy & Paste Into Editor

Important details, otherwise it won’t work.

HTML Structure

Having a basic understanding of HTML greatly helps with understanding the process of creating a layout page in the ITONICS code editor.
HTML files are always structured the same, in containers.

1. DOCTYPE tag
2. HTML beginning tag
   1. HEAD beginning tag
      1. HEAD section
   2. HEAD ending tag
   3. BODY beginning tag
      1. BODY section
   4. BODY ending tag
3. HTML ending tag

Editing the Generated Code

We only need the BODY container and we have to rename the tag-name to div, that means we have to do a couple of changes to our code before it will display properly.

The steps are in order of where you will find the elements in the code, starting from the very top:

1. Remove <!DOCTYPE html> tag
2. Remove <html …> tag
3. Remove <head> … </head> section including the tags
   Note: don’t get it confused with <header> … </header>, this one is fine.
4. Replace <body …> with <div …>
5. Replace </body> with </div>
6. Remove </html>

Now the first word in the editor should be <div> or <div …> and the last word should be </div> or </div …>.

Editing in the Preview

Editing in the preview [1] is sometimes easier than going through the code and finding the exact container to edit.
Simply click on an element of the page [2] and change its properties on the right [3].

Editing the Code

The Code can be edited like any other HTML file. Just keep the restrictions of the code editor in mind.

Anything other than regular HTML with Tailwind could cause issues.

Page Setup — Form

Forms are the connection to the ITONICS ecosystem, use them to submit and create elements in the system.

All elements created with a Site form will have that Site as their “Site source” property value, this will be changeable in “External Sites V2” (soon).

Create a Form Page

Follow the steps below to create, configure, and implement a form-page into a layout-page, to make them accessible.

1. Go to Pages
2. Press the blue “+”
3. Select Form
4. Enter a name
5. Press enter, you will be redirected to the form configuration

Form Configuration

Select an element type existent within the workspace, all properties from all element types are available for you to include in the configuration of the form, make sure to use the ones that are tied to the element type you are creating. to automatically display them in the element details tab.

Creating new properties in the Form is also possible, but they have to be added to the details in the Element Configuration of that element type after.

To learn all about the form configuration, follow the steps below.

1. Choose an element type
   If none fits, create a new one in the Element Configuration.
   The form will be preconfigured with all must-have properties.
2. Configure the form
   The configured form can look something like this
   1. 
   2. Save changes
3. Press on the cog in the top left next to the Form name to rename the slug or the page if needed.
4. Form settings
   There are several settings for a Form page to specify confirmation behaviour, what happens with created elements etc.
   1. 
   2. Explanation, see table below
5. Link the form in a Layout-Page
   To make the Form accessible, it has to be included in a hyperlink on a Layout-Page.
   1. Go to any Layout-Page
   2. In the preview window, click on any hyperlink container
   3. On the right side settings, it should say “Link settings” in the top, there, set the Target to Page and choose your Form-Page.

Form settings

	Name	Description
1	Element Status	Set the status of the newly created element
2	Assign to	The assigned user will be the creator of the element. If no user is assigned, the element will be created by the current user if logged in, or by Anonymous if not logged in.
3	Show terms and conditions	Display terms and conditions that users must accept before submitting
4	Show CAPTCHA	Add CAPTCHA verification to prevent spam submissions
5	After form submission	Specify confirmation behaviour Redirect to another Page Redirect to external Page
6	Notifications	Select users to notify after each form submission

Your Form Page is now set up and ready to be used!

Publishing

The last step is to publish the Site and make it available to all users in the workspace.

1. Press Publish in the top right corner
2. Keep or change URL of the Site
3. Set unpublish date, choose from:
   Never, In an hour, In a day, In a week, or select custom date
4. Press Publish again
5. Manage access
   Make sure the right users have access
   1. Add specific users
   2. Configure general access
      1. Workspace Members
      2. Private
         Only invited users have access

Congratulations, you now published your Site, it is ready to be accessed via the link and all submitted elements will appear in the workspace!