# সাবস্ক্রিপশন ফর্ম উইজেটটি কাস্টমাইজ করুন

ডিফল্টরূপে, সাবস্ক্রিপশন ফর্ম উইজেটটি একটি নিউট্রাল স্টাইল ব্যবহার করে যা বেশিরভাগ পেজে কাজ করে। আপনি [এম্বেড কোড](/bn/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site) যোগ করার পরে, আপনি `pushwoosh-subscribe-widget` এলিমেন্টে CSS কাস্টম প্রপার্টি সেট করে এটিকে আপনার সাইটের ভিজ্যুয়াল আইডেন্টিটির সাথে মেলাতে পারেন। নিচের টেবিলের মানগুলি ডিফল্ট মানগুলিকে প্রতিস্থাপন করে।

<Aside type="caution" icon="setting" title="ডেভেলপারের সহায়তা প্রয়োজন">
আপনার ওয়েবসাইটে এই উইজেট স্টাইল পরিবর্তনগুলি প্রয়োগ করার জন্য আপনার ডেভেলপমেন্ট টিমের সহায়তার প্রয়োজন হতে পারে।
</Aside>

## রঙ কাস্টমাইজ করুন

| ভেরিয়েবল | বিবরণ | ডিফল্ট |
| --- | --- | --- |
| `--esw-primary-color` | বোতাম, লিঙ্ক এবং অ্যাকসেন্টের জন্য প্রাথমিক রঙ | `#0E72E5` |
| `--esw-primary-hover` | প্রাথমিক এলিমেন্টের হোভার রঙ | `#1A85FF` |
| `--esw-text-color` | মূল টেক্সটের রঙ | `#4B5057` |
| `--esw-text-secondary` | সেকেন্ডারি টেক্সট (প্লেসহোল্ডার, ক্যাপশন) | `#969CA3` |
| `--esw-background` | উইজেটের ব্যাকগ্রাউন্ড | `#FFFFFF` |
| `--esw-surface-color` | সারফেসের রঙ (হোভার, সেকেন্ডারি ব্যাকগ্রাউন্ড) | `#F7F9FA` |
| `--esw-border-color` | বর্ডারের রঙ | `#DCE1E5` |
| `--esw-border-color-focus` | ফোকাস অবস্থায় বর্ডারের রঙ | `#0E72E5` |
| `--esw-error-color` | ত্রুটির রঙ | `#E52E59` |
| `--esw-success-color` | সফলতার রঙ | `#479900` |
| `--esw-success-bg` | সফলতার বার্তার ব্যাকগ্রাউন্ড | `#F7F9FA` |

## টাইপোগ্রাফি

| ভেরিয়েবল | বিবরণ | ডিফল্ট |
| --- | --- | --- |
| `--esw-font-family` | ফন্ট ফ্যামিলি | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | বেস ফন্ট সাইজ | `14px` |
| `--esw-font-size-title` | টাইটেলের ফন্ট সাইজ | `18px` |
| `--esw-font-size-label` | ফিল্ড লেবেলের ফন্ট সাইজ | `12px` |
| `--esw-font-size-small` | ছোট টেক্সট (ত্রুটি, নোট) | `12px` |
| `--esw-font-weight-regular` | রেগুলার ওয়েট | `400` |
| `--esw-font-weight-medium` | মিডিয়াম ওয়েট | `500` |
| `--esw-font-weight-bold` | বোল্ড ওয়েট | `700` |
| `--esw-line-height-base` | বেস লাইন হাইট | `1.4` |
| `--esw-line-height-title` | টাইটেলের লাইন হাইট | `1.2` |

## সাইজ এবং স্পেসিং

| ভেরিয়েবল | বিবরণ | ডিফল্ট |
| --- | --- | --- |
| `--esw-input-height` | ইনপুট ফিল্ডের উচ্চতা | `36px` |
| `--esw-button-height` | বোতামের উচ্চতা | `36px` |
| `--esw-spacing-xs` | অতিরিক্ত ছোট স্পেসিং | `4px` |
| `--esw-spacing-sm` | ছোট স্পেসিং | `8px` |
| `--esw-spacing-md` | মাঝারি স্পেসিং | `16px` |
| `--esw-spacing-lg` | বড় স্পেসিং | `24px` |
| `--esw-popup-width` | মোডাল উইডথ | `380px` |
| `--esw-popup-max-width` | মোডাল সর্বোচ্চ উইডথ | `90vw` |

## অ্যাপিয়ারেন্স

| ভেরিয়েবল | বিবরণ | ডিফল্ট |
| --- | --- | --- |
| `--esw-border-radius` | এলিমেন্টের জন্য কর্নার রেডিয়াস | `4px` |
| `--esw-border-radius-popup` | মোডাল কর্নার রেডিয়াস | `8px` |
| `--esw-shadow-popup` | মোডাল বক্স শ্যাডো | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## উদাহরণ

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="Style attribute">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>