Membuat Channel Rules & Informasi Server Keren Menggunakan Webhooks di Discord

Discord, merupakan sebuah aplikasi social media yang lumayan populer belakangan ini. Pasalnya aplikasi Discord, memiliki fitur yang sangat keren dan menarik. Ditambah lagi, komunitas pada social media ini banyak yang anti-mainstream dan unik-unik.

Karena keunikan komunitasnya ini, tentu, jika kita pemilik/owner server di Discord, berkeinginan memiliki server yang keren dan berbeda dengan server orang lain, agar menarik perhatian para users Discord untuk mengunjugi server dan betah di server kita.

Salah satu cara agar mereka tertarik ke server kalian, adalah dengan cara mendekorasi server kalian agar bagus. Contohnya: Membuat Channel rules, informasi, channel sambutan server yang keren.

Contoh ini juga bisa kalian lihat langsung di server Sychonix (klik disini)

Tertarik dengan dekorasi seperti itu? Jika tertarik silahkan baca artikel ini sampai selesai ya 😀 .

Mari Memulai

Sebelum praktik, saya mau sampaikan, bahwa tutorial ini menggunakan metode webhooks. Dan ini juga, sebenarnya menggunakan metode dasar dalam penggunaan webhooks sederhana di Discord. Jadi, buat pemula ini sangat gampang.

Dan untuk persiapan, kalian memerlukan software Postman yang berguna untuk mengontrol webhooks di server kalian.

Contoh Tampilan aplikasi Postman untuk membuat dekorasi menggunakan Webhooks Discord
Contoh tampilan aplikasi Postman

Cara Menggunakan

  1. Pertama, kita buat webhooks server terlebih dahulu. Caranya, masuk ke menu Server Settings, lalu klik menu WebhooksCreate Webhook.
Proses pembuatan webhooks Discord
  1. Silahkan atur channel yang ingin digunakan untuk dekorasi informasi server dan jika ingin menambahkan Webhook Icon juga bisa (opsional/tidak wajib). Setelah selesai, silahkan copy Webhook URL.
atur channel Webhook Discord dan Kopi link Weebhook URL
  1. Lalu, buka aplikasi Postman, Login atau Register (jika belum punya akun), dan klik icon +, lalu ubah GET menjadi POST, dan letakan Webhook URL yang kita copy tadi ke kolom samping POST.
Memasukan Webhook URL Discord ke aplikasi Postman
  1. Kemudian, kita coba dulu apakah webhooks yang kita buat telah bisa digunakan atau belum. Caranya, klik menu Body, pilih opsi raw dan ubah format data dari Text menjadi JSON. Dan ketikan kode berikut:
{
  "content": "Hello!"
}
Membuat Content di Postman untuk Webhook Discord
  • Setelah selesai, silahkan klik Send dan kamu sudah bisa melihat hasilnya.
Hasil postingan Webhook Discord

Penjelasan:
– content : merupakan key / fungsi / format untuk menampilkan text;
– “Hello!” : merupakan value / hasil / output.

Membedah

Nah, setelah fungsi mengirim teks melalui Postman ke webhook berhasil. Maka, kali ini kita akan membedah format dekorasi yang saya terapkan pada server saya.

Menampilkan Gambar

Contoh Postingan mengirim gambar menggunakan Webhook Discord

Pembedahan pertama ini, saya akan membahas bagaimana cara membuat wrapper / pembukus gambar atau istilah di Discord adalah embeds, lalu memberi warna di sisi kiri embeds, dan cara meletakan gambar di embeds.

Alasan saya menggunakan key embeds, agar tampilan dekorasi sambutan saya terlihat rapi.

Kodenya:

{
  "embeds": [{
    "image": {
      "url": "URL GAMBAR KALIAN"
    },
      "color": WARNA DECIMAL VALUE
}]
}

Contoh:

Contoh penulisan Script untuk mengirim gambar di Webhook Discord

