Menyematkan Kode Kustom - Bantuan Webflow

Last updated on 10/23/2025@mrbirddev

Tambahkan blok kode kustom ke situs Anda menggunakan elemen Code Embed untuk membuka berbagai jenis fungsionalitas kustom.

Elemen Code Embed hanya mendukung HTML, CSS dalam tag <style>, dan JS dalam tag <script>. Anda tidak dapat mengintegrasikan bahasa server-side (misalnya, Perl, PHP, Python, Ruby) dalam elemen Code Embed.

Kode kustom adalah modifikasi lanjutan yang mungkin bertentangan dengan fungsionalitas dasar Webflow. Oleh karena itu, Webflow tidak dapat menjamin fungsionalitas atau kompatibilitas penuh dari kode kustom apa pun. Selain itu, tim dukungan kami tidak dapat memberikan bantuan langsung dengan pengaturan atau pemecahan masalah kode kustom, karena topik ini berada di luar cakupan kebijakan dukungan pelanggan kami. Jika Anda mengalami masalah dengan kode kustom, silakan beri tahu kami di Forum Webflow, di mana seluruh komunitas Webflow (termasuk staf) dapat memberikan bantuan dan sumber daya tambahan.

Cara menambahkan elemen Code Embed

Anda dapat menyematkan kode pihak ketiga atau kode kustom Anda sendiri di mana saja dalam desain Anda atau dalam elemen teks kaya.

Kode kustom dalam elemen Code Embed tidak boleh melebihi 50.000 karakter. Jika kode yang ingin Anda sematkan lebih panjang, Anda dapat menyimpannya di server lain dan merujuk skrip dalam sematan Anda. Anda juga dapat meminimalkan kode kustom Anda menggunakan alat pihak ketiga atau membagi kode menjadi beberapa elemen Embed (dengan syarat ini tidak merusak fungsi JavaScript apa pun).

Cara menambahkan kode kustom langsung ke desain Anda

Salin kode yang ingin Anda sematkan ke clipboard Anda
Buka panel Tambah dan tambahkan elemen Code Embed ke kanvas Webflow
Tempelkan kode kustom yang Anda salin pada langkah 1
Simpan dan tutup modal

Jika kode kustom Anda memiliki tag pembuka dan/atau penutup, pastikan untuk menambahkannya agar kode Anda berfungsi seperti yang diharapkan. Selain itu, jangan sertakan tag <html>, <body>, atau <head> dalam kode kustom Anda, atau situs/layout Anda akan rusak.

Pembungkusan baris diaktifkan secara default untuk memudahkan melihat dan mengedit kode, tetapi Anda dapat menonaktifkan pengaturan ini dengan menghapus centang pada kotak Pembungkusan baris di editor kode. Anda juga dapat mengaktifkan pengeditan layar penuh dengan mengklik ikon “maksimalkan”.

Tip profesional: Jika Anda ingin menggunakan kembali konten yang sama di seluruh situs Anda, Anda dapat menggunakan komponen untuk mengubah elemen Code Embed Anda menjadi komponen yang dapat digunakan kembali.

Cara menambahkan kode kustom ke elemen teks kaya

Salin kode yang ingin Anda sematkan ke clipboard Anda
Tempatkan kursor Anda ke dalam elemen teks kaya di mana Anda ingin menambahkan kode kustom Anda
Klik ikon “plus” untuk membuka menu sisipkan dan klik tombol kode kustom
Tempelkan kode kustom yang Anda salin pada langkah 1

Cara menggunakan konten dinamis dalam kode kustom Anda

Anda dapat menggabungkan bidang Koleksi ke dalam kode yang disematkan untuk menarik informasi secara dinamis untuk berbagai penggunaan. Pelajari lebih lanjut: Lihat Sematan Dinamis di Pusat Bantuan Webflow.

Cara mengedit elemen Code Embed

Ada beberapa cara untuk membuka editor kode dan mengedit kode dalam elemen Code Embed. Anda dapat:

Pilih elemen Code Embed di kanvas dan klik dua kali
Pilih elemen Code Embed di kanvas dan tekan enter
Pilih elemen Code Embed di kanvas dan klik ikon pengaturan “roda gigi”
Pilih elemen Code Embed di kanvas dan klik Buka editor kode di Panel Pengaturan di bawah pengaturan Code Embed

