Installing AI Chat Bot on Blogger with ChatGPT
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/elhakimyasya/Contoh-Kode@499c89b6039eef8c034b65c9d936e95c557f0503/dist/chat-gpt.css" rel="preload" />
<div class="elcreative-chatgpt"></div>
<script src="https://cdn.jsdelivr.net/gh/elhakimyasya/Contoh-Kode@499c89b6039eef8c034b65c9d936e95c557f0503/dist/chat-gpt.js"></script>
<script>
bloggerChatGPT({
elementContainer: '.elcreative-chatgpt',
config: {
apiKey: 'API_KEY_CHATGPT',
minCharacter: JUMLAH_KARAKTER_MINIMAL,
imageUser: 'URL_GAMBAR_USER',
imageBot: 'URL_GAMBAR_BOT',
},
});
</script>
Memasang AI Chat Bot di Blogger dengan ChatGPT
Blogger (Blogspot) merupakan salah satu Platform Blogging yang cukup populer karena gratis serta tidak rumit ketika digunakan. Dengan adanya Blogger, kita dapat menyalurkan kreativitas dan berbagi informasi dengan lebih luas kepada pembaca di seluruh dunia.
Ketika ChatGPT muncul, para Blogger mungkin merasa khawatir bahwa ChatGPT dapat menggantikan konten yang mereka buat dan mengurangi nilai dari kehadiran mereka sebagai blogger.
Namun, saya yakin bahwa konten yang kita (para Blogger) buat tetap merupakan aset utama yang menarik pembaca untuk mengunjungi blog kita.
Maka dari itu, disini saya sedikit berputar otak untuk mencari cara agar para Blogger tidak lagi khawatir akan adanya ChatGPT serta menjaga agar pengunjung blog tetap stabil. Salah satu caranya tidak lain atau bukan adalah?...
Apa itu ChatGPT?
ChatGPT adalah singkatan dari "Chat Generative Pre-trained Transformer" yang merupakan sebuah model bahasa alami berbasis Machine (mesin) yang dilatih menggunakan Machine Learning (teknologi pembelajaran mesin) untuk memahami bahasa manusia dan menghasilkan respon yang menyerupai respon manusia.
Dengan kata lain, Chat GPT adalah sistem yang dapat berkomunikasi dengan manusia melalui teks atau suara serta dapat memberikan tanggapan yang terdengar seperti manusia.
Tampilan ChatGPT di Blogger/Blogspot
Berikut adalah tampilan dari ChatGPT yang sudah terpasang di Blogger:
Jika tidak ada balasan Bot, ada tiga kemungkinan yaitu: Kalian terlalu cepat atau terlalu sering mengirim pesan; Server OpenAI yang sedang sibuk; atau kemungkinan besar adalah API Key saya yang sudah limit :D.
Memasang ChatGPT di Blogger/Blogspot
Sebelumnya, disini saya hanya akan menunjukkan cara untuk memasang ChatGPT di Blogger saja, bukan untuk kustomisasi.
Kalian dapat mengikuti tahap-tahap dibawah ini untuk memasang ChatGPT di Blogger.
Mendapatkan API Key OpenAI
OpenAI menyediakan API (Application Programming Interface) untuk dapat digunakan oleh Developer (Pengembang) dalam mengembangkan aplikasi Mobile atau Web.
Disini, kita dapat menggunakan API dari OpenAI untuk digunakan dalam pemasangan aplikasi Chat Bot yang responsif dan memahami bahasa manusia dengan baik.
Berikut adalah langkah-langkah serta cara untuk mendapatkan API Key dari OpenAI:
- Buka halaman Api Key OpenAI dan Login dengan akun kalian. Jika belum punya, silahkan daftar saja terlebih dahulu.
- Di halaman API Keys, klik tombol Create new secret key.
- Akan muncul Dialog Pop-Up yang berisikan kode Api Keys. Salin kode API Keys tersebut. Perlu diketahui bahwa kode API Keys tersebut hanya dapat dilihat sekali, jadi saya sarankan untuk menyimpannya di Notepad terlebih dahulu.
Menambahkan Scripts dan Styles ChatGPT kedalam Blog
Sebelum menambahkan Script dan Styles, kalian perlu menyiapkan satu postingan atau halaman statis. Selanjutnya, edit postingan atau halaman statis tersebut dalam mode HTML View (Bukan Compose View).
Masukkan kode berikut kedalamnya:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/elhakimyasya/Contoh-Kode@499c89b6039eef8c034b65c9d936e95c557f0503/dist/chat-gpt.css" rel="preload" />
<div class="elcreative-chatgpt"></div>
<script src="https://cdn.jsdelivr.net/gh/elhakimyasya/Contoh-Kode@499c89b6039eef8c034b65c9d936e95c557f0503/dist/chat-gpt.js"></script>
<script>
bloggerChatGPT({
elementContainer: '.elcreative-chatgpt',
config: {
apiKey: 'API_KEY_CHATGPT',
minCharacter: JUMLAH_KARAKTER_MINIMAL,
imageUser: 'URL_GAMBAR_USER',
imageBot: 'URL_GAMBAR_BOT',
},
});
</script>
Disini, kalian perlu mengatur beberapa hal di bagian config. Berikut adalah penjelasannya:
apiKey
- UbahAPI_KEY_CHATGPT
menjadi Api Key OpenAI yang telah kalian salin sebelumnya. Eitss, jangan asal isi dulu, saya akan menjelaskan mengenai apiKey pada penjelasan Konfigurasi Keamanan API Key dibawah ini.minCharacter
- UbahJUMLAH_KARAKTER_MINIMAL
menjadi angka (Tidak boleh String atau teks). Contoh:20
(Karakter minimal untuk mengirim Chat adalah 20 karakter).imageUser
- UbahURL_GAMBAR_USER
dengan URL Gambar. Contoh:https://lh3.googleusercontent.com/a/default-user=s56-c
.imageBot
- UbahURL_GAMBAR_BOT
dengan URL Gambar. Contoh:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz629E-i_ZxgUPCJDNbU1n7jBxT8eO9275F4ZUEEWE7JXdigT2Ns2vuoyR-xpCduXYALKvL9cpvJqhHapeFVK8YTySNa83SBYKzSjQxLRyfTH34KwQUNE9zZiJh4HAhq9OfPze2VydU1DbWxzuLcZ0upWvJ6kZrr0CANAxKmXGvxj_JGuu6njyvd8tgw/s60/ELC Cap Grey 1000px.png
.
Konfigurasi Keamanan API Key OpenAI
API key OpenAI digunakan untuk mengautentikasi akses ke layanan OpenAI dan memberikan hak akses tertentu kepada pengguna.
Jika API key tersebut dibagikan atau terlihat secara publik, orang lain dapat menggunakan API Key tersebut untuk mengakses layanan OpenAI dan melakukan tindakan yang tidak diinginkan seperti menghapus atau mengubah data, atau bahkan melakukan serangan keamanan pada sistem OpenAI.
Maka dari itu, saya menyertakan Tool untuk meng-enkripsi API Key tersebut. Silahkan buka halaman Encryption Tool. Pastekan API Key kalian dan Generate API Key yang terenkripsi.
Setelah itu, kalian dapat mengisi konfigurasi apiKey diatas dengan API Key OpenAI yang telah di enkripsi.
Namun, perlu diingat bahwa menggunakan teknik enkripsi ini tidak selalu menjamin keamanan yang optimal.
Itulah beberapa hal untuk memasang ChatGPT pada Blogger. Jika artikel ini bermanfaat, silahkan bagikan ke teman atau kerabat. Jika kalian memiliki pertanyaan atau terdapat hal yang kurang jelas, silahkan tulis pada kolom komentar. Terimakasih.