Calendly Embed Generator

Tempel tautan Calendly Anda dan dapatkan kode embed gratis yang menampilkan kalender pemesanan di situs web Anda — dengan warna Anda dan detail yang ingin ditampilkan. Tanpa perlu mendaftar.
Calendly Embed Generator
Halaman penjadwalan Anda atau tautan satu acara, mis. https://calendly.com/your-name/30min
Minimal 630 px, agar kalender tidak bergulir di dalamnya.

Sematkan halaman pemesanan

<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;">Dibuat dengan <a href="https://elfsight.id/tools/calendly-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Klik Salin kode di atas untuk menyalinnya.
  2. Buka file HTML atau template halaman Anda.
  3. Tempel kode di dalam <body>, di tempat konten akan muncul.
  4. Simpan dan unggah halaman, lalu buka di browser untuk memeriksanya.
Widget Appointment Booking

Terima pemesanan langsung di situs web Anda

Tampilkan ketersediaan real-time dan terima pemesanan tanpa telepon, email, atau koordinasi manual. Layanan, harga, dan durasi ada di satu kartu, sehingga klien memesan dalam hitungan detik.

  • Pemesanan sepanjang waktu

  • Layanan lengkap dengan harga dan durasi

  • Sinkronisasi dua arah dengan Google Calendar

Buat widget gratis
Tanpa kartu kredit
Pelajari Appointment Booking

Generator vs Share → Add to website di Calendly

Keduanya menghasilkan kode embed resmi Calendly dengan skrip yang sama. Bedanya ada pada tempat Anda membuatnya dan opsi apa yang bisa diatur tanpa mengedit kode secara manual.
Share → Add to website di Calendly
Generator ini
Tempat membuat kode
Di dalam akun Calendly Anda
Di sini, dari tautan penjadwalan publik mana pun, tanpa masuk akun
Jenis embed
Embed inline, widget pop-up, teks pop-up
Ketiganya sama: inline, pop-up pada tombol atau tautan, badge mengambang
Sembunyikan detail acara dan banner cookie
Kotak centang sebelum Anda menyalin kode
Sakelar yang menambahkan hide_event_type_details=1 dan hide_gdpr_banner=1
Isi otomatis nama dan email
Edit tautan secara manual atau gunakan opsi JavaScript prefill dari Calendly
Kolom yang menambahkan name=, email=, dan a1= ke tautan
Warna
Warna latar, teks, dan tombol di paket berbayar
Menulis parameter warna yang sama; Calendly hanya menerapkannya di paket berbayar

Tempat membuat kode

Share → Add to website di Calendly

Di dalam akun Calendly Anda

Generator ini

Di sini, dari tautan penjadwalan publik mana pun, tanpa masuk akun

Jenis embed

Share → Add to website di Calendly

Embed inline, widget pop-up, teks pop-up

Generator ini

Ketiganya sama: inline, pop-up pada tombol atau tautan, badge mengambang

Sembunyikan detail acara dan banner cookie

Share → Add to website di Calendly

Kotak centang sebelum Anda menyalin kode

Generator ini

Sakelar yang menambahkan hide_event_type_details=1 dan hide_gdpr_banner=1

Isi otomatis nama dan email

Share → Add to website di Calendly

Edit tautan secara manual atau gunakan opsi JavaScript prefill dari Calendly

Generator ini

Kolom yang menambahkan name=, email=, dan a1= ke tautan

Warna

Share → Add to website di Calendly

Warna latar, teks, dan tombol di paket berbayar

Generator ini

Menulis parameter warna yang sama; Calendly hanya menerapkannya di paket berbayar

Parameter tautan Calendly

