Calendly Embed Generator

Calendly bağlantınızı yapıştırın ve randevu takviminizi web sitenize, rengiyle ve göstermek istediğiniz ayrıntılarla yerleştiren ücretsiz bir gömme kodu alın. Kayıt gerekmez.
Calendly Embed Generator
Planlama sayfanız ya da tek bir etkinliğin bağlantısı, örn. https://calendly.com/your-name/30min
En az 630 px; böylece takvim kendi içinde kaymaz.

Randevu sayfasını gömün

<div class="calendly-inline-widget" data-url="https://calendly.com/calendly-demo" style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;"><a href="https://tr.elfsight.com/tools/calendly-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a> ile oluşturuldu</p>

  1. Kopyalamak için yukarıdaki Kodu kopyala düğmesine tıklayın.
  2. Sayfanın HTML dosyasını veya şablonunu açın.
  3. Kodu, içeriğin görünmesini istediğiniz yere, <body> içine yapıştırın.
  4. Sayfayı kaydedip yükleyin, ardından kontrol etmek için tarayıcıda açın.
Appointment Booking widget'ı

Randevuları doğrudan web sitenizde alın

Gerçek zamanlı müsaitliği gösterin ve telefon, e-posta ya da elle koordinasyon olmadan randevu kabul edin. Hizmetler, fiyatlar ve süreler tek bir kartta durur; müşteriler saniyeler içinde randevu alır.

  • Günün her saati randevu

  • Fiyat ve süre bilgisiyle hizmetler

  • İki yönlü Google Calendar senkronizasyonu

Widget'ı ücretsiz oluşturun
Kredi kartı gerekmez
Appointment Booking hakkında bilgi edinin

Oluşturucu ile Calendly'nin Share → Add to website seçeneği

İkisi de aynı komut dosyasıyla Calendly'nin resmi gömme kodunu üretir. Fark, kodu nerede oluşturduğunuz ve elle kod düzenlemeden hangi seçenekleri ayarlayabildiğinizdir.
Calendly'nin Share → Add to website seçeneği
Bu oluşturucu
Kodu nerede oluşturursunuz
Calendly hesabınızın içinde
Burada, herhangi bir herkese açık planlama bağlantısından, oturum açmadan
Gömme türleri
Satır içi gömme, açılır pencere widget'ı, açılır pencere metni
Aynı üçü: satır içi, bir düğme ya da bağlantıdan açılır pencere, yüzen rozet
Etkinlik ayrıntılarını ve çerez bannerını gizleme
Kodu kopyalamadan önce onay kutuları
hide_event_type_details=1 ve hide_gdpr_banner=1 ekleyen anahtarlar
Adı ve e-postayı önceden doldurma
Bağlantıyı elle düzenleyin ya da Calendly'nin JavaScript prefill seçeneğini kullanın
Bağlantıya name=, email= ve a1= ekleyen alanlar
Renkler
Ücretli planlarda arka plan, metin ve düğme renkleri
Aynı renk parametrelerini yazar; Calendly bunları yalnızca ücretli planlarda uygular

Kodu nerede oluşturursunuz

Calendly'nin Share → Add to website seçeneği

Calendly hesabınızın içinde

Bu oluşturucu

Burada, herhangi bir herkese açık planlama bağlantısından, oturum açmadan

Gömme türleri

Calendly'nin Share → Add to website seçeneği

Satır içi gömme, açılır pencere widget'ı, açılır pencere metni

Bu oluşturucu

Aynı üçü: satır içi, bir düğme ya da bağlantıdan açılır pencere, yüzen rozet

Etkinlik ayrıntılarını ve çerez bannerını gizleme

Calendly'nin Share → Add to website seçeneği

Kodu kopyalamadan önce onay kutuları

Bu oluşturucu

hide_event_type_details=1 ve hide_gdpr_banner=1 ekleyen anahtarlar

Adı ve e-postayı önceden doldurma

Calendly'nin Share → Add to website seçeneği

Bağlantıyı elle düzenleyin ya da Calendly'nin JavaScript prefill seçeneğini kullanın

Bu oluşturucu

Bağlantıya name=, email= ve a1= ekleyen alanlar

Renkler

Calendly'nin Share → Add to website seçeneği

Ücretli planlarda arka plan, metin ve düğme renkleri

Bu oluşturucu

Aynı renk parametrelerini yazar; Calendly bunları yalnızca ücretli planlarda uygular

Calendly bağlantı parametreleri

