# إضافة أداة إلى موقعك الإلكتروني

Source: https://instatus.com/help/ar/status-page/widgets

يوفر Instatus ثلاث طرق لعرض حالتك في موقعك الإلكتروني: أداة عائمة تظهر أثناء الحوادث، وشارة لتذييل موقعك، ونقطة نهاية `summary.json` لبناء أداة مخصصة.

لإضافة واحدة، انتقل إلى [dashboard.instatus.com](https://dashboard.instatus.com)، واختر صفحة الحالة الخاصة بك، وافتح **الأداة**، ثم اختر نوع الأداة وانسخ الكود.

| At a glance | Details |
| :-- | :-- |
| [الأداة العائمة](https://instatus.com/help/ar/status-page/widgets#كيف-أضيف-أداة-عائمة) | الألوان والموضع، وسكربت في جسم صفحتك |
| [الشارة](https://instatus.com/help/ar/status-page/widgets#كيف-أضيف-شارة-حالة-إلى-تذييل-موقعي) | فاتحة أو داكنة، ثلاثة أحجام، تُضمّن في التذييل |
| [أداة مخصصة](https://instatus.com/help/ar/status-page/widgets#كيف-أبني-أداة-مخصصة) | summary.json مع الحالة والحوادث وفترات الصيانة |

---

## كيف أضيف أداة عائمة؟

1. سجّل الدخول إلى Instatus من [instatus.com/login](https://dashboard.instatus.com/login) ثم اختر صفحة الحالة الخاصة بك.

2. انتقل إلى **الأداة ← عائمة**.

3. خصّص أداتك كما تحب باختيار:

- لون الخلفية
- لون المقدمة
- موضع الأداة بالنسبة إلى الصفحة

4. انسخ سكربت الأداة والصقه في جسم صفحة HTML لديك.

![](https://instatus.com/help/widget-floating-1.png)

ستظهر الأداة عند وقوع حادثة جديدة 🙀

---

## كيف أضيف شارة حالة إلى تذييل موقعي؟

1. سجّل الدخول إلى Instatus من [instatus.com/login](https://dashboard.instatus.com/login) ثم اختر صفحة الحالة الخاصة بك.

2. انتقل إلى **الأداة ← شارة**.

3. اختر الوضع الفاتح أو الداكن

4. اختر الحجم (صغير أو متوسط أو كبير) <span className="text-lg">🤏</span>

5. ضمّن التعليمات البرمجية في صفحة HTML لديك

![](https://instatus.com/help/widget-badge-1.png)

من المفترض أن ترى شارة في تذييلك 🥳

---

## كيف أبني أداة مخصصة؟

اجلب `summary.json` من صفحة الحالة للحصول على الحالة الراهنة والحوادث وفترات الصيانة النشطة كبيانات حية لأداتك الخاصة:

```markup
https://[YOUR-STATUS-PAGE]/summary.json
```

**مثال على الاستجابة:**

```json
{
  "page": {
    "name": "Instatus",
    "url": "https://instat.us",
    "status": "HASISSUES"
  },
  "activeIncidents": [
	{
      "name": "We're facing an issue with our API",
      "started": "Sat Jun 11 2022 18:55:50 (Coordinated Universal Time)",
      "status": "INVESTIGATING",
      "impact": "MAJOROUTAGE",
      "url": "https://testing-widget.instatus.com/incident/cl4a"
    }
  ],
  "activeMaintenances": [
    {
      "name": "Database maintenance",
      "start": "Sat Jun 11 2022 18:55:54 (Coordinated Universal Time)",
      "status": "NOTSTARTEDYET",
      "duration": "60",
      "url": "https://testing-widget.instatus.com/maintenance/cl4"
    }
  ]
}
```

حالات الصفحة الممكنة:

- `UP`
- `HASISSUES`
- `UNDERMAINTENANCE`

حالات الحوادث الممكنة:

- `INVESTIGATING`
- `IDENTIFIED`
- `MONITORING`
- `RESOLVED`

حالات الصيانة الممكنة:

- `NOTSTARTEDYET`
- `INPROGRESS`
- `COMPLETED`

يمكنك الآن الحصول على أداة مخصصة! 🥳

- [استخدام نطاق مخصص لصفحة Instatus الخاصة بك](https://instatus.com/help/ar/status-page/custom-domain): تعلّم كيفية استخدام نطاق مخصص لصفحة الحالة الخاصة بك.