Skip to main content

Installing AI Chat Bot on Blogger with ChatGPT

Installing AI Chat Bot on Blogger with ChatGPT

Easy way to install AI Chat Bot on Blogger with ChatGPT to increase interaction and provide a better user experience. 

Blogger (Blogspot) is a Blogging Platform that is quite popular because it is free and not complicated to use. With Blogger, we can channel our creativity and share information more widely with readers all over the world. 
When ChatGPT appears, Bloggers may be worried that ChatGPT can replace the content they create and reduce the value of their presence as bloggers. 
However, I believe that the content that we (Bloggers) create is still the main asset that attracts readers to visit our blog. 
Therefore, here I am racking my brain a little to find a way for Bloggers to no longer worry about ChatGPT and to keep blog visitors stable. One way is none other or not?... 

What is ChatGPT? 

ChatGPT is an abbreviation for "Chat Generative Pre-trained Transformer" which is a machine-based natural language model that is trained using Machine Learning (machine learning technology) to understand human language and produce responses that resemble human responses. 
In other words, Chat GPT is a system that can communicate with humans via text or voice and can provide responses that sound like humans. 

ChatGPT display on Blogger/Blogspot

The following is the appearance of ChatGPT which is installed on Blogger:

If there is no Bot reply, there are three possibilities, namely: You sent messages too quickly or too often; OpenAI servers are busy; or most likely my API Key is already limited :D. 

Installing ChatGPT on Blogger/Blogspot

Previously, here I will only show you how to install ChatGPT on Blogger, not for customization. 
You can follow the steps below to install ChatGPT on Blogger. 

Get OpenAI API Key

OpenAI provides an API (Application Programming Interface) that can be used by developers in developing mobile or web applications. 
Here, we can use the API from OpenAI to use it to install a Chat Bot application that is responsive and understands human language well. 
Following are the steps and ways to get an API Key from OpenAI:

Go to the OpenAI Api Key page and Login with your account. If you don't have one, please register first. 

On the API Keys page, click the Create new secret key button. 

A Pop-Up Dialog will appear containing the Api Keys code. Copy the API Keys code. Please note that the API Keys code can only be seen once, so I recommend saving it in Notepad first. 

Adding ChatGPT Scripts and Styles to the Blog

Before adding Scripts and Styles, you need to prepare a static post or page. Next, edit the static post or page in HTML View mode (Not Compose View). 
Enter the following code into it:


<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>


Or

<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/Example-Code@499c89b6039eef8c034b65c9d936e95c557f0503/dist/chat-gpt.js"></script> <script> bloggerChatGPT({ elementContainer: '.elcreative-chatgpt', config: { apiKey: 'API_KEY_CHATGPT', minCharacter: MINIMAL_NUMBER_CHARACTERS, imageUser: 'USER_IMAGE URL', imageBot:'URL_IMAGE_BOT', }, }); </script>

Here, you need to set several things in the config section. Here is the explanation:

apiKey - Change API_KEY_CHATGPT to the OpenAI Api Key that you copied earlier. Eitss, don't just fill it in first, I will explain about apiKey in the explanation of API Key Security Configuration below. 

minCharacter - Convert MINIMAL_NUMBER_CHARACTERS to a number (Cannot be String or text). Example: 20 (Minimum characters for sending a Chat is 20 characters). 

imageUser - Change IMAGE_USER_URL with Image URL. Example: https://lh3.googleusercontent.com/a/default-user=s56-c. 

imageBot - Change IMAGE_BOT_URL with Image URL. Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz629E-i_ZxgUPCJDNbU1n7jBxT8eO9275F4ZUEEWE7JXdigT2Ns2vuoyR-xpCduXYALKvL9cpvJqhHapeFVK8YTySNa83SBYKzSjQx LRyfTH34KwQUNE9zZiJh4HAhq9OfPze2VydU1DbWxzuLcZ0upWvJ6kZrr0CANAxKmXGvxj_JGuu6njyvd8tgw/s60/ELC Cap Gray 1000px.png. 

OpenAI API Key Security Configuration

OpenAI API keys are used to authenticate access to OpenAI services and grant certain access rights to users. 
If the API key is shared or publicly visible, other people can use the API Key to access OpenAI services and perform undesirable actions such as deleting or changing data, or even carrying out security attacks on OpenAI systems. 
Therefore, I include a tool to encrypt the API Key. Please open the Encryption Tool page. Paste your API Key and Generate an encrypted API Key. 
After that, you can fill in the apiKey configuration above with the encrypted OpenAI API Key. 
However, keep in mind that using this encryption technique does not always guarantee optimal security. 
Those are some things to install ChatGPT on Blogger. If this article is useful, please share it with friends or relatives. If you have questions or something that is not clear, please write in the comments column. Thank You. 


Memasang AI Chat Bot di Blogger dengan ChatGPT


Cara mudah pasang AI Chat Bot di Blogger dengan ChatGPT untuk meningkatkan interaksi dan memberikan pengalaman pengguna yang lebih baik.

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:

  1. Buka halaman Api Key OpenAI dan Login dengan akun kalian. Jika belum punya, silahkan daftar saja terlebih dahulu.
  2. Di halaman API Keys, klik tombol Create new secret key.
  3. 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:

  1. apiKey - Ubah API_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.
  2. minCharacter - Ubah JUMLAH_KARAKTER_MINIMAL menjadi angka (Tidak boleh String atau teks). Contoh: 20 (Karakter minimal untuk mengirim Chat adalah 20 karakter).
  3. imageUser - Ubah URL_GAMBAR_USER dengan URL Gambar. Contoh: https://lh3.googleusercontent.com/a/default-user=s56-c.
  4. imageBot - Ubah URL_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.

Labels:

Comments

Post a Comment