1. ITONICS Help Center
  2. Doing Ideation and Open Innovation with ITONICS
  3. Open Innovation: Configuring and running external ideation processes

Configuring the Gateway for receiving external submissions

Updated

What is it?

The External Gateway enables you to build a bridge between your application (where access is only given to authorized individuals) and a public community (individuals with no access to your system). Via this bridge, you allow such a public community to, for instance, submit an idea or feedback. They just need a URL to access the gateway - for instance, the gateway can be placed on a public website.

In fact, submissions via the external gateway will create a new content element in your system. You can then process this content element further within your application and along a specific workflow. This is highly relevant for allowing external partners (e.g., start-ups/universities/the crowd) to submit their proposals and ideas for collaboration. 

bosch gateway.png

How does it work?

Please note: This feature needs to be activated by ITONICS. Please contact your Customer Success Manager or Account Manager for further assistance.

Activating and accessing the gateway configuration page

For using the External Gateway, please navigate to the Settings Wheel > Entity Configuration > Entity Configuration and open the entity for which you want to configure it by clicking the Edit (pen) icon.

external_gateway_1.png

Look for the External Gateway card (1) under the Modules/Features section and check the box on the left corner of the module card. When the checkbox is marked the card should change the layout color from light gray to the system color. Don't forget to press the Save button (2) at the bottom of the page.

external_gateway_2.png

After enabling the module you can configure it according to your preferences. Go again into the edit mode for the respective entity and find the Manage External Gateway menu (1). 

Click the Add new Gateway button (2) in order to create a new external gateway. You can configure as many external gateways as you want for each entity. All existing gateways are listed in the table below the button (3). In the table, you see four columns: 

  • Name of the External Gateway
  • URL through which the External Gateway is accessible
  • Fields that are used in the Gateway 
  • Action icons to Edit (pen) and Delete (bin).

To edit an existing External Gateway, click the Edit icon (4).

 

external_gateway_4.png

Configuring an external gateway

After opening the create or edit mask, you will be able to:

  • Define the Gateway Name. The name will be shown as the title on the input form and is used as an identifier in the ITONICS system. (1)
  • Define the Gateway URL. Choose your desired path, e.g. https://innovation-os.demo.itonicsit.de/startup. If you want to use a page with your application's URL, the page will be automatically created. You can then share this link with your audience. (2)
  • Define Automated mapped fields. If you want to set default values, select a field from the Field Name list. Next, select the desired value from the Field Values list. You can define multiple field mappings by clicking Add more fields button and repeating the previously described field and field value selection. If you want to remove a field mapping, click the x on the right-hand side of each field mapping. (3)
  • Define Related Elements. Type in the title of related Elements or double-click in the search field to get suggestions. You can add multiple Elements. Check out the article on Related Elements for more information. (4)

external_gateway_5.png

 

When configuring the external gateway for campaigns, you can select which campaign the submission should be assigned to. The submission then follows the workflow of the assigned campaign.
Screenshot 2024-07-01 at 15.32.21.png

Subsequently, after the submission of the external idea, the mandatory gateway fields (Firstname, Lastname, and Email, basically the External Submitter’s information) are automatically added and displayed per external submission on the detail page.

Screenshot 2025-07-02 at 16.33.58.png

Note that for a particular campaign element that was previously assigned to an external gateway configuration but then later on removed, the External Submitter information (the mandatory gateway fields) will no longer be displayed on the submission detail page, unless the underlying campaign element is again reassigned to an external gateway configuration. This is a known limitation.

Further, in the case of the campaigns module, if an idea has been submitted via an external gateway to a campaign, the Campaign Managers can decide whether to inform the External Submitter of the particular idea element about a phase change, respectively the idea progressing through the ideation funnel. To do so, on the Campaign Management tab, when dragging and dropping the particular submission element to a next phase, in the Move To Next Phase popup modal, check the option to notify the External Submitter of the selected external submissions. If checked, a mail notification will be sent to the External Submitter informing about her/his idea progressing.

Screenshot 2025-07-02 at 16.44.42.png

If the external gateway is configured for an entity type that is also the child entity type within a parent-child setup, it is possible to pre-define an existing parent element to which all incoming child element submissions shall be related to automatically. This is convenient for cases in which all incoming submissions have a clear assignment to a particular parent element, to prevent the effort of having to manually add the parent relation afterward through the element edit form. Note that this configuration is optional, and if no parent element is pre-configured, the external submissions will still be sent to the system.

Screenshot 2024-07-01 at 15.23.51.png

Furthermore, you can define the following Additional Options:

  • Define the Status of the content element after entering your application.
    The status can either be     Published or Draft. (1)
  • Define Redirect Link. The Proposal Submitter will be redirected to the defined URL after his/her submission. The URL must start with http:// or https://. (2)
  • Activate Captcha. Define whether a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) must be solved before saving a new Element or not. (3)
  • Show Terms & Conditions. Define if privacy and policy documents should be activated. If Yes is selected, define which of the existing documents should be shown in the form and must be accepted in order to save a new Element. (4)
  • Confirmation Mail. Define if an email will be sent to the submitter. If Yes is selected, define which of the existing email templates should be sent. Select one from the E-Mail Template dropdown field. You can also configure your own messages. (5)
  • Notify Gateway Responsible/s. Define if an email will be sent to the responsible/s for the Gateway. If Yes is selected, define which of the available e-mail templates should be used. Select one from the E-Mail Template dropdown field. You can also configure your own messages. (6)
  • Define Page Headline. The headline is shown on the input-form, below the title and could serve as a guide for the user; for example, Submit your Startup application. (7)
  • Please note: Next to the page headline, fields for the first name, last name, and email are set. To receive any submissions, do not take them out of the gateway form configuration

external_gateway_6.png

 

Customizing the Gateway layout

At first, you have the option to configure which fields should be shown to the external submitter. This is similar to defining the create/edit or view configuration. Drag and drop the available field to the main section according to your preferences. To align a field horizontally, drag the field itself, or drag two fields next to each other. Use the drag icon on the left side of each field to change its vertical position.

Click on the Edit icon (pen) of your external gateway and select the tab: form configuration next to the general settings. 

You can configure which fields will be shown in the External Gateway form, i.e., which information you want to retrieve from the user.

Please note: To receive any external submission via the gateway, the following fields need to be present in the submission form and should not be removed from the form configuration: 

  • First Name
  • Last Name
  • Email Adress

The fields will be automatically created when a gateway is added. You will also find these fields in the field manager of the entity. Based on these fields, follow-up communication with the external submitters is possible and can be sent out directly from the system, same behavior as outlined above for the campaign case.

Note that these external gateway fields can be exported via the xlsx export from the respective element’s detail page and/or Explorer bulk exports. However, note that in the case of external submission of a campaign, the mandatory gateway fields are not included in the Explorer bulk export, but only the bulk submission export from a particular campaign’s submission tab and/or an individual submission’s detail page.

The gateway form configuration can thus be different from how your system users are asked to submit content, although both content intakes are of the same entity. This means you can configure different content intake forms for your external gateways and one for the creation within your ITONICS system.

However, please note that you cannot use the following field types in the external gateway:

  1. User Search Fields
  2. Location Search Fields
  3. Group Fields
    Note that a field will be automatically removed from the External Gateway form if it is configured within a group field in the application.

You can also work with different tabs, and place the fields under different tabs. To do so, hit the tab "+Add tab" above the form configuration. By using drag and drop, you can add fields from the right-side menu to your form. Only fields placed in the left drag zone will be displayed. 

 

Please note that users who are already logged in (especially SSO users) can view the External Gateway Page only in the incognito mode. 

 

Secondly, you can utilize custom CSS styles to adjust the default style of the external gateway form. In the following, a step-by-step guide is provided showing exemplary adjustments that can be made to the standard external gateway form to match your needs.

To apply custom CSS styles, you need to use the Code Editor [8] available at the bottom of the General Settings tab within the manage external gateway page of an entity.

external_gateway_7.png

When ready, click the Save button. [9]

Once you add your custom CSS code in the editor, it will override the default template styles. You can then customize the layout and appearance according to your design requirements.

Note: Make sure that you place at least the token for the gateway-form in the code editor. By the token [gateway:form], the form - as configured under the tab form configuration - will be displayed on your gateway page. The token [gateway:headline] will add a headline above the form on the gateway page and will display the text that was added to the field page headline. 

Thus, by default, when you add these two tokens, you are working with a blank template that has no predefined styling. This gives you full flexibility to design and style the elements (titles, form, background, buttons, etc.) as needed using custom CSS.

(1) Using a Custom Font Family
By default, the system uses the Source Sans Pro font. However, if you prefer to use a different font, you can load a custom font from a reliable source such as Google Fonts.
Be aware: Using a custom font is possible but not recommended unless necessary, as it may affect performance and consistency across templates. Thus, ITONICS recommends using the default Source Sans Pro font type!

Step 1 - Load the Font:

Include the following <link> tags at the top of your HTML (inside the Code Editor) to load the desired font. Example:

<style>  
/* css styling here */
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&
display=swap" rel="stylesheet">
</style>

Step 2 - Apply the Font in CSS:

body {
   font-family: "Roboto", sans-serif;
   line-height: 1.6;
}

You can also apply the font selectively to headings, form elements, or buttons:

h1, h2, input, button {
  font-family: 'Inter', sans-serif;
}

(2) Removing or changing the default login background

Per default, the background image will match the background of the login page.

<style>
/* css styling here */
body {
  background: none !important;
}
</style>

Alternatively, you can change the background image as well. Note that no private images from the system can be used in the external gateway form (since a page without login access / authentication), but instead use a publicly accessible image URL from a reliable source (e.g., Imgur or a trusted CDN), or use a simple background color if an elaborated image is not required.

Example:

<style>
/* css styling here */
body{
    background: url('https://imgur.com/GrEE5s9.jpeg') center center no-repeat
!important;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}
</style>

<style>
/* css styling here */
body {
  background: #c0c0c0!important;
}
</style>

(3) Adding a background image with an overlay

To apply a full-screen background image with a soft blur and transparent overlay, you can for example use the following CSS style:

<style>
/* css styling here */
body {
   background: url('https://imgur.com/GrEE5s9.jpeg') center center no-repeat !important;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  z-index: 0;
}
body::before {
  content: " ";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  z-index: -1;
}
</style>

(4) Centering the title and form layout

To center the form title and align the form nicely on the page, wrap your content with the following HTML structure and apply the associated CSS styles:

<div class="external-wrapper">
  <h1> [gateway:headline] </h1>
  <div class="getway-form-wrapper">
    [gateway:form]
  </div>
</div>
.external-wrapper {
  position: relative;
}
.external-wrapper h1:not(.title) {
  text-align: center;
  color: #fff;
  padding: 25px 0;
  font-size: 2em;
  position: relative;
}
.getway-form-wrapper {
  max-width: 1175px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.96);
  padding: 25px 35px;
  border-radius: 18px;
}
.tabbed_content{
background:transparent;
}

The .getway-form-wrapper class is used to style the form container. You can customize the following CSS properties based on your design requirements:

  • max-width: 1175px;
    Sets the maximum width of the form. You can adjust this value depending on how wide you want the form to appear. Example: max-width: 800px;

  • margin: 0 auto;
    Centers the form horizontally within its container. The auto value on the left and right margin automatically centers the block.

  • background: rgba (255, 255, 255, 0.96);
    Adds a semi-transparent white background to the form.
    If you prefer a solid color background, use a hex code or named color instead. Example: background: #fff;

  • padding: 25px 35px;
    Adds spacing inside the form container—25px on top/bottom and 35px on left/right.
    You can modify this to control the spacing between the container edge and the form fields. Example: padding: 20px 25px;

  • border-radius: 18px;Rounds the corners of the form container. You can increase, decrease, or remove this for a sharper or smoother look. Example: border-radius: 6px;

(5) Providing styling to the form elements

The form elements (e.g., input fields, select boxes, image uploaders, and buttons) inherit their default styles from the main, global stylesheet of the ITONICS system. These default styles cannot be modified directly. However, you can override them using inline CSS within the Code Editor for specific adjustments as needed.

(5.1) Input Field and Label Styling

<div class="title-wrapper">
  Title <span class="required-field">*</span>
</div>
<div class="form-item">
 <input class="form-text" placeholder="placeholder" type="text" id="id"
name="name" value="value" size="60" maxlength="255" autocomplete="off"></div>
/* Input title **/
.form-elements .title-input-wrapper .title-wrapper{
}
/* input.form-text */
input.form-text{
}

You can override the default styling by targeting specific classes, such as input.form-text for input fields and .title-wrapper for the input field titles (labels). This allows you to fully customize the appearance of form elements, including background color, border radius, width, spacing, and more.

  • .title-wrapper: This class is used for input field labels or titles. You can apply custom styles such as text alignment, font size, color, padding, and spacing to match your layout.
  • Input.form-text: This class targets the input fields. You can override its default appearance to match your design needs. Example: 
/* Input title/label styling */
.form-elements .title-input-wrapper .title-wrapper{
  font-weight: 600;
  font-size: 1em;
  color: #333;
  margin-bottom: 8px;
}
/* Custom input, select, and textarea styling */
input.form-text, 
select.form-select, 
textarea.form-textarea,
button.ui-multiselect {
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
    color: #000; /* Optional: to ensure text is visible */
}
/* Focus state styling */
input.form-text:focus, 
select.form-select:focus, 
textarea.form-textarea:focus {
  outline: none;
  border-color: #3399ff;
  background: rgba(255, 255, 255, 0.2);
}

(5.2) Providing styling for the file upload field

You can customize the file upload field, including changing the default camera icon that appears in the image upload area. This is done by overriding styles in the .file-overlay class.

.form-elements .field-type-file .fileupload-wrapper {
  width: 125px;
}.image-widget .file-overlay {
  background: url('https://i.imgur.com/Fa506gt.png') no-repeat center center;
  background-size: 54px 40px;
  width: 100%;
}.image-widget .file-overlay:before {
   display: none;
}

You can replace the default camera image by updating the background URL in the .file-overlay class. However, ensure that the image source is from a reliable and publicly accessible location (e.g., Imgur or a trusted CDN).

(5.3) Providing styling for buttons

You may provide styling for buttons, example:

<div class="captcha-button">
  <div class="btn-draft btn-save-publish">
    <div class="icon-btn">
       <input type="submit" id="btn_submit" name="draft" value="Submit"
class="form-submit ajax-processed">
    </div>
  </div>
</div


To directly style the submit button, you should target the following selector:

.control-wrapper .btn-draft .icon-btn input[type=submit] {
  background-color: #007bff; /* example color */
  color: #fff;
  padding: 0 20px 0 40px;
  font-size: 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Or even show the button in a full-width without an icon:

.captcha-button,
.control-wrapper .save-btn.entity-btn .btn-save-publish,
#controls .btn-save-publish .icon-btn,
.control-wrapper .btn-draft .icon-btn input[type=submit]{
width:100%;
margin-left:0;
}
#controls .btn-save-publish .icon-btn:after{
display:none;
}

(5.4) Providing styling for the CAPTCHA image

You can enhance the appearance of the CAPTCHA image and its reload button by applying custom CSS. This helps improve layout spacing and visual consistency.

/* Style for the CAPTCHA image */
#captcha-column > div > img {
  padding-right: 0;
  border-radius: 16px;
  margin-right: 20px;
}
/* Style for the reload CAPTCHA link/button */
.reload-captcha-wrapper {
  left: -400px; /* adjust based on layout */
  color: var(--white); /* uses a CSS variable for white */
  font-size: 14px;
}

(5.5) Reference field button styling

You can customize the appearance of the buttons used in the reference field by targeting the appropriate selectors. This includes both the file upload drop zone and any action buttons (e.g., submit or add URL) inside the .reference_url.

#tr3-citation-form div.file-dropzone {
  background: #007bff;       /* Button background color */  
  border: 1px solid transparent;
             }
#tr3-citation-form div.file-dropzone .description{
  color: #fff!important; /* Text color */ 
}

/* Primary button inside .reference_url */
.refrence_url input.primary-btn {
  background: #007bff!important; /* Button background color (green) */
  color: #fff!important;         /* Text color */
  }

(6) Removing the tab title if there is only one tab configured

In cases, in which only one tab is configured from the external gateway form configuration, you can optionally remove the one tab title in the external gateway form using inline JavaScript:

<!-- JavaScript: Hide tabs if there's only one tab -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const wrapper = document.querySelector(".tabs.normal-tabs-wrapper");
    const tabBeltPrev = wrapper?.querySelector(".tab-belt-prev");
    if (tabBeltPrev && tabBeltPrev.querySelectorAll("li").length === 1) {
      wrapper.style.display = "none";
    }
  });
</script>

A full example for an advanced, custom external gateway styling:

<!-- Custom CSS Styling -->
<style>
  /* Full-page background with blur overlay */
  body {
    background: url('https://imgur.com/GrEE5s9.jpeg') center no-repeat!important;
    background-size: cover;
  }
  body:before {
    content: " ";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
  }
  /* Wrapper styling for external layout */
  .external-wrapper {
    position: relative;
  }
  .external-wrapper h1:not(.title) {
    text-align: center;
    color: #fff;
    padding: 25px 0;
    font-size: 2em;
    position: relative;
  }
  /* Main form card styling */
  .getway-form-wrapper {
    max-width: 500px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.96);
    padding: 25px 35px;
    border-radius: 18px;
  }
  /* File upload custom image and size */
  .form-elements .field-type-file .fileupload-wrapper {
    width: 125px;
  }
  .image-widget .file-overlay {
    background: url('https://i.imgur.com/Fa506gt.png') no-repeat center center;
    background-size: 54px 40px;
    width: 100%;
  }
  .image-widget .file-overlay:before {
    display: none;
  }
  /* Transparent background for tab content */
  .tabbed_content {
    background: transparent;
  }
  /* Full-width button styling */
  .captcha-button,
  .control-wrapper .save-btn.entity-btn .btn-save-publish,
  #controls .btn-save-publish .icon-btn,
  .control-wrapper .btn-draft .icon-btn input[type=submit] {
    width: 100%;
    margin-left: 0;
  }
  #controls .btn-save-publish .icon-btn:after {
    display: none;
  }
</style>

<!-- External Gateway Wrapper -->
<div class="external-wrapper">
  <h1>[gateway:headline]</h1>
  <div class="getway-form-wrapper">
    [gateway:form]
  </div>
</div>

<!-- JavaScript: Hide tabs if there's only one tab -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const wrapper = document.querySelector(".tabs.normal-tabs-wrapper");
    const tabBeltPrev = wrapper?.querySelector(".tab-belt-prev");
    if (tabBeltPrev && tabBeltPrev.querySelectorAll("li").length === 1) {
      wrapper.style.display = "none";
    }
  });
</script>

Example 1:

Example 2:

Staying connected with external submitters

After successfully setting up your gateway, soon first proposals will come your way. Now, it is all about management and communication. Ideally, you have already defined a Stage-Gate Process to push the incoming proposals down the funnel. For that purpose, you can design your own workflows in the ITONICS application.

If you use your own workflows, you can tie messages that are sent to the external submitter to the different actions happening along the workflow.

For this, you need to design your own action buttons, select the trigger type Notification on such an action button (1), choose the respective E-Mail Template to be sent (2) (if there is no fitting template you can design your own E-Mail templates), and add the Persona External Submitter as Recipient (3). Finally, save your configuration (4).

External_submitter.png

If you want to inform the external submitters at various phases with different templates repeat the steps above.

Running multiple Gateways in different languages

When you run your Innovation OS across multiple regions, and you want to provide the same external gateway page by the different languages your system is set up with (e.g., German and English), you can generate two (or more) different links for the same form. 

You can then use the different links to provide those language-specific pages to different user groups. 

For instance, for the same gateway, you can create the following two links:

Besides German and English, ITONICS supports French and Spanish by default. 

Was this article helpful?
0 out of 0 found this helpful