# Widget

The Widget section gives you complete control over how your subscription options appear to customers on product pages. From choosing layouts and color schemes to controlling which countries can see subscription offers, Widget customization helps you create a branded, targeted subscription experience.

### Key Features

{% tabs %}
{% tab title="Visual Customization 🎨" %}

* **5 Layout Options:** Choose how information is organized and displayed
* **8 Color Templates:** Preset themes that match different brand aesthetics
* **Custom Colors:** Match your exact brand colors
* **Border Radius:** Square, curved, or rounded corners
* **Custom CSS:** Advanced styling for complete control
  {% endtab %}

{% tab title="Display Settings 🎭" %}

* **Price Options:** Show or hide compare-at pricing
* **Subscription Description:** Always show or hover to reveal
* **Live Preview:** See changes in real-time as you customize
  {% endtab %}

{% tab title="Country Availability 🌎 " %}

* **Geographic Control:** Choose which countries see subscription options
* **IP-Based Detection:** Automatic country identification
* **Smart Fallback:** Widget displays if location cannot be determined

{% hint style="warning" %}
This feature is only available for **Advanced plan**.
{% endhint %}
{% endtab %}
{% endtabs %}

### Why need Country Availability 

Many merchants want to offer subscriptions only in specific countries due to:

| 🌎 Fulfillment limitations                        | 🚚 Logistics challenges                                        | ♟️ Regional business strategy                         |
| ------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------- |
| Shipping partnerships limited to certain regions  | International shipping costs making subscriptions unprofitable | Testing subscriptions in home market before expanding |
| Warehouse locations serving specific countries    | Customs and import restrictions                                | Different model strategies by region                  |
| Delivery time constraints for perishable products | Complex cross-border regulations                               | Local competition requiring different approaches      |

### Layout Customization

#### Choosing Your Layout

Joy Subscriptions offers **5 widget layouts** to fit different product page designs:

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

#### Template Colors

Choose from **8 preset color templates** designed for different brand aesthetics or you can customize it yourself.

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

#### Border Radius

Choose the corner style for your widget elements

<figure><img src="/files/9gji5lIReNexySuhWskk" alt=""><figcaption></figcaption></figure>

#### Display settings

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

### Country Availability (Advanced Plan only)

**Country Availability** lets you control which countries can see and purchase subscription options based on customer location.

#### How It Works

**IP-Based Detection:**

1. Customer visits your product page
2. System detects their IP address
3. IP address is matched to a country
4. Widget displays or hides based on your settings

**Display Logic:**

| Customer Location      | Widget Behavior                 |
| ---------------------- | ------------------------------- |
| Selected country       | Widget displays normally        |
| Non-selected country   | Widget completely hidden        |
| Cannot detect location | Widget displays (safe fallback) |

#### Setting Up Country Availability

{% stepper %}
{% step %}
**Access Country Availability**

* Go to **Widget** in Joy Subscriptions
* Scroll to the **"Country availability"** section
  {% endstep %}

{% step %}
**Select Countries**

* Click **"Select"** button (or **"Edit"** if you've already configured it)
* Choose from two methods:
  * **Method A: Select Individual Countries**
    * Check boxes next to countries where you want to offer subscriptions
    * Search for specific countries if needed
  * **Method B: Select Regions**
    * Choose entire regions (e.g., "European Union", "North America")
    * All countries in that region are automatically selected
      {% endstep %}

{% step %}
**Review and Save**

* Review your selected countries/regions
* Click **Save**
  {% endstep %}
  {% endstepper %}

Check this interactive demo to see the steps in actions.

{% embed url="<https://app.arcade.software/share/MHQbJr0EfmFzwNlGaTuq/YbF7wWMMuCbosZ4wfUV4>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avada.io/joy-subscriptions/features/widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.