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

Widget, müşterilerin Telegram üzerinden ve web sitenizden hizmetlerinizi rezervasyon yapması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 ayarlamanız gerekir. Bunu nasıl yapacağınızı "Rezervasyon Hizmeti Ayarları" makalesinde açıkladık.
{% endhint %}

Başlamak için, üst menüde bulabileceğiniz "Widgetlar" 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şturulmamışsa, "Widgetlar" bölümünün ekranın ortasında dört düğme görürsünüz.

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

"Online 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>

### Temel bilgiler

<figure><img src="/files/0d572607c34e1c61ca2ffbfbd9721ad56873f8e6" alt=""><figcaption></figcaption></figure>

Bu sekmede, widget adını (web sitesinde görüntülenecek) ve online rezervasyon widgetının görünmesini istediğiniz sitenin alan adını (site MaviBot ile oluşturulmamışsa) girmeniz gerekir. Site MaviBot oluşturucusu kullanılarak oluşturulmuşsa, alan adını belirtmenize gerek yoktur.
&#x20;Ardından, hizmetleri ve personeli widgetta gösterilecek olan şubeyi seçin:

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

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

<figure><img src="/files/2b634f0e90ea9d5cc68f0f35f7eba7e09312efe8" alt=""><figcaption></figcaption></figure>

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

Logo ve widget adı başlık kısmında görüntülenecektir:

<figure><img src="/files/4f53b62774ac9bc8c51480e19724f16926968799" alt="" width="563"><figcaption></figcaption></figure>

Ardından, widgeta bir başlık ve alt başlık girebilirsiniz; bunlar hizmet veya uzman seçim düğmelerinin üzerinde görünecektir:

<figure><img src="/files/73018f19afe47c91e7f2a617440debf9013c64cf" alt="" width="563"><figcaption></figcaption></figure>

**Widget Renk Şeması**

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

1. Widget arka planı:

<figure><img src="/files/433db7fda5c1ed55984b5649849c745b8ca2cbfb" alt="" width="349"><figcaption></figcaption></figure>

2. Widgetın ana marka teması, düğmeleri, fiyatları ve simgeleri seçilen renk şemasında gösterecektir:

<figure><img src="/files/350c7954bed14762d93ff139b707ac7afa5a2766" alt="" width="349"><figcaption></figcaption></figure>

3. Metin rengi: seçilen seçeneğe bağlı olarak düğme metninin veya ana metnin rengini değiştirir.

<figure><img src="/files/fe4de505f48b7f83191f5128e31b5cea3966c8f4" alt="" width="311"><figcaption></figcaption></figure>

4. Düğme metni:

<figure><img src="/files/cac2a325211f5b79ded3baa26b03d8ffb986d1ea" alt="" width="375"><figcaption></figcaption></figure>

Varsayılan olarak, düğmelerde şu metin görüntülenir **"Hizmetleri Seç"** ve **"Uzman Seç**", ancak metni istediğiniz gibi özelleştirebilirsiniz:

<figure><img src="/files/8fbb0aad6f3e435cd2298416cda0bf6801331d28" alt="" width="375"><figcaption></figcaption></figure>

Şimdi ayarlarınızı kaydedin:

<figure><img src="/files/69ebc7727f5f0f4da54e25b9223737869e69426f" alt=""><figcaption></figcaption></figure>

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

Site düzenleme moduna gidin:

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

Ardından, listede **"Online Rezervasyon"** bölümünü bulun ve ekleyin:

<figure><img src="/files/a2ddd8571e1fcadcc58f70c5fd57b160ea01f21b" alt="" width="351"><figcaption></figcaption></figure>

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

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

Gerekirse, widget bölümünün arka planını ve gösterim ayarlarını düzenleyebilirsiniz. Bunun için bölümün üzerine gelin ve **"Ayarlar"** düğmesine tıklayın:

<figure><img src="/files/20eb1f71c03540da169d4570d21e1207ef2da973" alt="" width="563"><figcaption></figcaption></figure>

İstediğiniz arka plan ve görünüm ayarlarını yapın:

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

Site ayarlarını kaydedin.
\
Artık müşterileriniz web sitenizi ziyaret ederek günün her saati kolayca hizmet rezervasyonu yapabilir:

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

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

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

<figure><img src="/files/9b014491c9c8db42ec95b29801c86ea8d8eb0cc7" alt="" width="375"><figcaption></figcaption></figure>

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

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

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

## Telegram Widgetı

Artık bir widgetı nasıl oluşturacağınızı ve web sitenize nasıl yerleştireceğinizi bildiğinize göre, Telegram'da bir **Web Uygulaması düğmesi** oluşturabilirsiniz; bu düğme sitenizi mesajlaşma uygulaması içinde bir uygulama olarak açar.

{% hint style="info" %}
Tam bir web sitesi yerine, online rezervasyon widgetını içeren tek bölümlük bir açılış sayfası oluşturabilir ve bunu Web Uygulaması düğmesini kullanarak Telegram düğmesi olarak müşterilerinizle paylaşabilirsiniz.
{% endhint %}

Şu işlevi kullanmanız gerekir `quiz_link(mini_landing_page_id, display_my_domain)`, ancak yalnızca `mini_landing_page_id` parametresi gereklidir.<br>

Ardından, hesaplayıcıda bir değişken atadığınız bir blok oluşturun (bu örnekte, değişkenin adı `booker_link`) ve şu işlevi kullanın `quiz_link(mini_landing_page_id)`, site sayfası kimliğini parametre olarak geçirin:

**1. Adım. İşlevli bloğu oluşturma**<br>

