# Web sitesi için çevrimiçi rezervasyon widget'ı

Widget, müşterilerin Telegram üzerinden ve web sitenizden hizmetlerinizi rezervasyonla almasına yardımcı olur.

<div data-with-frame="true"><figure><img src="/files/dc4bb1f711f654169e2a48821d7a5515919c409c" alt="" width="563"><figcaption></figcaption></figure></div>

Widget, hem MaviBot ile oluşturulmuş bir web sitesine hem de diğer oluşturucularla hazırlanmış bir açılış sayfasına entegre edilebilir.

## Widget nasıl oluşturulur

{% hint style="info" %}
İlk olarak, bir şube oluşturmanız ve hizmetleri çalışanlara atayarak yapılandırmanız gerekir. Bunun nasıl yapılacağını "Rezervasyon Hizmeti Ayarları" makalesinde açıkladık.
{% endhint %}

Başlamak için, üst menüde bulabileceğiniz "Widget'lar" bölümüne gidin.

<div data-with-frame="true"><figure><img src="/files/de7cbf97196340824ee1c4a76be259fae6eedf70" alt="" width="563"><figcaption></figcaption></figure></div>

Projede henüz hiç widget oluşturulmadıysa, "Widget'lar" bölümünde ekranın ortasında dört düğme göreceksiniz.

<div data-with-frame="true"><figure><img src="/files/2e507be9287b961a56618ecafef7f11deb492c70" alt=""><figcaption></figcaption></figure></div>

"Çevrimiçi Rezervasyon Widget'ı" düğmesine tıklayın; widget ayarlarına yönlendirileceksiniz.

<div data-with-frame="true"><figure><img src="/files/de5429bc91707fd2fbe32d66d9b4bf5e71587d90" alt=""><figcaption></figcaption></figure></div>

### Ana bilgiler

Bu sekmede, widget adını (web sitesinde görüntülenecek) ve çevrimiçi rezervasyon widget'ının görünmesini istediğiniz sitenin alan adını (site MaviBot ile oluşturulmamışsa) girmeniz gerekir.&#x20;

<figure><img src="/files/8207d20efd935dbf5d5e1ce8c88c93236649c8c0" alt="" width="563"><figcaption></figcaption></figure>

Site MaviBot oluşturucusu kullanılarak oluşturulduysa, “Siteler” sekmesini açın ve MaviBot site bağlantınızı kopyalayın.

<div data-with-frame="true"><figure><img src="/files/d7fe24ac5a3529ef1b8602a0747396ef4b6bac3c" alt="" width="563"><figcaption></figcaption></figure></div>

&#x20;Ardından, hizmetleri ve personeli widget'ta gösterilecek şubeyi seçin.

<div data-with-frame="true"><figure><img src="/files/d990867ec72eca589d602493ca70b58d0fd49359" alt="" width="563"><figcaption></figcaption></figure></div>

Ayrıca bir gizlilik politikası bağlantısı ve veri onayı bağlantısı ekleyebilirsiniz.

<div data-with-frame="true"><figure><img src="/files/d452704df1bc3e98b54f1c7867fe5108b0f069eb" alt="" width="563"><figcaption></figcaption></figure></div>

Şimdi widget'ı özelleştirmeye geçebilirsiniz.

### Analitik

Analitik etkinlikleri de ayarlayabilirsiniz.

<div data-with-frame="true"><figure><img src="/files/0377589cc1be6a44a30e875b5077d5400a6d9b2b" alt=""><figcaption></figcaption></figure></div>

Bunun için ilgili alana Facebook Pixel, Google Analytics veya Metrica kimliğini girin ve etkinlik değerini belirtin.

<div data-with-frame="true"><figure><img src="/files/b4fb2fe6291cc6c7801168a88418768852f9975a" alt="" width="325"><figcaption><p>Örneğin, verilerin nasıl girileceği</p></figcaption></figure></div>

### Görünüm Ayarları

<div data-with-frame="true"><figure><img src="/files/85db84e7288b400537813f96fc8df0b44a62b8a0" alt=""><figcaption></figcaption></figure></div>