Parameter ini diletakkan setelah ? di tautan penjadwalan Anda, digabung dengan &. Generator menambahkannya untuk Anda; Anda juga bisa mengetiknya di tautan Calendly mana pun.
Opsi
Fungsinya
Nilai
Catatan
hide_event_type_details
Menyembunyikan foto, nama, durasi acara, lokasi, dan deskripsi Anda
1
Untuk tautan ke satu jenis acara. Semua paket.
hide_landing_page_details
Menyembunyikan detail yang sama di halaman yang mencantumkan semua acara Anda
1
Untuk landing page pribadi atau tim. Dengan kedua parameter, deskripsi acara mungkin tetap tampil.
hide_gdpr_banner
Menyembunyikan banner cookie Calendly
1
Hanya jika situs Anda sendiri menangani persetujuan cookie (GDPR, CCPA).
background_color, text_color, primary_color
Warna latar, teks, serta tombol dan tautan pada halaman penjadwalan
Hex tanpa #, mis. 0069ff
Hanya paket Calendly berbayar. Label tombol berubah menjadi hitam atau putih demi kontras.
name, first_name, last_name, email
Mengisi formulir pemesanan
Teks; spasi ditulis %20
Gunakan first_name dan last_name jika formulir Anda memintanya secara terpisah.
a1, a2 …
Jawaban atas pertanyaan pemesanan Anda sendiri
Teks; untuk kotak centang dan tombol radio gunakan nomor opsi, mis. a3=2,3
Nomor tersebut adalah posisi pertanyaan di formulir. Kolom “Other” dan nomor pengingat SMS tidak dapat diisi otomatis.
Tombol text, color, textColor
Label dan warna badge mengambang
Teks; hex dengan #, mis. #0069ff
Opsi dari Calendly.initBadgeWidget, bukan parameter tautan. Calendly mencantumkan perubahan warna dan teks tombol sebagai fitur paket berbayar.
branding
Menambahkan baris “powered by Calendly” pada badge
true atau false
Hanya badge.
Ukuran inline
Kotak tempat penjadwal inline berada
min-width:320px, tinggi sekitar 700px
Tambah tinggi jika muncul scroll bar, atau tambahkan data-resize="true" agar ukurannya menyesuaikan.

hide_event_type_details

Fungsinya

Menyembunyikan foto, nama, durasi acara, lokasi, dan deskripsi Anda

Nilai

1

Catatan

Untuk tautan ke satu jenis acara. Semua paket.

hide_landing_page_details

Fungsinya

Menyembunyikan detail yang sama di halaman yang mencantumkan semua acara Anda

Nilai

1

Catatan

Untuk landing page pribadi atau tim. Dengan kedua parameter, deskripsi acara mungkin tetap tampil.

hide_gdpr_banner

Fungsinya

Menyembunyikan banner cookie Calendly

Nilai

1

Catatan

Hanya jika situs Anda sendiri menangani persetujuan cookie (GDPR, CCPA).

background_color, text_color, primary_color

Fungsinya

Warna latar, teks, serta tombol dan tautan pada halaman penjadwalan

Nilai

Hex tanpa #, mis. 0069ff

Catatan

Hanya paket Calendly berbayar. Label tombol berubah menjadi hitam atau putih demi kontras.

name, first_name, last_name, email

Fungsinya

Mengisi formulir pemesanan

Nilai

Teks; spasi ditulis %20

Catatan

Gunakan first_name dan last_name jika formulir Anda memintanya secara terpisah.

a1, a2 …

Fungsinya

Jawaban atas pertanyaan pemesanan Anda sendiri

Nilai

Teks; untuk kotak centang dan tombol radio gunakan nomor opsi, mis. a3=2,3

Catatan

Nomor tersebut adalah posisi pertanyaan di formulir. Kolom “Other” dan nomor pengingat SMS tidak dapat diisi otomatis.

Tombol text, color, textColor

Fungsinya

Label dan warna badge mengambang

Nilai

Teks; hex dengan #, mis. #0069ff

Catatan

Opsi dari Calendly.initBadgeWidget, bukan parameter tautan. Calendly mencantumkan perubahan warna dan teks tombol sebagai fitur paket berbayar.

branding

Fungsinya

Menambahkan baris “powered by Calendly” pada badge

Nilai

true atau false

Catatan

Hanya badge.

Ukuran inline

Fungsinya

Kotak tempat penjadwal inline berada

Nilai

min-width:320px, tinggi sekitar 700px

Catatan

Tambah tinggi jika muncul scroll bar, atau tambahkan data-resize="true" agar ukurannya menyesuaikan.

Help Center Calendly: Cara menyesuaikan embed Anda ↗

Jika penjadwal tidak tampil dengan benar

Penjadwal inline memiliki scroll bar sendiri atau terpotong

Tambah tinggi di kode, mis. menjadi 750px, atau tambahkan data-resize="true". Calendly menyarankan hanya satu embed yang menyesuaikan ukuran otomatis per halaman, dan tanpa pertanyaan dropdown.

Tidak ada yang muncul di halaman

