JP040 Chatbot dengan Apps Script

LIVE
JP040 Chatbot dengan Apps Script

Jika Merasa Layar Kurang Besar,
Tekan Tombol Ctrl dan + pada Keyboard secara Bersama-sama

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

4. Copy dan pastekan script di bawah ini ke Code.gs

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>