> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.omegatheme.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Widget customization

D: Rental Booking Appointment offers 2 widget types with different customer interactions. Only one can be active at a time.

## Popup Booking Widget

![Popup Booking Widget](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_4o0d97.png)


Replaces the *Add to Cart* button with **Book Now**. When customers click, the full booking flow opens in a popup right on the product page — they stay on the same page, no redirect.

## On-page Booking Widget

![On-page Booking Widget](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1lg4zz6.png)


Displays the **calendar and booking form directly** below the Add to Cart button on the product page — customers see the calendar immediately without clicking anything.

## Switch between the two

1. Go to the **Widget** tab in the left sidebar.
2. You'll see two cards: **Popup Booking Widget** and **On-page Booking Widget**.
3. The active one is labeled `Enabled` in green.
4. Click **Enable** on the one you want — the other auto-disables.
# Widget Appearance — Color, Border & Calendar

Customize the colors, borders, calendar, and time slots of the widget through 2 tabs: **Popup Design** and **Calendar**.

## Open the Edit appearance tool

1. Go to the **Widget** tab in the left sidebar.
2. On the active widget card, click **Edit appearance**.
3. The customizer opens with 3 tabs: **Popup Design**, **Calendar**, **Text**.

## Tab 1 — Popup Design

![Popup Design tab — all customizable fields](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_y81exl.png)


### Color tokens

| Field | Affects |
| ---- |
| **Background popup colour** | Background of the popup / widget container |
| **Background calendar colour** | Background of the calendar area |
| **General text colour** | General text color |
| **Selected option** | Background of the selected option |
| **Selected option text color** | Text color of the selected option |
| **Confirm button color** | Confirm button background |
| **Confirm button text color** | Confirm button text |

### Border design

| Field | Affects |
| ---- |
| **Border popup size** | Slider 0–100. Border radius of the popup corners. |
| **Capacity** | Slider 0–100. Opacity of the dark overlay behind the popup. |
| **Border colour** | Popup border color. |

### Service description

Toggle **Service description** on + enter a **Value** to display the service description inside the widget.

### Advanced customization (CSS)

A textarea for advanced custom CSS — use it when the available options aren't enough.

## Tab 2 — Calendar

![Calendar tab — combined Calendar, Time format, Slot design groups](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1wulfpp.png)

### Calendar — Day state colors

| Field | Affects |
| ---- |
| **Text color day picked** | Number color of the picked day |
| **Day picked** | Background of the picked day cell |
| **Today color** | Highlight color for today |
| **Available day background** | Background of available days |
| **Available day text color** | Text color of available days |
| **Unavailable day text color** | Text color of unbookable days |
| **Dates within selected range** | Background of dates inside the selected range (Multiple-day) |

### Time format

| Field | Affects |
| ---- |
| **Time format selected** | Color of the selected format (24h or AM/PM) |
| **Unavailable time format** | Color of the unselected format |

### Slot design

| Field | Affects |
| ---- |
| **Slot background** | Background color shared by all slots |
| **Slot text color** | Text color inside slots |
| **Selected Timeslot background** | Background of the selected slot |
| **Selected Timeslot text color** | Text color of the selected slot |
| **Selected slot badge background** | Background of the "X slot left" badge |

# Widget Text & Localization

The widget defaults to English. The Text tab lets you change every label displayed in the widget — no code required.

## Open the Text tab

1. Go to **Widget** → on the active widget card, click **Edit appearance**.
2. Choose the **Text** tab (third tab).

![Text tab — all customizable labels](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/image_1r13gfv.png)

## Section 1 — Product page

| Field | Description |
| ---- |
| **Replace "Add to Cart" button** | Button text replacing *Add to Cart* on the product page |

## Section 2 — General text

| Field | Default | Translation suggestion |
| ---- |
| **Time slot duration needed** | *Time slot duration needed* | *Choose duration* |
| **Shipping method selector** | *Shipping method* | *Delivery method* |
| **Quantity selector** | *Quantity* | *Quantity* |
| **Confirm booking title** | *Confirm booking* | *Confirm your booking* |
| **Time slot selector** | *Available time slots* | *Pick a time* |
| **Customer's timezone** | *Your timezone* | *Your timezone* |
| **Confirm button** | *Confirm Booking* | *Confirm* |
| **Booking confirmed** | *Your booking is confirmed!* | *Booking confirmed!* |
| **Total text** | *Total* | *Total* |
| **Pre-pay text** | *Pre-payment* | *Deposit* |

## Section 3 — Workshop service *(Workshop only)*

| Field | Translation suggestion |
| ---- |
| **Participant chosen** | *Participants* / *Students* |

## Section 4 — Consulting / Demo *(coming soon)*

| Field | Translation suggestion |
| ---- |
| **Platform confirmed** | *Meeting link sent to your email* |
| **Platform linked** | *Meeting platform* |

## Multi-language

D: Rental Booking Appointment does not currently support an automatic multi-language switcher. The Text tab holds only one set of labels.

**Workarounds:**
* Use Shopify Markets with separate stores per region → configure a separate Text set in each store.
* Theme translation apps (Translate & Adapt, Langshop) → D: Rental Booking Appointment text is not auto-translated.

## Save

Click **Save** in the top right. Changes take effect immediately.

## Save changes

Click **Save** in the top right.