Chatbot dengan Apps Script
1. Login Google Drive
2. Copy Skrip Google Apps (Klik di sini)
Klik ikon Copy (perhatikan gambar di bawah ini)
3. Terdapat file default
- Code.gs
- chat.html
function doGet() { return HtmlService.createTemplateFromFile("chat").evaluate() .setTitle("Chatbot by Javabitpro") .addMetaTag('viewport', 'width=device-width, initial-scale=1') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); }
5. Copy dan pastekan script di bawah ini ke chat.
<section id="demo">
<div class="vertical-align">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
<div class="card no-border">
<div id="chat" class="conv-form-wrapper">
<form action="" method="GET" class="hidden">
<!-- Pesan Pembuka -->
<select data-conv-question="Halo! Saya Robot Javabitpro, Bisakah saya menunjukkan beberapa fitur? " name="first-question">
<option value="yes">Boleh</option>
<option value="sure">Tentu saja!</option>
</select>
<!-- Pesan Permintaan Nama -->
<input type="text" name="name" data-conv-question="Baik! Pertama, tolong beri tahu saya nama lengkap Anda.|Oke! Tolong, beri tahu saya nama Anda terlebih dahulu.">
<!--Lanjutan Pesan Permintaan Nama -->
<input type="text" data-conv-question="Apa Kabar, {name}:0! Senang berkenalan dengan Anda. (perhatikan bahwa pertanyaan ini tidak mengharapkan jawaban apa pun)" data-no-answer="true">
<!--Pesan Banyak pilihan -->
<input type="text" data-conv-question="Web Apps Script ini juga mendukung multi-pilih. Mari kita lihat contohnya." data-no-answer="true">
<select name="multi[]" data-conv-question="Jenis musik apa yang kamu suka?" multiple>
<option value="Pop">Pop</option>
<option value="Dangdut">Dangdut</option>
<option value="DJ">DJ</option>
<option value="Instrumental">Instrumental</option>
</select>
<!--Pesan pilihan dengan percakapan sesuai jawaban anda -->
<select name="music" data-callback="storeState" data-conv-question="Apakah kamu seorang musisi?">
<option value="yes">Iya</option>
<option value="no">Bukan</option>
</select>
<!--Pesan jika anda menjawab yes -->
<div data-conv-fork="music">
<div data-conv-case="yes">
<input type="text" data-conv-question="Halo teman musisi!" data-no-answer="true">
</div>
<!--Pesan jika anda menjawab no -->
<div data-conv-case="no">
<select name="thought" data-conv-question="Pernahkah Anda berpikir untuk belajar? Menjadi musisi itu asik lo!">
<option value="yes">Iya</option>
<option value="no">Lain kali</option>
</select>
</div>
</div>
<!--Pesan validasi email -->
<input type="text" data-conv-question="Silahkan masukkan email anda! (ini adalah contoh validasi email)" data-no-answer="true">
<input data-conv-question="Masukkan Email Anda" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" id="email" type="email" name="email" required placeholder="Masukkan email anda">
<!--Contoh Pesan passsword -->
<input type="password" data-conv-question="Sekarang beri tahu saya sebuah rahasia (seperti kata sandi)" data-minlength="6" id="senha" name="password" required placeholder="password">
<!--Pesan dengan tautan Url -->
<select data-conv-question="Pilih salah satu! (ini juga support klik url)">
<option value="google" data-callback="google">Google</option>
<option value="javabitpro" data-callback="javabitpro">Javabitpro</option>
</select>
<!--Pesan Callback -->
<select name="callbackTest" data-conv-question="Anda dapat melakukan beberapa hal keren dengan beberapa fungsi. Ingin kembali ke pertanyaan 'Musisi' sebelumnya?">
<option value="yes" data-callback="rollback">Iya</option>
<option value="no" data-callback="restore">Tidak</option>
</select>
<!--Pesan Penutup -->
<select data-conv-question="Terima kasih sudah sudah meluangkan waktu anda! (ini adalah pesan penutup)." id="">
<option value="refresh" data-callback="refresh">Terimkasih</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="demo">
<div class="vertical-align">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
<div class="card no-border">
<div id="chat" class="conv-form-wrapper">
<form action="" method="GET" class="hidden">
<!-- Pesan Pembuka -->
<select data-conv-question="Halo! Saya Robot Javabitpro, Bisakah saya menunjukkan beberapa fitur? " name="first-question">
<option value="yes">Boleh</option>
<option value="sure">Tentu saja!</option>
</select>
<!-- Pesan Permintaan Nama -->
<input type="text" name="name" data-conv-question="Baik! Pertama, tolong beri tahu saya nama lengkap Anda.|Oke! Tolong, beri tahu saya nama Anda terlebih dahulu.">
<!--Lanjutan Pesan Permintaan Nama -->
<input type="text" data-conv-question="Apa Kabar, {name}:0! Senang berkenalan dengan Anda. (perhatikan bahwa pertanyaan ini tidak mengharapkan jawaban apa pun)" data-no-answer="true">
<!--Pesan Banyak pilihan -->
<input type="text" data-conv-question="Web Apps Script ini juga mendukung multi-pilih. Mari kita lihat contohnya." data-no-answer="true">
<select name="multi[]" data-conv-question="Jenis musik apa yang kamu suka?" multiple>
<option value="Pop">Pop</option>
<option value="Dangdut">Dangdut</option>
<option value="DJ">DJ</option>
<option value="Instrumental">Instrumental</option>
</select>
<!--Pesan pilihan dengan percakapan sesuai jawaban anda -->
<select name="music" data-callback="storeState" data-conv-question="Apakah kamu seorang musisi?">
<option value="yes">Iya</option>
<option value="no">Bukan</option>
</select>
<!--Pesan jika anda menjawab yes -->
<div data-conv-fork="music">
<div data-conv-case="yes">
<input type="text" data-conv-question="Halo teman musisi!" data-no-answer="true">
</div>
<!--Pesan jika anda menjawab no -->
<div data-conv-case="no">
<select name="thought" data-conv-question="Pernahkah Anda berpikir untuk belajar? Menjadi musisi itu asik lo!">
<option value="yes">Iya</option>
<option value="no">Lain kali</option>
</select>
</div>
</div>
<!--Pesan validasi email -->
<input type="text" data-conv-question="Silahkan masukkan email anda! (ini adalah contoh validasi email)" data-no-answer="true">
<input data-conv-question="Masukkan Email Anda" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" id="email" type="email" name="email" required placeholder="Masukkan email anda">
<!--Contoh Pesan passsword -->
<input type="password" data-conv-question="Sekarang beri tahu saya sebuah rahasia (seperti kata sandi)" data-minlength="6" id="senha" name="password" required placeholder="password">
<!--Pesan dengan tautan Url -->
<select data-conv-question="Pilih salah satu! (ini juga support klik url)">
<option value="google" data-callback="google">Google</option>
<option value="javabitpro" data-callback="javabitpro">Javabitpro</option>
</select>
<!--Pesan Callback -->
<select name="callbackTest" data-conv-question="Anda dapat melakukan beberapa hal keren dengan beberapa fungsi. Ingin kembali ke pertanyaan 'Musisi' sebelumnya?">
<option value="yes" data-callback="rollback">Iya</option>
<option value="no" data-callback="restore">Tidak</option>
</select>
<!--Pesan Penutup -->
<select data-conv-question="Terima kasih sudah sudah meluangkan waktu anda! (ini adalah pesan penutup)." id="">
<option value="refresh" data-callback="refresh">Terimkasih</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Copy dan pastekan script di atas pada file chat.html setelah <body>