Perlu diketahui: Jika Anda tidak dapat melihat elemen Code Embed di kanvas, Anda dapat menemukannya dan memilihnya dari panel Navigator. Kemudian, buka Settings panel dan klik Open code editor di bawah Code Embed settings untuk mengedit kode Anda.

Cara mengatur dimensi pada elemen Code Embed

Jika kode kustom dalam elemen Code Embed tidak secara eksplisit mengatur ukuran atau dimensi, konten sering kali dapat mengambil lebar penuh dari elemen induknya. Anda dapat menambahkan height="100%" width="100%" dalam kode kustom Anda, yang akan memungkinkan Anda menyesuaikan lebar dan tinggi elemen embed dan konten dari Style panel.

Cara melihat pratinjau konten yang disematkan

Kode kustom yang dibungkus dalam tag <iframe></iframe> atau <style> akan menampilkan pratinjau di kanvas atau dalam elemen teks kaya Anda, tetapi beberapa kode Embed hanya dapat dilihat di situs web yang sudah diterbitkan. Setiap kali tag digunakan di editor kode, Anda akan melihat placeholder untuk elemen tersebut di Designer.

Setelah Anda melihat pratinjau, menerbitkan, atau mengekspor situs Anda, skrip dan kode kustom di dalamnya akan dirender di tempat Anda meletakkannya.

Efek dari kode kustom muncul dalam mode pratinjau, tetapi tidak akan aktif sampai situs Anda diterbitkan.

Untuk mengecualikan skrip kustom dari mode pratinjau dan komentar, bungkus kode Anda dalam komentar HTML berikut:
Semua kode di sini akan dikecualikan

Pelajari lebih lanjut: Lihat Gunakan .webflow.io sebagai domain staging untuk pengujian dan umpan balik.

FAQ dan tips pemecahan masalah

Bisakah saya menggunakan bahasa server-side dalam elemen Code Embed? Anda tidak dapat mengintegrasikan bahasa server-side (misalnya, Perl, PHP, Python, Ruby) dalam elemen Code Embed. Elemen Code Embed hanya mendukung HTML, CSS dalam tag <style>, dan JS dalam tag <script>.

Bisakah saya meningkatkan batas 50.000 karakter untuk elemen Code Embed?
Kode kustom dalam elemen Code Embed tidak dapat melebihi 50.000 karakter. Jika kode yang ingin Anda sematkan lebih panjang, Anda dapat menyimpannya di server lain dan merujuk skrip tersebut dalam sematan Anda. Anda juga dapat meminimalkan kode kustom Anda menggunakan alat pihak ketiga atau membagi kode menjadi beberapa elemen Code Embed (dengan syarat ini tidak merusak fungsi JavaScript).

Tolong! Kode kustom saya tidak berfungsi!
Periksa kembali bahwa kode Anda menyertakan tag pembuka dan/atau penutup yang sesuai dan tidak menyertakan tag <html>, <body>, atau <head>.

Sejak Agustus 2020, situs Webflow yang baru diterbitkan menyertakan jQuery v3.5.1. Mengimpor versi jQuery lain dengan kode kustom dapat menyebabkan konflik dan perilaku yang tidak terduga di situs Anda. Skrip yang mempengaruhi peristiwa DOM seperti onClick, onHover, dll., juga dapat menyebabkan perilaku yang tidak terduga.

Penting untuk diingat bahwa kode kustom adalah modifikasi lanjutan yang dapat bertentangan dengan fungsi dasar Webflow. Oleh karena itu, Webflow tidak dapat menjamin fungsionalitas atau kompatibilitas penuh dari kode kustom apa pun.

Tim dukungan kami tidak dapat memberikan bantuan langsung dengan pengaturan atau pemecahan masalah kode kustom, karena topik ini berada di luar cakupan kebijakan dukungan pelanggan kami. Jika Anda mengalami masalah dengan kode kustom, beri tahu kami di Forum Webflow, di mana seluruh komunitas Webflow (termasuk staf) dapat memberikan bantuan dan sumber daya tambahan.

Kembali ke bantuan webflow

Last updated on 10/23/2025@mrbirddev