Customize the OTOBO Customer Portal – Branding & UX

In this guide: Brand and configure the OTOBO customer portal at YOURDOMAIN/otobo/customer.pl for end users.

Related: Customer users · Customer management · OTOBO skins & themes · Tickets overview

OTOBO has not only an Agent portal but also a customer portal, which can be accessed via the URL “YOURDOMAIN/otobo/customer.pl”. This is where Customer Users can log in. The customer portal allows the customer user to create new Tickets, as well as edit and view Tickets.

Feel free to test the customer portal with our OTOBO demo!

Creating Customer Users for the Customer Portal

All agents with admin rights are allowed to create new Customer Users.

To create a new Agent, you must go to the Admin area and select the Customer Users tile. After creating a customer user, they can log in to the OTOBO customer portal. In the customer user tile, you can now see all previously created customer users.

Adding OTOBO Customer Users

If you click on one of these Customer Users, you can edit or delete them, or set them to invalid. To add a new customer user, click on Add Customer User.

Creating a new OTOBO Customer User

For logging into the customer portal, the customer user needs their username and password. If the Customer has forgotten their password, they can have a new password sent to their email address.

You can also give Customers the opportunity to register themselves for the customer portal; this can be changed via the setting “Customer Panel Create Account”.

If the setting is enabled, Customers can register via the customer portal. You can block or allow certain Emails via the settings CustomerPanel CreateAccount::MailRestrictions::Blacklist and Whitelist. For example, domains with a certain domain name.

On the login page YOURDOMAIN.de/otobo/customer.pl, there is a link, “Request account”, which can be used to create a new account. You enter your first name, last name, and Email there, and then you receive your password via email. For this to work, sending Emails must of course be configured; there is a separate article on this.

Login to the OTOBO Customer Portal

To log in to the customer portal, the Customer must call up the following URL - YOURDOMAIN.de/otobo/customer.pl.

If you have forgotten your password for the customer portal, click on “Forgot password?”. A Email with a link will then be sent; after clicking on this link, you will receive a second Email with your new password. You can enable or disable this “forgot password” function via the System Configuration “CustomerPanel LostPassword”. Via the settings CustomerPanel BodyLost Password as well as the configuration “CustomerPanel BodyLost PasswordToken”, you can change the Email with the password link and the Email with the password.

Changing the Customer Portal Logo

To change the image displayed at the Customer portal login, you must change the URL in the system configuration Customer Login::Settings.

There, you can change which image is selected using the “Background” setting. Both a URL to an image file and a path to the image on the server are possible. With “LoginText”, you can change the text displayed in the customer portal.

Note

Currently, it is not that easy to adapt the agent area to your own CI. Changes to the OTOBO .css files would be necessary here. An exception is the logo on the agent login page and the agent header. The Logos can be easily exchanged by copying the Logos to the server and then adjusting the options AgentLoginLogo and AgentLogo under Admin -> System Configuration.

Dashboard of the OTOBO Customer Portal

After you have logged into the OTOBO customer portal, you will land on the dashboard of the OTOBO customer portal.

Dashboard of the customer portal

There you can view your latest Tickets, as well as links to external tools. Via the Create Ticket field, you can create a new ticket.

Changing Colors

To change the colors for the OTOBO customer interface, please go to

Admin -> System Configuration and change the following settings:

• CustomerColorDefinitions

• To change the colors on the customer dashboard, please go to Admin -> System Configuration and search for CustomerDashboard. In the search result, you will find all necessary options with color definitions.

Changing Images and Text

With the OTOBO Skins and Themes, you can customize the design of the entire helpdesk.

• 1 and 2 - System configuration option CustomerLogin::Settings

Removing Opacity and Watermark

Currently, it is not possible to remove the overlay and the watermark used in the right image via system configuration. To remove the opacity, please adjust the option #oooLoginBG > .oooBG in the file

var/httpd/htdocs/skins/Customer/default/css/Core.Login.css

#oooLoginBG > .oooBG {
  position: relative;

  width: 100%;

  height: 100%;

  /* opacity: 0.45; deactivate opacity */

  background-size: cover;

  overflow: hidden;
}

To remove the watermark, please delete the following line in the

file:

Kernel/Output/HTML/Templates/shared/CustomerLogin.tt

<!-- start login -->

<div id="oooLoginBG">

  <div class="oooBG" style="background-image: url([% Data.Background | html %]);">

    # remove this line ->
    <div id="oooBGSignet" style="background-image: url([% Config(" Frontend::WebPath
    ") %]common/img/otobo-signet_border.svg);">
  </div>

  < /div>

  <h1>[% Translate(Data.LoginText) | html %]</h1>

</div>

Note

Please add the files to an opm package in the next step so that the changes remain persistent.

Changing the tiles and options of the customer dashboard To change the colors on the customer dashboard, please go to Admin -> System Configuration and search for CustomerDashboard. In the search result, you will find all required options with color definitions.

• 1 - To change the image, link, and text, please use the system configuration option CustomerDashboard::Tiles###FeaturedLink-01

