> ## Documentation Index
> Fetch the complete documentation index at: https://codking.tech/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the OTP Popup

> Change the logo, button labels, wording and error messages of the OTP popup, decide which store pages it runs on, and use the live preview to test every screen.

Everything a shopper reads in the OTP popup is edited in **UI customization**, with a live preview beside the form.

## Open the editor

**1. Go to Settings → UI customization**

It is under **Checkout widget** in the COD King left menu.

**2. Click Customize**

A full-screen editor opens. The tabs across the top are **Logo and colours**, **Order summary**, **Delivery address**, **Coupons**, **Pop-up messages**, **Phone number screen**, **Verify code screen**, **Payment screen**, **Where it runs** and **Advanced**.

> [!NOTE]
>
> Text boxes become editable once OTP verification is on. While it is off, the editor shows a **Turn on OTP verification to customize the checkout copy** box with a checkbox, and the defaults are greyed out. A blank box keeps the default wording, and `{{curly braces}}` fill in automatically.

## The live preview

The right-hand **Live preview** shows what a shopper sees and updates as you type. It is a sandbox: nothing is sent to customers and no orders or discounts are created. Click through it like a customer and use the test code `1234`.

## Logo and colours

![Logo and colours tab with the Turn on OTP verification checkbox and the Brand Logo URL field](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-40-uicust-logo.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=5fb6dddd9a3277ac20b30f904b37eb85)

| Setting | What it does |
| - | - |
| **Store Name** | Shown beside your logo at the top of the popup. |
| **Brand Logo URL** | A direct link to a `.png` or `.jpg` logo. It appears at the top of the popup. |
| **Brand color** | Used for the buttons on the exit confirmation sheet. Leave the default to keep the standard blue. |

## Phone number screen

The first screen, where the shopper types their number.

![Buttons and fields on the Phone number screen tab](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-41-phone-buttons.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=309983be97019ce15321205e611a624a)

| Setting | What it does |
| - | - |
| **Send Code Button label** | The main button that sends the code by SMS. |
| **Phone number placeholder** | The grey hint inside the empty phone field. |

![WhatsApp and Skip verification settings](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-42-whatsapp-skip.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=aed8e13ac6052d264c4d566481912f15)

| Setting | What it does |
| - | - |
| **Enable Whatsapp button** | Adds a WhatsApp button beside **Send Code** as another way to receive the code. |
| **Show WhatsApp as the main button** | Makes WhatsApp the highlighted button and moves **Send Code** below it. Applies when both are on. |
| **Show Skip Button** | Lets customers skip OTP verification and place a non-COD order directly. |

![Phone number screen text boxes](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-43-phone-text.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=d19a72218474010dd27ce4d31dfb9e5f)

The **Phone number screen** card holds the words on this screen:

* **Heading** (default *Enter mobile number*) and **Line under the heading** (default *Provide your mobile number to continue*).
* **Heading over a saved number** (default *Continue with*), shown when the shopper has a saved number.
* **Label over SMS and WhatsApp** (default *Send OTP via*).
* **Close button** (default *Close*).

## Verify code screen

Where the shopper types the code you sent.

![Messages on this screen on the Verify code screen tab](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-44-verify-top.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=209cd96f379535d4ef3306ace3ecd0b5)

| Setting | Default | Where it appears |
| - | - | - |
| **Verify Phone Number Heading** | Verify Mobile Number | Heading of the screen |
| **Enter the code sent to text** | Enter the code sent to | Before the shopper's number |
| **Retry in text** | Didnt receive the Code? Retry in | Beside the countdown before the code can be sent again |
| **Verifying button text** | Verifying | On the button while the code is being checked |

![Error messages on the Verify code screen tab](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-45-errors.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=7b3921b74fb14d3ec2799b6e13263d36)

**Error messages**

* **Invalid OTP message** (default *Invalid OTP*) is shown when the code entered is wrong.
* **Error message for invalid phone number** (default *Please enter a valid 10-digit phone number.*) is shown under the phone field when the number does not look valid.

![Verify code screen labels](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-46-verify-text2.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=4207b88ba22d19a2b9d27ef973c3bc6f)

The **Verify code screen** card holds the labels around the code box:

* **Label over the resend choices** (default *Resend OTP via*).
* **Name for SMS** (default *SMS*).
* **Start over with another number** (default *Not you?*).
* **Back to the phone number screen** (default *Go to Phone Screen*).

## Where it runs

![Where it runs with three options](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-47-where-runs.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=420ae81eb716788b676488855e4e178f)

The widget loads on every page of your store. Leave it out of pages where you do not want it, and checkout buttons behave normally there.

* **All pages (recommended).**
* **All pages except the ones I select.**
* **Only the pages I select.**

When you choose a list option, a **Run only on these pages** list appears.

![Page checklist for Where it runs](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-48-pages.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=497444ea35749930605490d51e8e75ef)

You can tick page types such as **Home page**, **Product pages**, **Collection pages**, **All collections page**, **Cart page**, **Search results**, **Static pages (About, FAQ...)**, **Blog listing**, **Blog posts**, **Policy pages**, **Customer account**, **Customer login**, **Customer register**, **Customer order status**, **Customer addresses**, **Password page**, **Gift card page** and **404 page**.

![Specific URLs box](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-49-urls.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=3a1ec5e75ac1b55153e8e193eba0ac1d)

**Specific URLs** takes one path per line, without your domain, for example `/pages/about`. Use `*` at the end to match everything below it, so `/pages/*` covers every static page. You can add up to 50 paths. If nothing is selected, the widget keeps loading on all pages.

## Advanced

![Advanced tab with Open the popup instantly on Buy Now](https://mintcdn.com/codking/RvTbwbfi1Bd20aoj/images/otp-50-advanced.png?fit=max\&auto=format\&n=RvTbwbfi1Bd20aoj\&q=85\&s=10ccce6f9ffe290e67be5ab759d727d9)

* **Open the popup instantly on Buy Now.** The popup appears straight away and loads the cart and payment options behind it. Turn it off to open the popup only once everything has loaded.
* **Translate everything at once.** Click **Load current text** to get every label as JSON, translate the values, then paste the result back and apply it. A value left at the English default is stored as a default rather than an override.

> [!WARNING]
>
> Click **Save** in the bar at the top after you edit. Unsaved changes are lost when you leave the editor.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.