Website builder Anda mungkin menghapus tag <script>. Tempel kode ke blok HTML atau kode kustom yang mempertahankan skrip, dan pastikan tautannya terbuka di browser.

Pop-up terbuka sebagai halaman biasa atau tampil tanpa gaya

Pop-up dan badge juga memerlukan stylesheet Calendly: pertahankan baris widget.css dari kode yang dihasilkan.

Warna tidak berubah

Opsi warna hanya berfungsi di paket Calendly berbayar. Di tautan, tulis nilai hex tanpa #: primary_color=0069ff.

Nama dan detail acara Anda muncul dua kali

Aktifkan Sembunyikan detail acara. Gunakan hide_event_type_details=1 untuk satu acara dan hide_landing_page_details=1 untuk halaman dengan semua acara.

Kolom yang diisi otomatis tetap kosong

Periksa nama parameter (name, email, a1) dan tulis spasi sebagai %20. Jawaban mengikuti posisi pertanyaan di formulir pemesanan Anda.

Badge mengambang menutupi tombol lain

Badge berada di pojok kanan bawah. Pindahkan dengan CSS: .calendly-badge-widget { right: auto !important; left: 20px !important; }

Inline, pop-up, atau badge — mana yang dipilih

Jenis
Yang dilihat pengunjung
Cocok untuk
Perlu diingat
Inline
Halaman penjadwalan langsung di dalam halaman Anda
Halaman “Book a call” atau “Contact” khusus, tempat pemesanan menjadi aksi utama
Butuh ruang: lebar minimal 320px dan tinggi sekitar 700px
Pop-up pada tombol atau tautan
Tombol atau tautan teks Anda sendiri; penjadwal terbuka di atas halaman
Halaman harga dan layanan, tempat pemesanan hanyalah satu dari beberapa opsi
Letakkan tombol di tempat orang mengambil keputusan; ia memakai gaya tombol situs Anda
Badge
Tombol mengambang di pojok setiap halaman tempatnya dipasang; penjadwal terbuka di atas halaman
Situs yang pengunjungnya mungkin ingin memesan dari halaman mana pun
Bisa menimpa tombol chat atau cookie; pindahkan dengan CSS

Inline

Yang dilihat pengunjung

Halaman penjadwalan langsung di dalam halaman Anda

Cocok untuk

Halaman “Book a call” atau “Contact” khusus, tempat pemesanan menjadi aksi utama

Perlu diingat

Butuh ruang: lebar minimal 320px dan tinggi sekitar 700px

Pop-up pada tombol atau tautan

Yang dilihat pengunjung

Tombol atau tautan teks Anda sendiri; penjadwal terbuka di atas halaman

Cocok untuk

Halaman harga dan layanan, tempat pemesanan hanyalah satu dari beberapa opsi

Perlu diingat

Letakkan tombol di tempat orang mengambil keputusan; ia memakai gaya tombol situs Anda

Badge

Yang dilihat pengunjung

Tombol mengambang di pojok setiap halaman tempatnya dipasang; penjadwal terbuka di atas halaman

Cocok untuk

Situs yang pengunjungnya mungkin ingin memesan dari halaman mana pun

Perlu diingat

Bisa menimpa tombol chat atau cookie; pindahkan dengan CSS

Ketiganya memuat skrip yang sama, https://assets.calendly.com/assets/external/widget.js, dan menampilkan halaman pemesanan yang sama dengan parameter tautan yang sama.

Cara menyematkan Calendly di situs web Anda

  1. Salin tautan Calendly Anda

    Di Calendly, salin tautan ke halaman penjadwalan Anda atau satu acara.

  2. Pilih opsi

    Pilih warna dan apa yang disembunyikan.

  3. Tempel kodenya

    Tambahkan kode ke blok HTML di tempat kalender harus muncul.

Pertanyaan yang sering diajukan

Generator kode embed lainnya

Generator Kode Embed YouTube

Tempel tautan YouTube apa pun dan dapatkan kode embed responsif dalam hitungan detik.Generator Kode Embed YouTube

Generator Kode Embed Video

Embed video yang di-host di mana saja: MP4, Google Drive, Dropbox, Loom, atau Wistia.Generator Kode Embed Video

Generator iFrame

Buat iframe responsif untuk halaman, formulir, atau aplikasi apa pun.Generator iFrame

Generator Embed PDF

Tampilkan menu, daftar harga, atau brosur PDF langsung di halaman.Generator Embed PDF