# Tracking Page

Source: https://gokarla.io/docs/guides/portal/tracking-page

# Tracking Page

The **Tracking Page** section is the visual editor for your customer-facing
tracking page. You see a live preview of the page, change layout, style, and
content in the settings panel next to it, and publish when you're happy — no
code required.

**Recommended for:** Marketing, Tech

To learn what the tracking page itself does for your customers, start with the
[Tracking Page guide](/docs/guides/tracking-page/overview). This page covers
the editor in the portal.

## Preview and Production

Two tabs at the top switch between editing and inspecting:

- **Preview** shows your current draft on an example order — including changes
  you haven't published yet. A phase selector switches the example between
  **Shipped** and **Delivered**, and a language selector renders the page in
  any of your supported languages.
- **Production** shows what customers see right now. Search for a specific
  order, or pick a customer segment to load a real tracking page from that
  segment, and use **Open live page** to open it in a new browser tab.

In both tabs, a device selector switches the frame between desktop, tablet,
and mobile — useful because layout and some settings differ per device.

## The settings panel

In the Preview tab, the **Settings** panel sits next to the preview (use the
**Settings** button to show or hide it). Clicking a widget in the preview
jumps straight to its settings. The panel contains:

### Customise colours

Opens the **Brand Colors** dialog, where you manage the colour palette all
other sections pick from. Define your brand colours once here, then map them
to widgets, banners, and buttons below.

### Banner Promotion

Only shown while previewing mobile. Sets the colours (background, text,
button, and button text) of the mobile banner shown when a
[banner promotion campaign](./campaigns#banner-promotions) is active.

### Notification Banner

A dismissible announcement bar on the tracking page. Toggle it on, choose
which countries see it (leave empty for all — useful for shipping notices that
only affect certain destinations), optionally show a CTA with a link URL, and
map its colours. The banner text itself is edited in
[Customise Text](./customise-text).

### Widget layout

The list of widgets on your tracking page, in display order:

- Toggle widgets on or off, and drag them to reorder. Mobile and desktop keep
  separate arrangements, so switch the device selector to arrange both.
- Click a widget to open its per-widget settings.
- **Main Promotion** and **Product Promotion** are always available — they
  appear on the page whenever a matching [campaign](./campaigns) is active.
- Some widgets are enabled by the Karla team on request — if a widget's toggle
  is locked, contact us to enable it.

For what each widget shows to your customers, see the
[Tracking Page guide](/docs/guides/tracking-page/overview).

### Style

Page-wide look and feel: font, button corner radius and font weight, widget
corner radius, and the page background colour.

### Order Finder

The standalone page where customers look up their order by order number and
zip code. Configure its background (a palette colour or an image with
alignment) and colours, and use **Preview Order Finder** to open it.

### Advanced

- **Order identifier** — which order reference (order number, order name, or
  external ID) is shown in the order summary and shipment tabs.
- **Allowed Domains** — the domains permitted to embed your tracking page.

### Page Metadata

The browser-facing details of the page: title, description, and favicon URL.

## Saving and publishing

Edits stay local until you publish. As soon as you change something, a bar
appears with **Discard** and **Save**:

- **Discard** reverts to the last published state.
- **Save** publishes after a confirmation — changes are applied to all your
  tracking pages in production immediately.

:::tip Check both devices before publishing
Widget arrangement is stored separately for mobile and desktop. After
reordering or toggling widgets, flip the device selector to confirm both
layouts look right, then publish once.
:::