OTOBO Interfaces

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

• OTOBO REST API.
• OTOBO Web Services.

As well as integration of agents and customers:

• OTOBO Agent Integration (LDAP and DB).
• OTOBO Customer (Company) Integration (LDAP and DB).
• OTOBO Customer User Integration (LDAP and DB). :::

The use of external interfaces in the OTOBO ticket 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 ticket system, but also offers diverse possibilities for integration and customization. From facilitating customer support through the OTOBO Customer Portal to increasing efficiency with OTOBO Managed Services, the range of applications is extensive.

In Development

Some of the features shown will only be enabled in future OTOBO versions!

OTOBO Integration with Other Systems

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

Managing Custom Pages

Use the ability to create custom pages in the OTOBO ticket 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 a service catalog and knowledge base.

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]

Advantages of OTOBO Interfaces

By using the OTOBO interfaces, your service desk requests can be processed more efficiently, while you simultaneously build a solid 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.

Configuration of Custom Pages

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

**Internal Title* **
The internal title is essential for management in the backend. It is used to easily identify your custom page in the interface. Although this field flexibly accepts 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 bring your page to life. You can insert both the title and the content of the page in your desired language. To support multiple language versions of your page, OTOBO allows for the easy addition of new custom page content for different languages.

In Development

Some of the features shown will only be enabled in future OTOBO versions!

Managing the Home Page

The home page of your OTOBO-based platform serves as a showcase for your users. Use the home page 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 home page'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 home page 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 the attention of users to important topics or actions. Placed in a separate row, they offer the opportunity to set visual highlights on your home page.

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

Customizing the Home Page with Image Teasers & Link Lists

The design of your home page is the flagship 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 provide a visually appealing method 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 the message of your teaser.
3. Enter a meaningful title and supplementary text.
4. Define the link target for users who want to learn more.

Image teasers on the home page [1]

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

In Development

Some of the features shown will only be enabled 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 target to link to detail pages or external resources.
4. Decide between manually adding items 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 lively and appealing home page but also makes it easier for your website visitors to navigate and find information.

Note on Future Updates

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

Personalizing the External Interface in OTOBO: A Comprehensive Guide

The look 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 your brand identity but also improve user-friendliness. Here you will learn how to individually design the external interface using the layout module.

Changing the Default Layout

A new installation of OTOBO already has 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]

Essential 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 corporate colors and contribute to the overall aesthetics of the website.

Default Avatar: A uniform avatar creates visual continuity for all outgoing communications and strengthens the sense of community.

Custom CSS: For more in-depth customizations, you can add your own CSS. This allows you to design almost every aspect of the user interface according to your wishes.

Widget for custom CSS [1]

Advanced Customizations with Custom Scripts

To expand the functionality of your platform, you can integrate your own 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 inserted into 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.

Configuration of Custom Scripts

The integration of additional scripts into your external interface can be done as follows:

• ExternalFrontend::ExternalScripts for external scripts.
• ExternalFrontend::InlineScripts for inline scripts.
• WebApp::Server::AdditionalOrigins to specify 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 build a bridge between your brand identity and the users of your service desk. Through careful customization of design elements and the integration of custom scripts, you can offer a tailored and secure user experience.

1. Whitelisting the external script resource:

   • Navigate to the System Configuration screen.
   • Search 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 be necessary to directly change 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 script-src directive of the CSP and add unsafe-inline and unsafe-eval.

3. Applying changes after adding:

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

Verifying the 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 this increases the possibility for Cross-Site Scripting (XSS) attacks. Make sure 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. Every 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 following the steps above, you can extend the functionality of your OTOBO service desk without compromising the security of your users.

Security Guidelines for Whitelisting External Resources

The integration of 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 like script-src, img-src, etc., the browser console helps you identify failed loading attempts that are blocked by the CSP. By following these instructions, you can offer your users 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 risk of attack.

Future Features: Customer Service Catalog

A preview of upcoming features in OTOBO is the customer service catalog. This area will allow you to create categories and items specifically for use in the external interface. Although this feature is still in development, it promises to further improve the communication and service offerings of your helpdesk.

WARNING

For the use of these advanced features or if you are looking for special 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 spectrum of possibilities. However, it is essential to ensure the security of your application and the trustworthiness of the sources. With appropriate caution and regular updates, you ensure a secure and smooth use of your service desk platform.

Effective Management of the Customer Service Catalog in OTOBO

As part of an enhanced customer service, OTOBO offers you the ability to create and manage a comprehensive customer service catalog. This module, which is divided into two main components - category management and item management - allows for a structured and efficient presentation of your services and resources.

Managing Categories

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. Accessing Category Management: Select the “Go to Category Management” option or navigate via 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 corresponding category from the list and choose "Edit" or use the trash can icon to delete.

Managing Items

Items represent concrete offers, services, or information sources that are grouped in the respective categories.

How to Add Items

1. Accessing 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 special interests.

Note on Validity

For effective use of the customer service catalog, it is essential to keep an eye on the validity of your categories and items. An item or a 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. Through targeted management of categories and items, you can design 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 the 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 when they are no longer needed. Here is a detailed guide on how to perform these actions.

Editing Items

If 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. Selecting the Item: Navigate to the item management screen. Browse the list and click on the item you want to edit.

2. Making Changes: On the edit screen, you can update the various fields of the item.

3. Saving Changes: After making the necessary adjustments, click " Save" or "Save and finish" 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. Finding the Item to Delete: On the item management page, search for the item you want to remove.

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

3. Confirming 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 entering their name.
• Multi-language support: When adding or editing an item, you can add content in different languages to appeal to a broader audience.
• Category assignment: For better organization and findability of your offerings, carefully assign each item to one or more categories.

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 meaningfully organize and continuously update your customer service catalog.