> For the complete documentation index, see [llms.txt](https://docs.centousapps.com/insureful/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.centousapps.com/insureful/app-set-up/custom-widget.md).

# Custom widget

**Note: Some features only work with the upgraded plan.**

### **Step 1: Enable the App**

* Turn on the app using the **Enable** button.
* You can change the **title** of the protection plan—or keep the default title provided.
* Add **descriptions** for both scenarios:
  * When the insurance option is **selected**.
  * When the insurance option is **deselected**.

<figure><img src="/files/PP7jqwZGJ0ipahDpAMYF" alt=""><figcaption></figcaption></figure>

### **Step 2: Update the Insurance Product**

* Change the **image** of the insurance product if needed.
* Customize the **title** and **description** based on your preferences and requirements.

<figure><img src="/files/f50wylK5oGQooDhuYlby" alt=""><figcaption></figcaption></figure>

### **Step 3: Enable Auto Add to Cart**

* Activate the **Auto Add to Cart** feature.\
  This allows the insurance protection to be automatically added to the customer’s cart without requiring manual selection.

<figure><img src="/files/ADk35BSqD7ibJibnJ7mb" alt=""><figcaption></figcaption></figure>

### **Step 4: Choose Fulfillment Type**

* Decide how the protection plan should be fulfilled after the order is placed.\
  You can choose between:
  * **Immediately after purchase (shipping protection will fulfill automatically after purchase)**
  * **Manual fulfillment (Customer have to manually fulfill shipping protection)**

<figure><img src="/files/B2oJDmPr7W0o7yI4cHeu" alt=""><figcaption></figcaption></figure>

### **Step 5: Update Product Image**

* You can change the **product image** displayed to customers as per your preference.

<figure><img src="/files/SzBRm56LW2IB4MNrPgLO" alt=""><figcaption></figcaption></figure>

### **Step 6: Select Insurance Widget Template**

* Choose your preferred **widget template** from the available design options.

<figure><img src="/files/Lak91Hxdl5GcZA6XlYKj" alt=""><figcaption></figcaption></figure>

### **Step 7: Configure Input and Reason Options**

* Decide whether the **image upload field** is required or optional.
* Allow customers to provide a reason using one of two input types:
  * **Textarea** (for free-text responses)
  * **Dropdown** (for predefined reasons)

<figure><img src="/files/ZcJccPG65XSOW9dzgjwO" alt=""><figcaption></figcaption></figure>

### **Step 8: Manage Default Reasons (for Dropdown Option)**

* If you select the **Dropdown** option, customers will see five default reasons to choose from.
* These reasons can be customized based on your needs.

**Default Reasons:**

1. The customer’s package was delivered but got stolen.
2. The package did not arrive within the expected timeframe.
3. The package was delivered to the wrong address.
4. The package was lost.
5. The package was damaged during shipping.

<figure><img src="/files/tOc7YJ5TAsh9ROPQThVY" alt=""><figcaption></figcaption></figure>

### **Step 9: Customize Widget Appearance**

* Adjust the **Widget Space Settings**, such as
  * Icon size
  * Inner spacing
  * Outer spacing
* Modify **Font Settings**, including:
  * Heading font size
  * Subheading font size
* Customize **Container Settings**, such as
  * Border radius
  * Border size
* Select **colors** that match your store’s theme.\
  These customization options allow you to align the widget’s look and feel with your store’s branding.

<figure><img src="/files/o3wsG8g4bHh8pJhbhgR5" alt=""><figcaption></figcaption></figure>