• 2 - To change the top-level text, please use the system configuration option CustomerDashboard::Configuration::Text

Note

Please deactivate the configuration options for tiles that are not needed.

Modifying the Customer Portal Dashboard

You can change the appearance of the OTOBO dashboard in the System Configurations of the agent portal. These configurations are located at the following place:

Frontend -> Customer -> ModelRegistration

All navigation elements are defined there.

In the setting CustomerFrontend::Navigation###CustomerDashboard###002-CustomerDashboard, the top navigation element is defined. With the priority, you can change the order of the navigation elements. Smaller ones come first. With the svgIcon, you can change the displayed pictogram. With the Description, the hover text is defined. With Group and GroupRo, you could switch off menu items for certain customer users.

With the setting CustomerDashboard::Configuration::Text, the page heading as well as the greeting text can be changed.

Via the tiles in the configuration path Frontend -> Customer -> View -> Dashboard -> Tiles, the elements of the dashboard can be changed. The following tiles exist in the standard case:

• CustomerDashboard::Tiles###PlainPicture-01 defines the image on the dashboard (the one at the very bottom “Overview”; you could exchange the displayed image)
• CustomerDashboard::Tiles###PlainText-01 - creates a tile that displays text. By default, this says “Hello World”
• CustomerDashboard::Tiles###NewTicket - is a button for creating a ticket. The color of the text can be set
• CustomerDashboard::Tiles###FeaturedLink-01 - shows the image with the text “Thats new in OTOBO”, background image, link, and text can be changed.
• CustomerDashboard::Tiles###TicketList-01 - shows the list of the latest tickets; the order, number of Tickets, and more can be changed
• CustomerDashboard::Tiles###ToolBox-01 - displays icons with links

Creating a Ticket in the OTOBO Customer Portal

In the ticket creation mask, you can define various attributes. You can change the fields of the ticket creation in the Admin area.

Fields of ticket creation:

• Type: The type of Ticket - e.g., Problem or Question
• To: The Queue in which the ticket should be created
• Subject: The heading of the ticket
• Text: Description of the ticket
• Files: Files can be uploaded and attached to the ticket there
• Priority: How important solving the Ticket is

Customer Portal Ticket Information

After clicking on a ticket, you can see all articles (subject, messages). In the System Configuration, you can set which attributes are displayed in this table.

If a field is set to 1, it will be displayed. To add Dynamic Fields to the view, you must add this field to the dynamic fields interface - Ticket::Frontend::CustomerTicketZoom

Editing Tickets in the Customer Portal

Of course, you can also edit existing Tickets. To do this, select a specific ticket and then choose Reply; you can then write a reply to the ticket.

You can then add a message to the ticket, as well as set a new status for the Ticket.

Changing Settings in the Customer Portal

In the Otobo customer portal, the customer user can change their personal settings; to do this, they must move the mouse over the avatar located at the bottom left and then press the gear icon. In the settings, the language, password, number of displayed Tickets, and ticket update can be changed.

Customizing the OTOBO Customer Portal

There are several customization options for the OTOBO customer portal, which can be accessed via the Admin area of the agent portal. The customization options can be found in the system configurations. There, under Frontend -> Customer.

Setting Options

• CustomerFrontend::Active - switches the customer portal off or on.
• CustomerPanel CreateAccount - gives Customers the possibility to create an account themselves
• CustomerPanel LostPassword - switches the forgot password function on
• Customer Logo - sets the Logo used in the customer portal
• CustomerPanel BodyLostPassword - sets the message that the newly set password has
• CustomerPanel BodyLost PasswordToken - sets the sent message that is sent when someone has clicked on the “Forgot password” button
• CustomerPanel Body NewAccount - sets the message that new users of the Otobo ticket system receive
• Customer PanelCreate Account::MailRestrictions::Blacklist - forbids users with certain Emails from creating an account - all Emails that fulfill this regular expression are forbidden
• CustomerPanel CreateAccount::MailRestrictions::Whitelist - if activated, only Users whose Email account fulfills this regular expression can create an account
• Customer PanelLogin URL - sets the URL of the customer portal login

Additional Fields when Creating a Ticket in the Customer Portal

You have the possibility to add further fields to the ticket creation mask. This is done via dynamic fields; there are the following types of dynamic fields:

• Checkbox
• Contact data
• Database
• Date
• Date / Time
• Dropdown
• Multiselect
• Text
• Text area
• Title
• Webservice

You can select one of these types there, then you can define the settings of the field. If you add a text field, you can define the name, label, field order, tooltip text, number of lines, number of columns, default value, and whether you want to check the input for correctness with a regular expression.

After the field has been created, we still have to define in which interfaces the field should be displayed; for this, we go to the tile “Dynamic Fields Interfaces”.

FAQ: OTOBO Customer Portal

How do I reach the OTOBO customer portal?

Via the URL YOURDOMAIN/otobo/customer.pl. Customer users log in there to create, view, and reply to tickets.

Can customers self-register?