Logo ve widget adı başlığında görüntülenecektir.

<div data-with-frame="true"><figure><img src="/files/42fbe6cb2800c28ea7d8e6f2321347587d3b91a9" alt="" width="375"><figcaption></figcaption></figure></div>

Ardından, widget'a hizmet veya uzman seçim düğmelerinin üzerinde görünecek bir başlık ve alt başlık girebilirsiniz.

<div data-with-frame="true"><figure><img src="/files/15827db882d2d135813d417e86d52456812132b1" alt="" width="375"><figcaption></figcaption></figure></div>

**Widget Renk Şeması**

Widget'ın renk şemasını tercihinize göre seçebilirsiniz:

1. Widget arka planı:.
2. Widget'ın ana marka teması, seçilen renk şemasında düğmeleri, fiyatları ve simgeleri gösterecektir.
3. Metin rengi: seçilen seçeneğe bağlı olarak düğme metninin veya ana metnin rengini değiştirir.
4. Düğme metni.

<div data-with-frame="true"><figure><img src="/files/8eeab126e6b52e2c97279afad453cd8bfcf2b123" alt=""><figcaption></figcaption></figure></div>

Varsayılan olarak, düğmeler şu metni gösterir **"Hizmetleri Seçin"** ve **"Uzman Seç**", ancak metni istediğiniz gibi özelleştirebilirsiniz:

### Widget'ı web sitenize nasıl yerleştirirsiniz

Web sitesi düzenleme moduna gidin.

<div data-with-frame="true"><figure><img src="/files/aeb4a8a3a840bb4efbd499db242db494e81805ba" alt=""><figcaption></figcaption></figure></div>

Ardından, liste içinde **"Çevrimiçi Rezervasyon"** bölümünü bulun ve ekleyin.

<div data-with-frame="true"><figure><img src="/files/7423b3304c336a2a20781dada4ae95e7f1f1b3ef" alt=""><figcaption></figcaption></figure></div>

İçerik ayarlarında, sitede hangi widget'ın gösterileceğini seçin (birden fazla çevrimiçi rezervasyon widget'ınız varsa).

<div data-with-frame="true"><figure><img src="/files/df27f3861940cb7d004b0e519d876a09d8ca1a5b" alt=""><figcaption></figcaption></figure></div>

Gerekirse, widget bölümünün arka planını ve görüntüleme ayarlarını düzenleyebilirsiniz. Bunu yapmak için bölümün üzerine gelin ve **"Gelişmiş ayar"** sekmesine tıklayın.

<div data-with-frame="true"><figure><img src="/files/87de3c3dde0a51ed4bcff1caab27e8a5aa9a8879" alt="" width="375"><figcaption></figcaption></figure></div>

İstediğiniz arka plan ve görüntüleme ayarlarını belirleyin.

<div data-with-frame="true"><figure><img src="/files/b0122ed76af6525df28b19cf6a4a8b5ff8e46768" alt="" width="375"><figcaption></figcaption></figure></div>

Site ayarlarını kaydedin.
\
Şimdi müşterileriniz web sitenizi ziyaret ederek günün her saati kolayca hizmet rezervasyonu yapabilir&

**Widget'ı başka bir web sitesine nasıl yerleştirirsiniz**

Widget'ı kaydettikten sonra, widget betiğini ve bölüm adını girmek için bir alanı içeren aşağıdaki bloğu görmek için sayfayı yenileyin.

<div data-with-frame="true"><figure><img src="/files/a159f73f37b4f571a810ecd8009ad7f22ab9e60b" alt="" width="563"><figcaption></figcaption></figure></div>

Kodu web sitenize yerleştirmeniz gerekiyorsa, betiği kopyalayın ve açılış sayfanıza yapıştırın.

Widget'ı MaviBot ile oluşturulmamış kendi sitelerinizde kullanıyorsanız, verilen alana öğe sınıfını girdiğinizden emin olun.

<div data-with-frame="true"><figure><img src="/files/8bab33459e480fdce06e26be96485a09910439d5" alt="" width="563"><figcaption></figcaption></figure></div>


---

# 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.mavibot.ai/doc/tr/booking/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.