-
Notifications
You must be signed in to change notification settings - Fork 3
/
ai-chatbot-scripting.html
337 lines (249 loc) · 13.1 KB
/
ai-chatbot-scripting.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
---
layout: page.njk
title: "The best cognitive AI chatbot interactive scripting tool"
excerpt: "Juji IDE is an interactive development tool that enables scripting, compilation, testing, and debugging of cognitive AI chatbots, similar to using Javascript but much easier than using AIML."
date: 2020-03-31T05:24:53.929Z
---
<section class="why-section intro-section" id="juji-ide">
<div class="jumbotron">
<h2>JUJI IDE</h2>
<h1>Interactive Scripting<br>
<a href="/#juji-smarts" target="_blank">Cognitive AI Chatbot</a></h1>
<p class="w-40">
<a href="https://juji.io/docs/juji-ide/"
target="blank">Juji IDE</a> is an interactive development environment for scripting and testing Juji cognitive AI chatbots. Similar to using Javascript, much easier than AIML.
</p>
<br>
<div class="w-35">
<h3 class="right-align-text">LEARN MORE</h3>
<hr>
<h4 class="one-half-line-text right-align-text">
<a href="#why-chatbot-scripting" class="bold-link">
WHEN TO SCRIPT</a></h4>
<h4 class="one-half-line-text right-align-text">
<a href="#how-chatbot-scripting-works" class="bold-link">
HOW IT WORKS</a>
</h4>
<div class="CTA-btn">
<a href="https://juji.io/signup" target="_blank">
GET STARTED FREE</a>
</div>
</div> <!--end of w-35-->
</div> <!-- end of jumbotron-->
</section>
<section class="content-section first-section" id="why-chatbot-scripting"
name="why-chatbot-scripting">
<div class="container">
<div class="title-area">
<h1>Why Chatbot Scripting</h1>
<p>Juji is a full stack AI chatbot platform. While <a href="/no-code-ai-chatbot-builder" target="_blank">Juji Studio</a> enables you to build AI chatbot with no coding, Juji IDE enables you to further customize a chatbot for more advanced functions. Use the criteria below to decide which tool to use or <a href="#juji-studio-ide">use both together</a>.</p>
</div>
<!--example images-->
<div class="row align-items-start justify-content-around example-row">
<!--card 1-->
<div class="col-md-6 responsive-column">
<div class="card no-border transparent">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-studio.jpg"
alt="no coding AI chatbot builder for best chat design"/>
<div class="card-body more-space">
<h3 class="card-title">When to use Juji Studio<br>
(no-coding chatbot builder)</h3>
<p class="card-text">If you prefer to build a chatbot using a graphical user interface (GUI) with no coding and your primary needs are to:</p>
<ul>
<li>build a chatbot to interact with users in one of the <a href="https://juji.io/docs/juji-studio/customize-main-chat-flow/#type-of-chatbot-message" target="_blank">Juji message formats</a></li>
<li>use Juji pre-built AI and <a href="https://juji.io/docs/function/" target="_blank">system functions</a></li>
<li>use custom chatbot elements only once</li>
</ul>
</div> <!--card-body-->
</div> <!--end of card-->
</div> <!--card 1-->
<div class="col-md-6 responsive-column">
<div class="card no-border transparent">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-ide.jpg"
alt="best chat design: interactive scripting of ai chatbot"/>
<div class="card-body more-space">
<h3 class="card-title">When to use Juji IDE<br>(scripting a chatbot)</h3>
<p class="card-text">If you don't mind coding, similar to coding up a web page in HTML or Javascript, and your primary goals are to</p>
<ul>
<li>build a chatbot involving complex business logic (e.g., displaying data in an interactive chart)</li>
<li>plug-in third-party AI (e.g., NLP) or <a href="https://juji.io/docs/udf/" target="_blank">your own functions</a></li>
<li>package your custom chatbot elements for reuse</li>
</ul>
</div>
</div>
</div> <!--card 2-->
</div> <!--end of example row-->
</div> <!--container-->
</section>
<section class="content-section step-section" id="how-chatbot-scripting-works"
name="how-chatbot-scripting-works">
<div class="container">
<div class="title-area">
<h1>How It Works</h1>
<h2 class="muted-heading">TWO-STEP PROCESS</h2>
<p>First, <a href="#script">script</a> an AI chatbot, which is to describe a chatbot's behavior in a computer language. Second, <a href="#compile">compile</a> or directly <a href="#preview-chatbot">preview</a> the chatbot. After you are satisfied, you can then <a href="/no-code-ai-chatbot-builder#launch" target="_blank">launch the chatbot</a> to meet your audience.</p>
</div>
<div class="row justify-content-between" name="script" id="script">
<div class="col-md-6 responsive-column">
<div class="text-block">
<h4 class="super-script-title">STEP 1</h4>
<h1>Script Chatbot</h1>
<br>
<h4 class="one-half-line-text">Similar to programming a web page's behavior in HTML and Javascript, you use <a href="https://juji.io/docs/reference/" target="_blank">Juji REP language</a> to describe a chatbot's behavior. Here is a <a href="https://juji.io/docs/script/" target="_blank">step-to-step guide</a> to script a chatbot.</h4>
<br>
<h4 class="one-half-line-text">As shown in the examples below, Juji REP language is a <i>high-level</i> chatbot scripting language that enables you to customize various chatbot elements at a high level. Minimal coding skills required (e.g., the abilities to code HTML or Javascript).</h4>
</div> <!--text block-->
</div> <!--text col-->
<div class="col-md-5 responsive-column">
<img class="lazyload"
alt ="best chat design: using a development environment of ai chatbot"
data-src=
"/assets/img/ui/bluedrop-3-left.png">
</div>
</div> <!-- row-->
<!--example screenshots-->
<div class="row align-items-start justify-content-around example-row">
<!--card 1-->
<div class="col-lg-4 responsive-column">
<div class="card no-border">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-ide-custom-topic.png"
alt="best chat design: defining a custom conversation topic of ai chatbot in chatbot flow design"/>
<div class="card-body more-space">
<h3 class="card-title">Custom Conversation Topic</h3>
<p class="card-text">Write a <a href="https://juji.io/docs/concept/#topic" target="_blank">custom conversation topic</a> as shown above to deeply customize your chatbot with unique business logic. Juji will automatically manage the topic activation and interruptions at run time.</p>
</div>
</div> <!--end of card-->
</div>
<!-- card 2-->
<div class="col-lg-4 responsive-column">
<div class="card no-border">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-ide-custom-fallback.png"
alt="best chat design: customize chatbot fallbacks
of ai chatbot"/>
<div class="card-body more-space">
<h3 class="card-title">Advanced Chatbot Q&A</h3>
<p class="card-text">Add your <a href="https://juji.io/docs/juji-ide/#add-self-defined-complex-faqs" target="_blank"> advanced chatbot Q&A </a> or <a href="https://juji.io/docs/juji-studio/customize-qa/" target="_blank"> custom fallback</a> to customize your chatbot behavior. Enable it to properly respond to complex user questions or interruptions during a conversation.</p>
</div>
</div>
</div> <!--card 2-->
<!-- card 3-->
<div class="col-lg-4 responsive-column">
<div class="card no-border">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-ide-reuse-custom.png"
alt="best chat design: reuse chatbot flow design"/>
<div class="card-body more-space">
<h3 class="card-title">Reuse Custom Elements</h3>
<p class="card-text">To save time and effort, reuse the custom topics you have already written to build chatbots. You can do so easily by just copying and pasting the topics into your custom file shown above.</p>
</div>
</div>
</div> <!--card 3-->
</div> <!--end of card row-->
<br>
<h3 class="right-align-text">
<a class="text-link" href=
"https://juji.io/docs/juji-ide/#chatbot-scripting-resources"
target="_blank">LEARN MORE
</a>
</h3>
</div> <!--container-->
</section>
<section class="content-section step-section" id="compile" name="compile">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 responsive-column">
<img class="lazyload"
alt= "best chat design: compile and test chatbot"
data-src=
"/assets/img/ui/bluedrop-horizontal-lines.png">
</div> <!--col-->
<div class="col-md-5 responsive-column">
<div class="text-block">
<h4 class="super-script-title">STEP 2</h4>
<h1>Compile Script and Preview Chatbot</h1>
<br>
<h4 class="one-half-line-text">one-click to compile your chatbot script or preview (implicit compilation) your chatbot, instantly.</h4>
<br>
<h4 class="one-half-line-text">follow the compilation messages to debug your script, fix errors, and iteratively improve your chatbot. </h4>
<br>
<br>
</div> <!--text-block-->
</div> <!--col-->
</div> <!--row-->
<!--example images-->
<div class="row align-items-start justify-content-around example-row">
<!--card 1-->
<div class="col-md-6 responsive-column">
<div class="card no-border">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-ide-compile.jpg"
alt="compile chatbot script"/>
<div class="card-body more-space">
<h3 class="card-title">Compile Chatbot Script</h3>
<p class="card-text">Click on the "Compile" button to compile your chatbot script. Follow the compilation messages to resolve any errors.</p>
</div>
</div> <!--end of card-->
</div> <!--card 1-->
<div class="col-md-6 responsive-column" id="preview-chatbot">
<div class="card no-border">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-ide-preview.jpg"
alt="preview and test a chatbot"/>
<div class="card-body more-space">
<h3 class="card-title">Preview Chatbot</h3>
<p class="card-text">Click on the "Preview" button to compile and preview your chatbot. Test and improve the chatbot iteratively.</p>
</div>
</div>
</div> <!--card 2-->
</div> <!--end of example row-->
<h3>
<a class="text-link" href=
"https://juji.io/docs/juji-ide/" target="_blank">LEARN
MORE</a>
</h3>
</div> <!--container-->
</section>
<section class="content-section step-section" id="juji-studio-ide" name="juji-studio-ide">
<div class="container">
<div class="title-area">
<h1>Juji Studio + Juji IDE</h1>
<h2 class="muted-heading">FASTER TO BETTER CHATBOT</h2>
<p>To build an AI chatbot, you can take advantage of both <a href="/no-code-ai-chatbot-builder" target="_blank">Juji Studio</a> and Juji IDE. Specifically, you use Juji Studio to create, deploy, and manage a chatbot, while using Juji IDE to customize the chatbot when you could not do so in the GUI. As shown below, Juji Studio auto-generates all the <a href="https://en.wikipedia.org/wiki/Method_stub" target="_blank">stubs</a> for you to customize.</p>
</div>
<!--example images-->
<div class="row align-items-start justify-content-around example-row">
<!--card 1-->
<div class="col-md-6 responsive-column">
<div class="card no-border">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-studio-ide-1.jpg"
alt="best chat design: no coding AI chatbot builder"/>
<div class="card-body more-space">
<h3 class="card-title">Chatbot Creation in Juji Studio</h3>
<p class="card-text"><a href="/no-code-ai-chatbot-builder" target="_blank">Create an initial chatbot in Juji Studio</a>. Juji will automatically generate a set of chatbot script files. Click on the red round icon located at the lower left of the window (see above) to access the files in Juji IDE.</p>
</div>
</div> <!--end of card-->
</div> <!--card 1-->
<div class="col-md-6 responsive-column">
<div class="card no-border">
<img class="card-img-top with-shadow lazyload"
src="/assets/img/content/juji-studio-ide-2.jpg"
alt="customize ai chatbot using scripting"/>
<div class="card-body more-space">
<h3 class="card-title">Chatbot Customization in Juji IDE</h3>
<p class="card-text">Use <a href="https://juji.io/docs/juji-ide/#code-editor" target="_blank">the code editor</a> in Juji IDE to view and edit the auto-generated stubs (see highlighted above). Write custom topics in the .custom and <a href="https://juji.io/docs/juji-ide/#add-self-defined-complex-faqs" target="_blank">.faq file</a> to customize the chat flow and chatbot Q&A, respectively.</p>
</div>
</div>
</div> <!--card 2-->
</div> <!--end of example row-->
<h3 class="right-align-text">
<a class="text-link" href="https://juji.io/docs/juji-ide/#chatbot-scripting-resources"
target="_blank">LEARN
MORE</a>
</h3>
</div>
</section>