Yes, if the SysConfig setting CustomerPanel::CreateAccount is enabled. Use MailRestrictions::Blacklist and Whitelist to allow or block specific email domains.

How do I change the logo and colors in the customer portal?

Set the logo and background image via CustomerLogin::Settings. Adjust colors via CustomerColorDefinitions and the CustomerDashboard settings in the system configuration.

How can I customize the customer portal design further?

With custom OTOBO skins & themes you can restyle the whole interface via CSS. Deeper changes require editing CSS/template files, which should be bundled into an OPM package.

Can I disable the customer portal entirely?

Yes. The CustomerFrontend::Active setting turns the customer portal on or off.

Frequently asked questions

How do customers access the OTOBO customer portal and what functionalities are available to them?

Customers access the OTOBO customer portal by navigating to YOURDOMAIN/otobo/customer.pl in their web browser. This dedicated portal serves as a self-service interface where registered customer users can log in to manage their support interactions. Once logged in, they can perform several key actions, including creating new support tickets, viewing the status and details of their existing tickets, and editing information related to their open requests. The dashboard also provides an overview of their latest tickets and may include links to external tools, enhancing their overall self-service experience with OTOBO.

• Customize the OTOBO Customer Portal – Branding & UX
• Self-Service Portal – for employees, customers & partner - OTOBO

What are the different methods for creating and managing customer users for the OTOBO portal?

There are two primary methods for creating and managing customer users in OTOBO. Firstly, agents with administrative rights can manually create new customer users. This is done by navigating to the Admin area and selecting the Customer Users tile. Here, agents can add new users, or edit and delete existing ones, as well as set their status to invalid. Secondly, OTOBO supports customer self-registration. This feature can be enabled via the system configuration setting Customer Panel Create Account. When enabled, a "Request account" link appears on the customer portal login page, allowing customers to register themselves by providing their first name, last name, and email address. You can further control self-registration by blacklisting or whitelisting specific email domains using the CustomerPanel CreateAccount::MailRestrictions::Blacklist and Whitelist settings.

• Customize the OTOBO Customer Portal – Branding & UX
• Customer Users — OTOBO Admin Guide 10.1 documentation

How can I customize the branding elements, such as logos and text, on the OTOBO customer portal login page?

To customize the branding elements on the OTOBO customer portal login page, you need to adjust specific system configurations. The primary setting for changing the displayed image (logo or background) is found under Admin -> System Configuration by searching for Customer Login::Settings. Within these settings, locate the Background option, where you can specify a URL to an image file or a path to an image located on your server. This allows you to replace the default image with your organization's logo or a custom background. Additionally, the LoginText setting within the same configuration allows you to modify the text displayed on the customer portal login page, enabling further customization to match your corporate identity.

• Customize the OTOBO Customer Portal – Branding & UX
• Adapt customer interface with corporate identity

What options are available for customers who forget their password for the OTOBO portal?

If a customer user forgets their password for the OTOBO customer portal, they can utilize the "Forgot password?" link available on the login page at YOURDOMAIN.de/otobo/customer.pl. Clicking this link initiates a password reset process. First, an email containing a unique link is sent to the customer's registered email address. Upon clicking this link, a second email is dispatched, providing them with a new, temporary password. This functionality can be enabled or disabled by an administrator through the System Configuration setting CustomerPanel LostPassword. Furthermore, the content of these password recovery emails can be customized via the CustomerPanel BodyLost Password and CustomerPanel BodyLost PasswordToken configurations, allowing for tailored communication.

• Customize the OTOBO Customer Portal – Branding & UX

How do I change the color scheme and visual appearance of the OTOBO customer interface and dashboard?

To modify the color scheme and overall visual appearance of the OTOBO customer interface and its dashboard, administrators need to access the System Configuration. Navigate to Admin -> System Configuration within the OTOBO agent portal. Here, you can search for and adjust specific settings that control the portal's colors. The primary setting for general customer interface colors is CustomerColorDefinitions. For customizing the colors specifically on the customer dashboard, you should look for settings related to CustomerDashboard. By modifying these configuration options, you can align the customer portal's look and feel with your organization's corporate design, providing a consistent brand experience for your end users.

• Customize the OTOBO Customer Portal – Branding & UX
• Adapt customer interface with corporate identity

Are there any limitations or specific considerations when customizing the OTOBO agent area compared to the customer portal?

Yes, there are notable differences and limitations when customizing the OTOBO agent area compared to the customer portal. The documentation indicates that adapting the agent area to your own corporate identity is generally more complex and "not that easy." This typically requires direct modifications to OTOBO's .css files, which demands a deeper technical understanding and careful implementation to avoid breaking functionality or future update compatibility. However, there are exceptions for simpler branding changes within the agent area. Specifically, the logos on the agent login page and the agent header can be easily exchanged. This is achieved by copying your custom logos to the server and then adjusting the AgentLoginLogo and AgentLogo options found under Admin -> System Configuration. These specific logo changes are more straightforward than comprehensive CSS-based theme adjustments.

• Customize the OTOBO Customer Portal – Branding & UX
• OTOBO skins & themes