Code Monkey home page Code Monkey logo

estherbot's Introduction

EstherBot built using the Smooch Bot example

If you want a slightly more sophisticated setup and are comfortable using the console then go see the original here: https://github.com/smooch/smooch-bot-example

Or if you want to test out EstherBot live go say hi on your platform of choice: http://estherbot.com

Build Your Bot

Creating this version will give you a web based chat app. With a few integrations inside of Smooch (like Twilio) you can have your bot talking on other platforms too including SMS, Facebook, and Telegram.

heroku

Get Started:

  1. First, sign up for a free account at smooch.io

  2. With a new Smooch app created, go to the settings tab and take note of your App Token. Also, generate a new Secret Key, and take note of the key ID and secret.

    settings

  3. Deploy your app to Heroku using the button below. It's a service for hosting apps so go sign up if you don't already have an account โ€“ it's free. You'll need to specify your app token, key ID, and secret in the app's SMOOCH_APP_TOKEN, SMOOCH_KEY_ID, and SMOOCH_SECRET config settings.

    Deploy

  4. Your app should now be running on Heroku but you're not quite done yet. Take note of the URL where your heroku app is running, for example https://foo-bar-4242.herokuapp.com. You'll need to specify this in your heroku app SERVICE_URL config variable. You can do this in the Heroku control panel under Settings > Config Variables. Make sure to go under Deploy and connect to your GitHub repo. Then, enable Automatic Deploys from the master branch (this means anytime you make an edit to your bot's script, it'll automatically update and talk as intended in seconds.)

  5. You should be all set. Open your Heroku app and start chatting with your new bot!

##Teach Your Bot To Talk Now that you have a bot you need to decide what it'll say. That's where the file script.json comes in. It's the document you need to edit to make your bot talk.

By clicking on the pencil icon you can edit the document. The keywords are on the left, and the bot's response is on the right. For example, if a user types "hello" then the bot will say "Sweet, let's do this..."

Keywords are not case sensitive for users.

The only two keywords you don't want to change are CONNECT ME and DISCONNECT. CONNECT ME turns the automated chat off, so the bot will stop responding to keywords. DISCONNECT will turn the bot back on.

Also, the initial script starts with "So you want to learn about Esther? ..." but of course you'll want to change it. You can edit it in the script.js file.

##Add line breaks to your messages If you want your bot's responses to be broken into different bubbles you'll need to add \n. Here's an example: Hi there!\nIโ€™m the personal bot of Esther, a Product Marketer from San Francisco.

Now that message will be broken into two bubbles. First, it'll say "Hi there!" then it'll say "I'm the personal bot of Esther, a Product Marketer from San Francisco."

##Add images to your messages Adding pictures is super easy. Make sure you upload the files to your img folder. Then click on the image and select Raw to get the link for your image.

Here's an example of the syntax for adding an image: image

##Add buttons to your messages On Facebook Messenger these buttons are called "structured messages". It makes it easier for your user to follow the script. They don't even have to type the keywords - they just have to select a button. That means fewer user errors and less frustration.

In the script.json file you'll notice this: buttons

What you need to know is that's a button. The "I'm here for the bot" piece is what the button says. The postback reference is for you to know what the button does.

Here's the syntax for a button that sends a user to an external link: Tweet Esther

Notice "Tweet Esther" is what the button says, and then inside the parenthesis you find where the button links off to.

##Bring it altogether Read the code below and you'll see there are line breaks, an image, and 3 buttons in this bot's response.

all

##Bonus Open the Smooch control panel and add more integrations. You can add new user channels like Twilio SMS, or you can add Slack or HipChat which will let you join in on the conversation along side your bot. Pretty neat!

slack

##Troubleshooting your bot Andrew at Smooch.io added some info for how to get your bot in line if it's acting up. It requires the command line so here you go: https://github.com/alavers/EstherBot/blob/troubleshooting-docs/README.md#troubleshooting-your-bot

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.