OTOBO / Znuny - Interfaces

::: note Disambiguation This article is about graphical interfaces and not programming interfaces. If you are looking for information on programming interfaces, please read instead:

• OTOBO REST API.
• OTOBO Web Services.

As well as integration of agents and customers:

• OTOBO Agents Integration (LDAP and DB).
• OTOBO Customers (Companies) Integration (LDAP and DB).
• OTOBO Customer Users Integration (LDAP and DB). :::

The use of external interfaces in the OTOBO ticketing system is essential for efficient and effective communication between your service desk and your users. OTOBO is not only an advanced open-source helpdesk and ticketing system, but also offers diverse possibilities for integration and customization. From facilitating customer support through the OTOBO Customer Portal to increasing efficiency through OTOBO Managed Services, the range of applications is extensive.

Under Development

Some of the functions shown will only be unlocked in future OTOBO versions!

OTOBO Integration with Other Systems

In times of digitalization, a dynamic and user-friendly service desk solution is indispensable. OTOBO offers a platform for this, which not only impresses with its simple setup (see "Setting up OTOBO"), but also offers extensive customization options for your corporate identity (see "OTOBO Customization"). The OTOBO interface enables seamless integration into existing systems (see "OTOBO Integration") and facilitates the management of service requests.

Managing Custom Pages

Use the ability to create custom pages in the OTOBO ticketing system to individually design your external interface. OTOBO allows you to easily add and manage custom pages, which is a valuable resource for providing information such as service catalogs and knowledge bases.

Adding Custom Pages

To add a new custom page to your OTOBO system:

1. Select the "Add Custom Page" option.
2. Fill in the required fields with your content.
3. Save your entries to add the new page to the system.

Editing & Deleting Custom Pages

To edit or delete existing pages, navigate through the overview of your custom pages. You can make adjustments or remove pages using the "Edit" and "Delete" options.

Managing custom pages [1]

Benefits of OTOBO Interfaces

By using the OTOBO interfaces, your service desk requests can be processed more efficiently, while simultaneously building a strong corporate identity. OTOBO’s flexible configuration options also offer extensive possibilities for customizing and extending your system (see "OTOBO Extension", "OTOBO Add-ons").

Invest in OTOBO interfaces to optimize your company's communication channels. Discover the numerous OTOBO features and their potential for improving your service desk.

Configuring Custom Pages

When adding or editing custom pages in the OTOBO ticketing system, there are specific fields that require attention. These fields allow for deep customization and ensure that each page meets your exact needs and requirements of your users.

**Internal Title* **
The internal title is essential for backend management. It is used to easily identify your custom page in the interface. Although this field accepts flexible characters, including spaces and uppercase letters, it is recommended to choose a clear and descriptive title.

**Slug* **
The slug defines the URL path of your custom page. For better SEO performance and user-friendliness, you should use lowercase letters, numbers, and hyphens instead of spaces here.

**Validity* **
An essential field for controlling the activation of your page. Only pages marked as valid can be seen and accessed by users. By setting it to invalid or temporarily invalid, the page is deactivated but remains in the system.

Custom Page Content
The main area to fill your page with life. You can enter both the title and the content of the page in your desired language. To support multiple language versions of your page, OTOBO allows for easy addition of new custom page content for different languages.

Under Development

Some of the functions shown will only be unlocked in future OTOBO versions!

Managing the Homepage

The homepage of your OTOBO-based platform serves as the showcase for your users. Use the homepage configuration to make a strong first impression and make important information immediately accessible.

Designing the Hero Unit

The Hero Unit is a central component of your homepage's design. With a meaningful title, an appealing background image or color, and the ability to overlay image and color, you can create a visually appealing welcome for your users.

Ticket List
An optional area to display the latest or most relevant tickets directly on the homepage for logged-in users. The display of this list is configurable and can be enabled or disabled based on your preferences.

Image Teasers

Image teasers are another method to draw users' attention to important topics or actions. Placed in a separate row, they offer the opportunity to set visual highlights on your homepage.

By utilizing the customization options for custom pages and the homepage in OTOBO, you can create a platform that is not only functional but also visually and content-wise tailored to your company.

Customizing the Homepage with Image Teasers & Link Lists

The design of your homepage is the showcase of your OTOBO-based platform. It provides the first impression and guides users to important resources. Image teasers and link lists are powerful tools with which you can optimize and make your external interface accessible.

Designing Image Teasers

Image teasers draw attention to specific topics or actions and offer a visually appealing way to highlight important aspects of your platform.

How to Add Image Teasers:

1. Go to the top right corner of the image teaser widget and click "Add".
2. Select a suitable image that supports your teaser's message.
3. Enter a meaningful title and accompanying text.
4. Define the link destination for users who want to learn more.

Image teasers on the homepage [1]

Note that colors and titles are also customizable to ensure a harmonious overall aesthetic of your website.

Under Development

Some of the functions shown will only be unlocked in future OTOBO versions!

Setting Up Link Lists

Link lists offer the ability to present relevant resources in a structured and user-friendly manner. They are essential for informative and efficient navigation.