Bunlar, planlama bağlantınızda ? işaretinden sonra gelir ve & ile birleştirilir. Oluşturucu bunları sizin için ekler; ayrıca herhangi bir Calendly bağlantısına kendiniz de yazabilirsiniz.
Seçenek
Ne yapar
Değerler
Notlar
hide_event_type_details
Fotoğrafınızı, adınızı, etkinlik süresini, konumu ve açıklamayı gizler
1
Tek bir etkinlik türünün bağlantısı için. Tüm planlarda.
hide_landing_page_details
Tüm etkinliklerinizi listeleyen bir sayfada aynı ayrıntıları gizler
1
Kişisel ya da ekip açılış sayfası için. Her iki parametreyle de etkinlik açıklaması yine de görünebilir.
hide_gdpr_banner
Calendly'nin çerez bannerını gizler
1
Yalnızca kendi siteniz çerez onayını yönetiyorsa (GDPR, CCPA).
background_color, text_color, primary_color
Planlama sayfasının arka plan, metin ile düğme ve bağlantı rengi
# olmadan onaltılık, örn. 0069ff
Yalnızca ücretli Calendly planları. Düğme etiketi, kontrast için siyah ya da beyaza döner.
name, first_name, last_name, email
Randevu formunu doldurur
Metin; boşluklar %20 olarak
Formunuz bunları ayrı ayrı istiyorsa first_name ve last_name kullanın.
a1, a2 …
Kendi randevu sorularınızın yanıtları
Metin; onay kutuları ve seçenek düğmeleri için seçenek numarası, örn. a3=2,3
Numara, sorunun formdaki sırasıdır. “Diğer” alanları ve SMS hatırlatma numaraları önceden doldurulamaz.
Düğme text, color, textColor
Yüzen rozetin etiketi ve renkleri
Metin; # ile onaltılık, örn. #0069ff
Calendly.initBadgeWidget seçenekleridir, bağlantı parametreleri değildir. Calendly renk ve düğme metni değişikliklerini ücretli plan özellikleri olarak listeler.
branding
Rozete “powered by Calendly” satırı ekler
true veya false
Yalnızca rozet.
Satır içi boyut
Satır içi planlayıcının içinde durduğu kutu
min-width:320px, yükseklik yaklaşık 700px
Kaydırma çubuğu görünürse yüksekliği artırın ya da büyümesine izin vermek için data-resize="true" ekleyin.

hide_event_type_details

Ne yapar

Fotoğrafınızı, adınızı, etkinlik süresini, konumu ve açıklamayı gizler

Değerler

1

Notlar

Tek bir etkinlik türünün bağlantısı için. Tüm planlarda.

hide_landing_page_details

Ne yapar

Tüm etkinliklerinizi listeleyen bir sayfada aynı ayrıntıları gizler

Değerler

1

Notlar

Kişisel ya da ekip açılış sayfası için. Her iki parametreyle de etkinlik açıklaması yine de görünebilir.

hide_gdpr_banner

Ne yapar

Calendly'nin çerez bannerını gizler

Değerler

1

Notlar

Yalnızca kendi siteniz çerez onayını yönetiyorsa (GDPR, CCPA).

background_color, text_color, primary_color

Ne yapar

Planlama sayfasının arka plan, metin ile düğme ve bağlantı rengi

Değerler

# olmadan onaltılık, örn. 0069ff

Notlar

Yalnızca ücretli Calendly planları. Düğme etiketi, kontrast için siyah ya da beyaza döner.

name, first_name, last_name, email

Ne yapar

Randevu formunu doldurur

Değerler

Metin; boşluklar %20 olarak

Notlar

Formunuz bunları ayrı ayrı istiyorsa first_name ve last_name kullanın.

a1, a2 …

Ne yapar

Kendi randevu sorularınızın yanıtları

Değerler

Metin; onay kutuları ve seçenek düğmeleri için seçenek numarası, örn. a3=2,3

Notlar

Numara, sorunun formdaki sırasıdır. “Diğer” alanları ve SMS hatırlatma numaraları önceden doldurulamaz.

Düğme text, color, textColor

Ne yapar

Yüzen rozetin etiketi ve renkleri

Değerler

Metin; # ile onaltılık, örn. #0069ff

Notlar

Calendly.initBadgeWidget seçenekleridir, bağlantı parametreleri değildir. Calendly renk ve düğme metni değişikliklerini ücretli plan özellikleri olarak listeler.

branding

Ne yapar

Rozete “powered by Calendly” satırı ekler

Değerler

true veya false

Notlar

Yalnızca rozet.

Satır içi boyut

Ne yapar

Satır içi planlayıcının içinde durduğu kutu

Değerler

min-width:320px, yükseklik yaklaşık 700px

Notlar

Kaydırma çubuğu görünürse yüksekliği artırın ya da büyümesine izin vermek için data-resize="true" ekleyin.

Calendly Yardım Merkezi: Gömmenizi özelleştirme ↗

Planlayıcı doğru görünmüyorsa

Satır içi planlayıcının kendi kaydırma çubuğu var ya da kesiliyor

Koddaki yüksekliği artırın, örn. 750px yapın ya da data-resize="true" ekleyin. Calendly, sayfa başına yalnızca bir otomatik boyutlanan gömme kullanılmasını ve bununla açılır menü sorularının kullanılmamasını önerir.

Sayfada hiçbir şey görünmüyor

Site oluşturucunuz <script> etiketlerini kaldırıyor olabilir. Kodu komut dosyalarını koruyan bir HTML ya da özel kod bloğuna yapıştırın ve bağlantının tarayıcıda açıldığını kontrol edin.

Açılır pencere sade bir sayfa olarak açılıyor veya biçimsiz görünüyor