Penjelasan:
Ganti URL GAMBAR KALIAN ke link gambar yang ingin kalian masukan (Contoh: https://sychonix.com/wp-content/uploads/2020/01/disctrict-welcomenew-scaled.jpg)
Color menggunakan format Decimal Value. Jika kalian ingin mencari format warna ini, bisa gunakan website SpyColor untuk mengonversi warna atau mencari warna format Decimal Value.

Membuat Text, Bold, Hyperlink, Input Role, Membuat List, Input Link Channel

Contoh content untuk dekorasi menggunakan Webhook Discord

Kodenya:

{
  "embeds": [{
  	"author": {
      "name": "NAMA UNTUK HEADER (BEBAS)",
      "url": "LETAK LINK APA AJA BEBAS",
      "icon_url": "URL GAMBAR"
    },
      "description": "**UNTUK TEXT TEBALAN** merupakan hal istimewa di server ini. Dengan peran kalian bisa mendapatkan benefit lebih di server ini. Dan kamu perlu mengenal roles di server ini yang dibagi beberapa type:\n\n__**Rare / Special Roles:**__\n•  <@&ID ROLE> = Pemilik Server\n•  <@&ID ROLE> = Kontributor/Moderator/Pemegang wewenang\n• <@&ID ROLE> = Supporter / Donatur dari **[TEXT YANG KASIH LINK](https://LETAKLINKNYADISINI.COM)**\n• <@&ID ROLE> = Supporter via Boosting Server\n\n**Note:\n **untuk kalian yang ingin mengecek level berapa kalian sekarang, silahkan ke channel <#ID CHANNEL KALIAN> dan ketik **!rank**, info tentang rank kamu akan dikirim melalui DM.\n\nTetap terkoneksi dengan Sychonix melalui platform social media lainnya dan dapatkan konten eksklusif disetiap plaformnya:\n\n<:NAMA_EMOTICON:ID EMOTICON> = [Like & Follow Fanspage Sychonix](https://www.facebook.com/Sychonix/)\n\n<:NAMA_EMOTICON:ID EMOTICON> = [Follow Instagram Sychonix](https://www.instagram.com/Sychonix/)\n\n<:NAMA_EMOTICON:ID EMOTICON> = [Follow Twitter Sychonix](https://www.twitter.com/Sychonix/)\n\n<:NAMA_EMOTICON:ID EMOTICON> = [Subscribe Channel Sychonix](https://www.youtube.com/channel/UCBkjXKC84Yb5ZRvHjlJJblQ)",
      "color": 54783
}]
}

Contoh:

Contoh penulisan text dekorasi untuk Webhook Discord

Penjelasan:

"author": {
  "name": "NAMA UNTUK HEADER (BEBAS)",
  "url": "LETAK LINK APA AJA BEBAS",
  "icon_url": "URL GAMBAR"
}

Dibagian ini, berfungsi menampilkan Header di Embeds:

Contoh bagian Header Embeds Webhook Discord

Untuk membuat bold, Italic, Underline, strikeout kita menggunakan metode Markdown yang kita letak didalam key description. Berikut beberapa fungsi Markdown sederhana yang bisa diterapkan di dalam key description:

  • *Italics*: Italics
  • **bold**: Bold
  • ***Bold Italics***: Bold Italic
  • __Underline__: Underline
  • __*Underline Italics*__: Underline Italics
  • __**Underline bold**__: Underline Bold
  • __***Underline Bold Italics***__: Underline Bold Italics
  • ~strikeout~: strikeout
  • `code`: code
  • [Text link](https://urllink.com/) : Texlink

Oh ya, jika kalian ingin membuat garis baru atau paragraf baru, kalian harus menggunakan code\n atau \n\n dan jangan gunakan tombol enter karena dapat membuat kode error.

Untuk membuat list, saya menggunakan trik sederhana dengan simbol ” • “, dan memadukan kode \n untuk baris barunya, contoh:

•  <@&ID ROLE> = Pemilik Server\n•  <@&ID ROLE> = Kontributor/Moderator/Pemegang wewenang\n• <@&ID ROLE> = Supporter / Donatur dari **[TEXT YANG KASIH LINK](https://LETAKLINKNYADISINI.COM)**\n• <@&ID ROLE> = Supporter via Boosting Server

Untuk menampilkan @role, #channel-text, dan :emoji:, kalian harus mengaktifkan fitur Developer mode. Caranya:

  1. Buka Settings AccountAppearanceScroll ke bawah, ke bagian Advanced centang Developer Mode.
Mengaktifkan Developer Mode

Untuk menginput channel, klik kanan pada channel yang ingin diletakan, lalu klik Copy ID.

Input kedalam value description dengan code <#ID CHANNEL>.
Contoh: <#670231777184317443>.

Untuk menginput @role, pergi ke Server SettingsRolesklik kanan pada Roles lalu Copy ID

Input kedalam value description dengan code <@&ID ROLES>.
Contoh: <@&670231777184317443>.

Untuk role, ketik terlebih dahulu \ di #text-chat, lalu pilih emote yang dimasukan ke dalam value description.

Input kedalam value description dengan code <:NAMA EMOTE:ID ROLES>.
Contoh: <:instagram:670526184974450694>.

Menyambungkan dua atau lebih Embeds dalam satu kali Posting

Caranya cukup mudah, kalian cukup memberi batasan dengan simbol , untuk memisahkan atara embeds yang satu dengan yang lain.

Nah, begitulah sedikit trik cara membuat dekorasi channel sambutan/rules/informasi yang keren. Ini juga bisa digunakan untuk hal yang lain, dan selamat ber-eksperimen untuk tingkat lanjutnya!

Oh ya, untuk kalian yang ga mau ribet dan ingin instant copy yang mirip seperti Server Sychonix dan hanya merubah sedikit seperti link, nama, role, channel, dan social medianya. Kalian bisa download melalui KaryaKarsa dengan harga Rp. 10.000,- aja + Bonus Template .PSD (Photoshop Files) untuk gambarnya.

Download Template + PSD Gambar

Referensi:
https://birdie0.github.io/discord-webhooks-guide/