Oluşturucuda bir blok oluşturun ve hesaplayıcıda, değişkeni şu şekilde işlevle tanımlayın: booker\_link = quiz\_link('SİTE\_KİMLİĞİNİZ')

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

{% hint style="success" %}
Not!

Blok ayarlarını kaydetmeyi unutmayın.
{% endhint %}

**2. Adım. Gerekli site sayfası kimliğini bulun.** <br>

Site sayfası kimliğini bulmak için ilgili bölüme gidin:

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

İlgili sitenin kutucuğuna tıklayarak o sitenin sayfa ayarlarına gidin:

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

Ardından, oluşturduğunuz sayfanın bulunduğu satırın üzerine gelin **"Online Rezervasyon"** bölüm:

<figure><img src="/files/77005bfd06a670e15940c6b584539949a35b9748" alt=""><figcaption></figcaption></figure>

Kimliği kopyalayın ve huni oluşturucudaki bloğa yapıştırın:

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

**3. Adım. Oluşturucudaki bloğa bir düğme ekleyin.** <br>

Ardından, "Düğmeler" ayar sekmesini genişletin ("Düğmeler"e tıklayın) ve şuna tıklayın **"+ Düğme Ekle"**:

<figure><img src="/files/2ef2a96f877631ab8192ab3399f65c17a8781b81" alt=""><figcaption></figcaption></figure>

Tıkladıktan sonra, yeni bir düğme eklemek için düğme ayarları açılacaktır:

<figure><img src="/files/521a1fb6ffab2871f2e91e134f1dd84770525af3" alt=""><figcaption></figcaption></figure>

Burada şunları yapmanız gerekir:

* Düğme adını belirleyin: istediğiniz herhangi bir ad olabilir.
* Düğme işlevini belirleyin: bir Telegram Web App düğmesi olmalıdır.

<figure><img src="/files/2e5f8518804df33bbbbd0610ed396b83d8686cdb" alt=""><figcaption></figcaption></figure>

* Düğmeye tıklandığında siteyi açacak bağlantıyı belirtin:

Bağlantı, hesaplayıcı ve `quiz_link` işlevi kullanılarak zaten bir değişkende saklanıyor, bu nedenle URL alanına atanan değişkeni girin `booker_link` araya ekleme kullanarak — yani değişkeni `#{}`içine yerleştirerek; bu değişken sitenize ve widgetınıza ait bağlantıyı içerir.

<figure><img src="/files/7435fd41d661e977be895de4b77c43bfad2ef4f3" alt=""><figcaption></figcaption></figure>

Ardından, düğme ayarlarını kaydetmek ve bloğa eklemek için **“Ekle”** düğmesine tıklayın. Blok ayarlarının kaybolmaması için sonrasında **“Kaydet”** düğmesine tıkladığınızdan emin olun.

<figure><img src="/files/6a86d7962d0d489a47a6a890b42e4ed713b24b6d" alt="" width="563"><figcaption></figcaption></figure>

Tam yapılandırılmış blok şöyle görünür:

<figure><img src="/files/5649ec3f0c878a4d52b74cd6de448dfee58d34ba" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Faydalı ipucu!**\
Özellikle Web App düğmesi için koşullu bir blok (örneğin birincil koşul kontrolü veya konuşma başlangıcı gibi) oluşturmak gerekli değildir. Düğmeyi oluşturup `quiz_link` işlevini huninizin herhangi bir bloğuna ekleyebilirsiniz — ister durum bloğu, ister durum dışı blok vb. olsun (bkz. "Telegram Web App Düğmeli Diyalog Durum Bloğu" örneği).
{% endhint %}

<figure><img src="/files/fc514c29e6e309e30956515ac0a08c0486e91ee3" alt=""><figcaption><p>Örnek: Telegram Web App Düğmeli "Diyalog Durum Bloğu"</p></figcaption></figure>

Online rezervasyon widgetlı Web App düğmesi daha sonra botta kullanılabilir olacaktır:

<figure><img src="/files/45ada4cd26c7c1a423a4f2d9d9e89afb8272b73a" alt="" width="375"><figcaption></figcaption></figure>

## Rezervasyon Geri Çağrısı

Bir müşteri randevu aldıktan sonra, rezervasyonla ilgili bir geri çağrı bildirimi diyaloğa şu şekilde gönderilecektir:

<figure><img src="/files/900a9b23a496be5aedd16be7e50d6035b5d7d9d1" alt="" width="464"><figcaption></figcaption></figure>

<mark style="color:turuncu;">**new\_order\_in\_calendar**</mark> - geri çağrının değiştirilemez kısmı&#x20;

&#x20;<mark style="color:sarı;">**\[489046159]**</mark> - order\_id  rezervasyon kimliği

<mark style="color:kırmızı;">**Appointment\_date\_and\_time eklendi**</mark>

<mark style="color:mor;">**30 dakika için**</mark> - hizmet süresi&#x20;

<mark style="color:kırmızı;">**Nesneye: Test 30**</mark> - rezervasyonun hangi belirli nesneye eklendiği

Geri çağrı mesajının görünümü:

*new\_order\_in\_calendar: \[489046159] 2025-06-01 14:00 ile 2025-06-01 14:30 arasında 30 dakikalık bir randevu eklendi. Nesne: Test 30*

Geri çağrıya bir tepki, değeri bloğun koşulunda belirterek ayarlayabilirsiniz:

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

Blokta, müşteriye gönderilecek istenen yanıt mesajını belirtebilirsiniz.


---

# 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/settings/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.