---
title: Customer layout
slug: admin-guide/customer-layout
docTags: j1yCr0M00mGXfejb-Mb8A
createdAt: 2026-04-12T14:53:39.066Z
---
What are the customer layout options?
How do I add actions to the customer information?
How do I display data from the database in the customer information?
How do I customize my customer layout? [Setting up customer layout options](docId\:LCVlwXpnZTfDpQg0NDa5-)
## Customer layout overview
ITCC allows administrators to customize how customer information is displayed on the ticket processing page. Customer layouts help agents quickly access important customer details such as contact information, job title, department, and available communication actions.
The most commonly used customer layout looks as follows:
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/uivUCfsorlGG4hus1pu0O_image.png" size="56" width="368" height="140" position="center" darkWidth="368" darkHeight="140" showCaption="false"}
A typical customer layout includes:
- customer's photo or icon
- customer's first and last name
- VIP flag, if applicable
- [action icons](docId\:LCVlwXpnZTfDpQg0NDa5-)
- customer's email
- customer's phone number
You can choose to omit any of these items. You can also include additional items.
For example, your customer layout can include your customer's title or department.
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/GcvSHJhuVpo7y0Zx-7QeV_image.png" size="56" width="347" height="198" position="center" darkWidth="347" darkHeight="198" showCaption="false"}
Typically, customer information appears in the top right corner of the ticket processing page.
You can also split up customer information, so that some of it appears at the top center of the ticket processing page and the rest in the top right corner.
## Customer layout components
A customer layout consists of the following components:
- image
- customer title
- [action icons](docId\:LCVlwXpnZTfDpQg0NDa5-)
- customer details
- center text (first line)
- center text (second line)
The locations of each the components on the screen is illustrated in the following diagram:
## Action icons
You can include actions available for this customer into your customer layout.
The actions are displayed as icons under the customer title.
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/1WDs84rDkmXFpDoxXVnmV_image.png" size="56" width="230" height="28" position="center" darkWidth="230" darkHeight="28" showCaption="false"}
By default, the following action icons are included:
- email customer
- WhatsApp customer
- change customer or update customer contact information
- call customer
- view customer information
- message customer
If needed, you can remove any of these action icons, and you can include additional action items.
You can specify which action icons to include when you [set up customer layout options](docId\:LCVlwXpnZTfDpQg0NDa5-).
## Tokens
You can use tokens to retrieve and display customer information.
A token corresponds to a field or attribute value associated with a specific customer.
For example, the token `#JOB_TITLE#` corresponds to the customer's job title.
You can view all available tokens in the `Available #TOKENS#` dropdown list when you [set up customer layout options](docId\:LCVlwXpnZTfDpQg0NDa5-).
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/WrRHPcNy-2hkGYDVACZT9_image.png" size="40" width="265" height="551" position="center" darkWidth="265" darkHeight="551" showCaption="false"}
When you select a token from the `Available #TOKENS#` dropdown list, the token appears in the Copy Token read only field.
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/B7XWA_N_f2b9vMpgkO_dh_image.png" size="56" width="402" height="88" position="center" darkWidth="402" darkHeight="88" showCaption="false"}
To use the token in the customer layout, copy it by selecting the copy icon and paste it into the field where you want it to appear.
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/IB3kP46XpfebSmnA77wW4_image.png" size="58" width="402" height="88" position="center" darkWidth="402" darkHeight="88" showCaption="false"}
For example, in the following figure, the customer's job title is set to be displayed in the first line of the center text (Center text refers to the information displayed in the top-center area of the ticket page).
On the ticket processing page, the customer's actual job title from the database is substituted for `#JOB_TITLE#`.
## Setting up customer layout options
You can set up customer layout options at any time.
During setup, the preview of your customer layout appears at the top of the page.
Whenever you update your layout and select Save, the preview is updated.
You can enter a sample ticket number to be used for the preview. The sample user for this preview is displayed in the read only Sample User field.
**To set up customer layout options:**
::::WorkflowBlock
:::WorkflowBlockItem
On the left side menu, select **Administration**.
:::
:::WorkflowBlockItem
In the search bar under **Search for Admin Configuration Options**, enter **Customer Layout Options** and select the **Customer Layout Options** option that appears.
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/X-u6ApMNmA4SK2nOK8T2i_image.png" size="52" width="668" height="782" position="center" darkWidth="668" darkHeight="782" showCaption="false"}
:::
:::WorkflowBlockItem
On the **Customer Layouts** page that opens:
- to add a new layout, select **Create**
- to edit an existing layout, select the Edit icon in its corresponding row
::Image[]{src="https://api.archbee.com/api/optimize/zEVWKsZtpmpx-RIpALRPL/49TIeiRkUtOuxoCS4GMDJ_image.png" size="50" width="521" height="238" position="center" darkWidth="521" darkHeight="238" showCaption="false"}
:::
:::WorkflowBlockItem
On the **Customer Layouts** page that opens, enter or edit the following settings:
| Field | Description |
| ------------------------- | ---------------------------------------------------------------------------------------------- |
| Language | Select this layout's language |
| Name | Enter this layout's name |
| Sample Ticket Number | Enter the number of the ticket to be used in the preview |
| Sample User | (Read only) User used in the preview |
| Available #TOKENS# | [Tokens](docId\:LCVlwXpnZTfDpQg0NDa5-) available for this customer layout |
| Copy Token | Currently selected token available to be copied |
| Customer Title | Enter customer title in HTML format, using [tokens](docId\:LCVlwXpnZTfDpQg0NDa5-) |
| Customer Title CSS | (Optional) Use CSS to customize the appearance of the title line |
| Customer Details | Enter customer details in HTML format, using [tokens](docId\:LCVlwXpnZTfDpQg0NDa5-) |
| Customer Details CSS | (Optional) Use CSS to customize the appearance of the customer details |
| Center Text (first line) | Enter first line of center text in HTML format, using [tokens](docId\:LCVlwXpnZTfDpQg0NDa5-) |
| Center CSS (first line) | (Optional) Use CSS to customize the appearance of the center first line |
| Center Text (second line) | Enter second line of center text in HTML format, using [tokens](docId\:LCVlwXpnZTfDpQg0NDa5-) |
| Center CSS (second line) | (Optional) Use CSS to customize the appearance of the center second line |
:::
:::WorkflowBlockItem
Fill in or edit the [action icon](docId\:LCVlwXpnZTfDpQg0NDa5-) table.
1. To add an action icon, select **Add Icon Row**.
2. For each icon, enter or edit the following settings:
| Field | Description |
| ---------- | ------------------------------------------------------------------------------------------ |
| Active | Select if this icon is active:
- Yes
- No |
| Location | Select this icon's location:
- Center
- Customer area |
| Sequence | Enter this icon's sequential number |
| Icon Class | Enter the icon's class |
| Help Title | Enter help text to appear when hovering over the icon |
| URL | Enter the URL of the action corresponding to the icon (can include token, app, or session) |
3. To delete an icon, select **Delete Icon Row**.
:::
:::WorkflowBlockItem
Select **Save**.
:::
::::