Chatbot UI Elements for Fb Messenger – How to Make a FB Messenger Bot Course

Let's say that you wanted to change this
up, what would you do? Well you come back here to code and once
you're at this point what you need to do is you need to come to line 35 which is
app.post. This is your webhook right here and a little bit about how it works: If the text equals 'aha', send generic
message sender. So, what is generic message sender? Well,
here it is function generic message sender, now this is the the cards that
are provided by Facebook. Let's go over them real quick. This
template again, it's a template, the template type is called 'generic' and
here's your title of your card and now you can name this anything you could say
this is you know you can call it your 'hello world' or it could be a part of your tutorial
you can call anything you wish! The subtitles the second element of the card,
which is right here, subtitle, right here, element one has pointed out and then
finally your image URL ok which is the image.

Now facebook has a
very specific image ratio that it wants you to conform to, I believe it's 1 to 1:91
something like that, make sure that your images fit it will
work. If they don't however, it might give you a hard time
going live with that because images might be true too large. So make
sure you conform to the standards and then after that, you see you have your
buttons right.

So, in this case this is the first card
you have two buttons and you have a type this is this type of button is called a
post back button and this type of button is called a URL button. So the URL button
clearly has a title which is the name of the button and it goes to a to link so
you put those elements in. For postback change the title to anything you want
and the payload is what is said once that button is clicked and this is what
a set of this time.

So now this is the second card, now the
second card only has one type of button and that is the post back button. So
again you can have up to three buttons per card and also if you go on Facebook there's
different types of cards. So, there is a payment card, there's a card without a picture and so
on. So if you want more information on cards in generic messages refer to the
Facebook documents. So in this new file right here, I have updated it I called it indexTest.js so here my indexTest.js let's see where
I'm at.

Ok I've changed some of these elements
and we'll just change some of them for fun right here. The 'hi' is that the thing that will get
us going, i will say i like parrot and then i've updated some of the cards so
and this I've called it meditation, I gave it a
subtitle of increase happiness one thankful thought at a time and give it a
little image, a web URL and a title. Ok and then this one I gave it three
buttons instead of one or two buttons so, you can see what that looks like. And
then I did a second card and then a third card. So each of these three cards has
three buttons and i have updated the types, the titles, the payloads, the
links and so on. So let's see what that looks like now, I could go into to
here in rewrite this on the index file but it would just be easier if I renamed
this or we named both of them.

So let me come to index, I'll do rename, save and then I'll come to test. Don't want to delelte it. Rename and
just eliminate the test, make sure its 'index.js'. The index.js file is the
main file of any javascript application so once we've done that we
want to save it 'command s' and then we want to come in
to our terminal. Let me clear this and we want to do: 'git add .' and 'git commit' remember when you do that 'git commit' you
want to do 'dash dash message' and we'll say, 'we're updating our card' so boom just updated it. And then finally,
what we want to do is we want to push it to heroku.

So 'git push heroku master' Let's push this out to heroku,
installing the modules, and BAM! So the build has been successful, now
just compressing it, launching it, deploying it and here we
are. So it should work! So let's go and see what it looks like.
So again this is what it looked like before we would say 'hi', the parrot says, 'hi', 'Yo what's up?', the parrot says, 'Yo what up?'
'Aha' and we got our cards! So now, let's go to
different message by just saying 'yo' and now it says parrot, 'yo'.

So you see how here it says: Parrot Says: yo and here it just says: Parrot? And now let say, 'hi' and now we're getting the cards right
because we changed our trigger word. Of course, you could add more trigger
words, you can have multiple trigger words so it makes your app for more
conversational. So let's see what this looks like: Here i use the animated gif, you can see
that looks pretty cool now it does not show up on the messenger
app for the iphone. I don't know why, maybe it's the .gif is
too big, maybe it's that size properly but it does show up on the web version
which is kind of cool and you can see here i added a number of different


Leave a Reply

Your email address will not be published. Required fields are marked *