How to Set Up Link Lists:

1. Select "Add" in the top right corner of the link list widget.
2. Enter a concise title for the link list.
3. Define the link text and destination to link detail pages or external resources.
4. Decide between manually adding elements or displaying search results.

Link list as an information resource [1]

For both options – image teasers and link lists – strategic planning is recommended to ensure that the content is not only aesthetically pleasing but also functional and valuable to the user.

Content Cards: Another Design Element

Content cards, similar to image teasers and link lists, are a helpful element for highlighting your service offerings and information. You can add up to three content cards, each with its own title, text, and a "show more" link.

Content card for a detailed presentation [1]

The correct use of these elements not only contributes to a vibrant and appealing homepage but also makes navigation and information retrieval easier for your website visitors.

Note for Future Updates

While the functions described above already allow for versatile customization, it is important to keep in mind that OTOBO is continuously being developed. Future versions will likely offer further customization options and features. So, stay up-to-date and regularly check for updates and new features to further improve your platform.

Personalizing the External Interface in OTOBO: A Comprehensive Guide

The external appearance and feel of your OTOBO-based platform play a crucial role in how users interact with your service desk. By customizing the layout, you can not only strengthen brand identity but also improve usability. Here's how to individually design the external interface using the layout module.

Changing the Default Layout

A new installation of OTOBO already comes with an appealing default layout. However, you can modify all aspects of the design according to your branding guidelines to create a unique user interface.

Screen for editing the layout [1]

Key Layout Elements

Logo: A prominent logo in the top left corner enhances your brand presence. It is recommended to use a PNG image that is clear and recognizable.

Favicon: The favicon is the small image that appears in the browser's URL bar. A well-chosen favicon increases the recognition of your platform.

Primary Color and Accent Color: These colors are central to the visual experience on your pages. The selection should reflect your company colors and contribute to the overall aesthetic of the website.

Default Avatar: A consistent avatar provides visual continuity for all outgoing communications and reinforces the sense of community.

Custom CSS: For deeper customization, you can add custom CSS. This allows you to design almost every aspect of the user interface according to your preferences.

Widget for custom CSS [1]

Advanced Customizations with Custom Scripts

To extend the functionality of your platform, you can integrate custom scripts. This is useful for integrated solutions like chat services or for web analytics.

Example: Integrating Web Analytics Tools

Integrating external scripts, such as code snippets provided by web analytics providers, allows you to track and analyze user behavior. These scripts can be safely embedded in OTOBO and provide valuable insights that contribute to optimizing the user experience.

Security Standards

The external interface of OTOBO relies on high security standards and uses Content Security Policy ( CSP) headers to ensure that only trusted code is executed. This protection mechanism ensures that even if unexpected code reaches the client, it will not be executed by the browser.

Configuring Custom Scripts

Additional scripts can be integrated into your external interface as follows:

• ExternalFrontend::ExternalScripts for external scripts.
• ExternalFrontend::InlineScripts for inline scripts.
• WebApp::Server::AdditionalOrigins for specifying additional origins.

You can find these settings in the System Configuration.

Summary of Script Integration

Personalizing the layout of your OTOBO platform is an effective way to bridge the gap between your brand identity and the users of your service desk. By carefully customizing design elements and integrating custom scripts, you can provide a tailored and secure user experience.

1. Whitelisting External Script Resources:

   • Navigate to the System Configuration screen.
   • Look for the WebApp::Server::AdditionalOrigins setting.
   • Edit this setting to add the location of the external script resource ( e.g., https://www.example.com).

2. Allowing Inline Scripts and Evaluations:

   • This can be more complex, as it may require directly modifying the Content-Security-Policy setting of the web server or a proxy server to allow inline scripts and 'eval' operations.
   • If your OTOBO installation allows access to these deeper web server or proxy server settings, look for options to change the CSP's script-src directive and add unsafe-inline and unsafe-eval.

3. Applying Changes After Adding:

   • Save all changed settings and ensure that the new system configuration takes effect.
   • Run the bin/otobo.WebServer.pl --deploy-assets command again to ensure all assets are correctly redeployed and changes are applied.

Reviewing Changes

After making these changes and rebuilding the external interface application, you should reload your website and check if the external and inline scripts are now loading and executing correctly.

Security Notes:

• It is important to note that adding unsafe-inline and unsafe-eval to your CSP can potentially reduce the security of your web application, as it increases the possibility of Cross-Site Scripting (XSS) attacks. Ensure that you only make these changes for trusted script sources.
• Whitelisting external sources in CSP is a powerful feature that helps maintain security by ensuring that only content from trusted sources is loaded. Any addition should be carefully reviewed.

Integrating external script resources and adding inline code to OTOBO requires careful planning and configuration, especially considering security aspects. By diligently implementing the steps above, you can extend the functionality of your OTOBO service desk without compromising the security of your users.

Security Guidelines When Whitelisting External Resources

Integrating external scripts and resources can extend the functionality of OTOBO and open up new possibilities for your service desk communication. However, as explained in the previous steps, it is important to be aware of the potential security risks. Every added external resource carries the possibility of unwanted influences on your application. Therefore, only trusted sources should be allowed.

The Whitelisting Process

When whitelisting resources in OTOBO through the WebApp::Server::AdditionalOrigins setting for various CSP directives such as script-src, img-src, etc., the browser console will help you identify faulty loading attempts that are blocked by the CSP. By following these instructions, you can provide your users with a secure and efficient experience.

Important to Note

• Minimize Security Risks: Avoid whitelisting unknown or insecure sources.
• Regular Reviews: Periodically review the sources to ensure they remain secure.
• Limit Access: Whitelist only the necessary resources to minimize the attack surface.

Future Features: Customer Service Catalog

A preview of upcoming features in OTOBO is the Customer Service Catalog. This section will allow you to create categories and items specifically for use in the external interface. Although this feature is still under development, it promises to further improve the communication and service offerings of your help desk.

WARNING

For the use of these advanced features or if you are looking for specific customizations that are not yet available, do not hesitate to contact OTOBO customer service. The experts at OTOBO are always ready to find individual solutions and take your platform to the next level.

Summary

Customizing your OTOBO platform by adding external scripts and resources opens up a wide range of possibilities. However, it is essential to ensure the security of your application and the trustworthiness of the sources. With due diligence and regular updates, you ensure a secure and smooth operation of your service desk platform.

Effective Management of the Customer Service Catalog in OTOBO

As part of enhanced customer service, OTOBO offers you the ability to create and manage a comprehensive Customer Service Catalog. This module, divided into two main components – Category Management and Item Management – allows for a structured and efficient presentation of your services and resources.

Category Management

Category management allows you to group similar items into logical groups. This makes it easier for users to find specific offers or information within your platform.

Adding New Categories

To add a new category to your catalog:

1. Access Category Management: Select the "Go to Category Management" option or navigate through the "Category Management" module.
2. New Category: Click on "Add Category".
3. Fill in Details: Complete the necessary fields with information about the category.
4. Save: Confirm your entries by clicking "Save".

Adding a new category [1]

Editing and Deleting Categories

To edit or remove existing categories, follow a similar procedure, but this time select the relevant category from the list and choose "Edit" or use the trash can icon to delete.

Item Management

Items represent specific offers, services, or information sources, which are grouped into their respective categories.

How to Add Items

1. Access Item Management: Select "Go to Item Management" or use the "Item Management" module.
2. Add Item: Click the "Add Item" button.
3. Enter Information: Fill in the necessary fields with details about the item.
4. Save: By clicking "Save", you add the item to your catalog.

Adding a new item [1]

Customization and Organization

The Customer Service Catalog offers diverse customization options, including assigning items to subcategories and selecting specific languages for different categories and items. This flexibility allows you to create a tailored and accessible catalog for your users, regardless of their preferred language or specific interests.

Validity Note

For effective use of the Customer Service Catalog, it is crucial to keep track of the validity of your categories and items. An item or category is only visible and accessible to users if its validity is set to "valid".

Conclusion

The Customer Service Catalog in OTOBO is a powerful tool for structuring and presenting your offerings. By targeted management of categories and items, you can create a clear and user-friendly service portfolio that meets the needs and requirements of your customers.

Editing Items in the OTOBO Customer Service Catalog

Managing items in your OTOBO Customer Service Catalog is simple and intuitive. You can edit items at any time to update their information, or delete items if they are no longer needed. Here is a detailed guide on how to perform these actions.

Editing Items

If the information about your offering changes or you simply want to correct an error, follow these steps to edit items in your Customer Service Catalog:

1. Select the Item: Navigate to the item management screen. Browse the list and click on the item you wish to edit.

2. Make Changes: On the editing screen, you can update the various fields of the item.

3. Save Changes: After making the necessary adjustments, click "Save" or "Save and Close" to confirm the changes.

Editing an item in the Customer Service Catalog [1]

Deleting Items

Follow these simple steps to remove an item from your Customer Service Catalog:

1. Find the Item to Delete: On the item management page, locate the item you wish to remove.

2. Initiate Deletion: Click on the trash can icon next to the desired item.

3. Confirm Deletion: A confirmation dialog will appear. Click "Confirm" to complete the deletion.

Removing an item from the Customer Service Catalog [1]

Tips for Efficient Management

• Use Filters: If your catalog contains many items, use the filter field to quickly access specific items by typing their name.
• Multi-Language Support: When adding or editing an item, you can add content in different languages to reach a broader audience.
• Category Assignment: For better organization and discoverability of your offerings, carefully assign one or more categories to each item.

Important Item Settings

• Internal Title: This title helps you manage your catalog but is not visible to end-users.
• Validity: Only items marked as valid will be displayed in the external interface. Use this setting to temporarily deactivate offers without deleting them.
• Localized Content: Define titles, texts, and links for each language to make your items informative and appealing.

With these features, OTOBO offers you extensive possibilities to organize and continuously update your Customer Service Catalog meaningfully.