Açılır pencere ve rozet için ayrıca Calendly'nin stil dosyası gerekir: oluşturulan koddaki widget.css satırını koruyun.

Renkler değişmiyor

Renk seçenekleri yalnızca ücretli Calendly planlarında çalışır. Bağlantıda onaltılık değerleri # olmadan yazın: primary_color=0069ff.

Adınız ve etkinlik ayrıntıları iki kez görünüyor

Etkinlik ayrıntılarını gizle'yi açın. Tek bir etkinlik için hide_event_type_details=1, tüm etkinliklerin olduğu sayfa için hide_landing_page_details=1 kullanın.

Önceden doldurulan alanlar boş kalıyor

Parametre adlarını (name, email, a1) kontrol edin ve boşlukları %20 olarak yazın. Yanıtlar, randevu formunuzdaki sorunun sırasına göre gider.

Yüzen rozet başka bir düğmeyi kapatıyor

Rozet sağ alt köşede durur. CSS ile taşıyın: .calendly-badge-widget { right: auto !important; left: 20px !important; }

Satır içi, açılır pencere ya da rozet – hangisi seçilmeli

Tür
Ziyaretçilerin gördüğü
Ne için uygun
Aklınızda bulunsun
Satır içi
Planlama sayfası doğrudan sayfanızın içinde
Randevunun ana eylem olduğu özel bir “Görüşme ayarla” ya da “İletişim” sayfası
Yer ister: en az 320px genişlik ve yaklaşık 700px yükseklik
Bir düğme ya da bağlantıdan açılır pencere
Kendi düğmeniz ya da metin bağlantınız; planlayıcı sayfanın üzerinde açılır
Randevunun birkaç seçenekten biri olduğu fiyat ve hizmet sayfaları
Düğmeyi insanların karar verdiği yere koyun; sitenizin düğme stilini kullanır
Rozet
Bulunduğu her sayfanın bir köşesinde yüzen bir düğme; planlayıcı sayfanın üzerinde açılır
Ziyaretçilerin herhangi bir sayfadan randevu almak isteyebileceği siteler
Bir sohbet ya da çerez düğmesiyle çakışabilir; CSS ile taşıyın

Satır içi

Ziyaretçilerin gördüğü

Planlama sayfası doğrudan sayfanızın içinde

Ne için uygun

Randevunun ana eylem olduğu özel bir “Görüşme ayarla” ya da “İletişim” sayfası

Aklınızda bulunsun

Yer ister: en az 320px genişlik ve yaklaşık 700px yükseklik

Bir düğme ya da bağlantıdan açılır pencere

Ziyaretçilerin gördüğü

Kendi düğmeniz ya da metin bağlantınız; planlayıcı sayfanın üzerinde açılır

Ne için uygun

Randevunun birkaç seçenekten biri olduğu fiyat ve hizmet sayfaları

Aklınızda bulunsun

Düğmeyi insanların karar verdiği yere koyun; sitenizin düğme stilini kullanır

Rozet

Ziyaretçilerin gördüğü

Bulunduğu her sayfanın bir köşesinde yüzen bir düğme; planlayıcı sayfanın üzerinde açılır

Ne için uygun

Ziyaretçilerin herhangi bir sayfadan randevu almak isteyebileceği siteler

Aklınızda bulunsun

Bir sohbet ya da çerez düğmesiyle çakışabilir; CSS ile taşıyın

Üçü de aynı komut dosyasını, https://assets.calendly.com/assets/external/widget.js, yükler ve aynı bağlantı parametreleriyle aynı randevu sayfasını gösterir.

Calendly web sitenize nasıl gömülür

  1. Calendly bağlantınızı kopyalayın

    Calendly'de planlama sayfanızın ya da tek bir etkinliğin bağlantısını kopyalayın.

  2. Seçenekleri belirleyin

    Rengi seçin ve nelerin gizleneceğini belirleyin.

  3. Kodu yapıştırın

    Kodu, takvimin görünmesini istediğiniz yerdeki bir HTML bloğuna ekleyin.

Sık sorulan sorular

Daha fazla Gömme kodu oluşturucular

YouTube Gömme Kodu Oluşturucu

Herhangi bir YouTube bağlantısını yapıştırın ve saniyeler içinde duyarlı bir gömme kodu alın.YouTube Gömme Kodu Oluşturucu

Video Gömme Kodu Oluşturucu

Herhangi bir yerde barındırılan videoyu gömün: MP4, Google Drive, Dropbox, Loom veya Wistia.Video Gömme Kodu Oluşturucu

X (Twitter) Gömme Oluşturucu

Herhangi bir gönderi bağlantısını orijinal görünümüyle bir gömmeye dönüştürün.X (Twitter) Gömme Oluşturucu

iFrame Oluşturucu

Herhangi bir sayfa, form veya uygulama için duyarlı bir iframe oluşturun.iFrame Oluşturucu

PDF Gömme Oluşturucu

PDF menüyü, fiyat listesini veya broşürü sayfa içinde gösterin.PDF Gömme Oluşturucu