How to Write a Simple Chatbot (part II)

Last time you learned the basics of making a rule-based chatbot that can respond to some basic triggers (hi, yes, no, maybe, what is the meaning of life). Nifty but not too journalistic, so now we’re going to progress toward making a simple on-the-rails explainer (remember those?) using buttons.

For a great example of this, remember the Quartz News (nee Quartzy) chatbot from class. The bot may seem complex, but if you walk through one of its stories, you actually have very few options – many checkpoints only provide a single option, and the ones that provide more quickly return to the main story. This simple engagement, coupled with a distinctive voice and an interesting story, provides a way to relate the news via your bot, and it’s pretty much all done with buttons. Let’s make one!

Your first button

Select your bot from last time and go into Edit mode (the pencil icon). We’ll keep our hi/Hello There! first interaction, but we’ll have our bot follow it up with a button to direct the reader’s next step.

Your first two lines of code should say:

+ hi

– Hello there!

Hit return twice and add the following:

+ intro button

– 

Add a space after the – and leave your cursor there. Next, do the following:

  1. Click the button icon at the top of the edit panel (second from the left).
  2. This adds the button code, which will look like this: ^buttons(First Choice, Second Choice, Third Choice)
  3. The text is all placeholders. The only things you can’t change are the punctuation marks ^ and ()
  4. Delete everything in the parentheses and replace it with “What are you?
  5. Back at the top, after “Hello There!” add a space and the code {@ intro button} so the button will show up after the robot is triggered with “hi”

Right now you’ve created a button that doesn’t go anywhere – give it a try! Next, we’ll make it do something by adding the following code:

+ what are you

– I’m a bot!

Publish and try it out! Your code should now read:

+ hi
– Hello there! {@ intro button}

+ intro button
– ^buttons(what are you)

+ what are you
– I’m a bot!

Did it work? If not, go through our troubleshooting list (is it published? are there capitals or punctuation in triggers? did you add the {@ intro button} code in your bot’s first response?). If not, check in with me and we’ll see.

Adding more buttons

This is the simplest button scheme you can have – there’s only one choice! What I’d like you to do now is add in a second option for the reader who already knows what a bot is. Back in the response to + intro button, add a comma after what are you and add a second option, who made you It will look like this now:

+ intro button
– ^buttons(what are you, who made you)

Then, at the bottom of your code, add this new trigger/response pair:

+ who made you

– You did, silly!

Publish and try it out! If it fails, run through the usual steps, which you should be getting pretty good at.

Tell me a story

Now you know how to write button code with ^buttons() and how to call that code with { }. From here, we’re going to turn this to something more practical. Identify a simple story related to your interests that can be told in three stages (plus an introduction). Think again of the Quartz News example – we’d call this an explainer – and don’t overthink it!

  • Keep it short and conversational!
  • Each stage should progress via a single button
  • Try at least one stage with two buttons

When you’re done, go to the deploy menu, click the switch that deploys your bot (it won’t work otherwise, as we learned last time), paste the code at pste.edu and give it a try. If it works, go to this link (it’s a Google Doc) and add your chatbot (with your name and description) to the list. Let’s see what you come up with!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: