(0:00 - 3:06) All right, so now that we have gone through the basics of setting up the bot so that it shows on your site, next we are going to take a look at how to display rich response messages. So the first one I am going to consider is this description response type and you can see that it is actually a very simple type of rich response. There is a heading and it is bold text and then it is just a bunch of lines of text after that.
There are no other elements in this description response type. So what I am going to do is copy the whole thing and let us go to our dialog flow agent and I am going to add a new intentBoth Dialogflow ES and Dialogflow CX have the concept of int... More called show description type and in the training phrase I am just going to say show me description or just let us just keep it like that, very simple, show me description and you have to go to the custom payload here, you cannot use this text response and just paste whatever you got from there and you can delete this text response if you want. Now save it.
All right, so this is what we have and just to make sure that it works, type that same phrase over here. Now you can see that the intent is firing correctly but unfortunately there is no way to preview that it is giving you the correct, I mean you cannot preview what the output is going to be but we at least know that the intent is right. So what I am going to do now is go to my editor, open this page and I am going to just type show me description and you get it like that.
So you have this title and this is text line 1, this is text line 2. So that is how the description type is going to be added into your chat bot, into your website chat widget and you can see that this is the same pattern that we are going to follow for the rest of the rich responses. Basically I am going to have this training phrase which says show me rich response of a certain type and I am going to have some information that some kind of a JSON object I am going to put into the custom payload and that JSON will be rendered as the appropriate rich response in the chat widget and that is the pattern that we will keep repeating except that there are a few nuances that you need to learn to make sure that you are, I guess do not mix up the type of response and its behaviors and things like that. So we will see all those things in the future videos.
Info Type
(0:00 - 6:47) Another rich response which is available in the Dialogflow messenger is the information response type, the info response type, it's a it's a card type that is it has image and the title and some information sort of like some other text below that and it will also usually be able to it's sort of like an active card in the sense that you can click on it and it will take you to another page so you can see that there's a title, subtitle and then there's an image object which has a source that is the URL for the image and okay the URL is actually in another field called raw URL and then you can also see that there is an action link which is the URL that it's going to navigate to when you click on it. So let's copy this, go to our Dialogflow agent, add a show info type and I'm just going to say show me info and once again delete that, add a custom payload, paste what you copied from over there but remember that these are now going to be like inactive or incorrect URL so you it will not just work just like that so let's just change this to google.com and as for the raw URL I'm going to leave it as it is and just see what happens I think it's not going to work properly so let's try this now show me info should return this intent which it does and let's go to the WebStorm, open it, wait for it to load, show me info so it did come back with the response and the title is fine, the subtitle is fine notice that the image is missing and also notice that when I when I have a cursor over it it actually turns into something which is like a clickable object so you click on it and you can see that it's actually going to google.com just like we had provided the information so this is the basic concept I'm not going to go into too much detail into this you can figure out how to add the URL for the image by yourself it just has to be image to some known public URL which is accessible you know if you were to type that URL into the browser you should be able to see that image you know that's the basic idea so that's pretty much all it all there is to this particular type of response and what I will also encourage you to do is just to see if you can remove certain elements which to find out whether all of them are actually mandatory so what I'm going to do now is let's see if I can delete the action link and if it still works as expected will it just show something or will it just error out completely so let's let's open this and let's come with show me info and it's working and just you can see that instead of this card being active even when my cursor is over it it doesn't turn into like a hyperlink or a linkable clickable thing it just remains like a piece of information which is static so you can see that it's possible to omit the action link that's one thing and also you already know that this URL does not actually have to be I mean even if it's pointing to some image which doesn't even exist anywhere on the internet it seems to be just looking to see if that image format is okay now let's see if we remove the subtitle also let's see if that still works so we remove the subtitle now let's go to this page and over there show me info still works so you have a title and there's this non-existent image and it's in it still seems to work quite fine now what happens if I remove this image object entirely so that's my next question will it still work so all we are left with is the title and then the type both of which I would think that both of which are actually mandatory so we save it go back to web storm open the page again and so so it still works in fact so in fact all that is needed it looks like is the title and that's it you have to specify the type so just for you know just for my curiosity I'm also going to remove the title and see if that works I hope it doesn't because that means it'll come back as a blank thing like which nobody can understand what's going on so there is there it is I've saved it so now let's go to the page show info yeah see it did actually have some kind of weird behavior it's pretty clear that it's not able to do something which which can it's not coming back with you what you might see is a sensible response so let's go back and add the title back into this title and save it let's try this now there you go so this is the bare minimum that you need you need to have the type and which is info and you need to specify the title so this is one of the things that I would encourage you to do which is to see which of these are mandatory requirements and which of these can be omitted because obviously you know you have to like hand write or hand code this information so the less stuff you need to put in here the less chances that you will actually make a mistake so you if you can figure out like the bare minimum JSON object which is required for you to see the results that you want that will make things a lot easier for you so let's go ahead and save that and that's it for the info response type
Button Type
(0:00 - 6:53) Alright, so next we are going to see the button response type and this one is a little bit tricky that's what I would say. So to get started let's go to the agent and create an intent called show button type. Let the phrase be show me button that's sufficient.
And what I'm going to do is copy this, go to the intent, delete this text response, add the custom payload, paste whatever I got from there and instead of example.com I'm going to change it to google.com so that it's a real actual valid site. I also want you to notice something. Notice that it has this event field inside the rich content.
So you can see that the button field has three fields, the language code. So I'm going to make it en and since we have an event called parallel I'm going to add that into this into this name over here and I'm not going to pass any parameters to that event. So let's just save that.
So you can see that there is some text which is just called button text. There is an icon and there is this event and there is the type which explains what type it is to dialogue flow. In this case it's a button and then you have this finally this hyperlink okay.
So if you go to the editor and if you ask for this type of response show me button. So it did come back with a response that's great and also notice that it's a clickable button right. Now if I click on it I want you to see what actually happens.
So I'm going to click on it. Now this is good because it is opening the the URL that is specified in a new tab and then when you go back to the page which had the chat widget you also see that it comes back with this hello from the parallel universe. Now this is coming here because we had this event called parallel.
When you click on this button it opened this google.com URL and also it sent this it sort of invoke the event called parallel in your agent and of course we know that if you do that it's going to come back with this response hello from the parallel universe. Now this is this is all fine and it's a sort of expected but the problem with the button type is that its behavior is not changing even if I remove that link. So here's what I'm going to do I'm going to remove this link from the button and I'm going to save it now.
Alright so let's start this fresh and go here say show me button and I want you to notice something when I click on it it actually opened a new window even though I didn't specify anything in the link. So what it really did is sort of like it went back to the page where it was already there but to the same URL just it's like as if it navigated to no other no no new URL it just stayed on the same page except that of course you are in a new tab and this is where the old tab is still is which has the actual widget like with all your interactions right but it did invoke the event. So what's happened here is even after I removed the link it went to the page which was like a blank page so it just reloaded the page the page same page where the this widget resides and it also invoked the event that we have over here.
So this is not good behavior so when when I have both the event and the link first of all that's I don't think that's good design but even let's say we permit that but if I remove the hyperlink it shouldn't be it should not open a new tab when I click on it if there is no link field it should just if I click on this all it should do is invoke the event and come back with a response it's unnecessarily it's unnecessarily opening this new tab and confusing everybody so and of course you see that I clicked it one more time and it came back with the same event which was invoked again which is which is fine that is expected. So that's the first part of the tricky behavior that I'm talking about now let's say that I remove the event so all I'm left with is the text and the icon and the type so let's save that let's go back to the WebStorm editor open this page and ask the same question now see it still has this link right now if I click on it it goes to the new tab without opening a new page it sort of reloads the same page and it does nothing else which is fine because it's the there is we remove the event option from the response object so it's not supposed to do anything else here so what I'm trying to say is that even though there is a feature which is allowing you to click on the button and invoke an event so that it goes to a new intent in the agent my suggestion would be to use this purely as a button which has a hyper link which goes to a different page in other words what I'm saying is let's go back here and I want to see what so let's take this stay over here and let's paste it and also make sure we change the URL so this is valid so what I'm saying is just keep it like this just have your text and icon and the type and the link and don't use the event because it would not work as you anticipate it might be a bug I hope it is and I hope that the dialogue flow team changes this very soon but for now it's not a reliable response type and I think that the only use for it the way it works right now is to be able to have a hyper link with a button which is like the whole thing should be clickable if that's what you want like this if you want this is the behavior that you want yeah that's fine then go ahead and use the button but otherwise I'm going to recommend that you don't use this button type unless they fix this issue and make it either or behavior
Image Type
(0:00 - 2:31) All right, so next we'll take a look at the image response type and it's supposed to show an image and pretty much that's it. So what I'm going to do is first let's go to dialogue flow, create a new intent called show image type, show me image, delete this, custom payload and let's take this and paste it over here and for the URL what I'm going to do is I'm going to actually take a different image. This is something which is coming from my site so I'm just going to paste it here instead of what they already have.
All right, so that's what I have and instead of example logo let me just change it to MBD image. It doesn't matter. So now let's save it and go to my WebStorm editor and in the chat widget let's just type show me image and you can see that it's loading this image more or less at full size.
So this is this is the behavior of the image type but the the important thing that I want you to notice is that the actual image is smaller. This is the full size of the image. I think it's 150 by 150 or something like that 256 by 256 I guess.
So on the other hand if I were to look at it inside this it just fills up the whole chat widget space. So obviously the resizing is a problem and since it's auto sizing it without giving you an option to make that smaller I think that the only reasonable way to use this image feature is to it's the only reasonable way to use this image feature is to actually have an image which fits this whatever widget size chat widget size that you already have. So you may want to use that with some you know thinking about that but having said that I'm very glad that they actually have this option because this was something which was much needed.
So that's the image response type and as you can see it's a fairly simple response type.
Suggestion Chip Type
(0:00 - 0:55) Okay, so now let us take a look at the suggestion response type, suggestion chip response type rather and this is a good response type in my opinion and it is something that you can use to have buttons in your dialog flow agent in your website chatbot widget. So what I am going to do is add show suggestion chip type, show me suggestion chips and we will go to the response section, add a custom payload and just copy the whole thing and paste it over here and save it. Okay, now I want you to see the different options that you have in this suggestion chip over here.
(0:56 - 1:50) Now notice that it actually has of course the type is chips and then you have this options array inside that each item in that array has a link, it could be pointing to a hyperlink and it has some text and it also has an image, right. Now what I want you to do is unless you have a good reason not to do that, I think that it would be good to use this as just a button which you can click and it will take the text in the button and render it into the chat widget as if the user had typed it and not use it as a feature for hyperlinking out. So just to give you an example, let me just show you what happens if you keep the hyperlink.
(1:50 - 3:11) So let's have google.com, yahoo.com and you have chip 1 and chip 2 and I think that the images are probably going to be wrong but we will just go with this and see what happens. So let's do that and here in my editor, open this and allow it to load, show me suggestion chips and of course it loaded these two buttons and you do notice that the logo image is pointing to an invalid URL which is why it comes with this like broken image sort of representation and notice that it has this arrow pointing out and if you click on it, okay so this is great, it does go to google.com and now you see that both the chips are basically gone from this widget and I don't like this behavior for a couple of reasons but the first thing is that when you click on a link, it links out and so I guess I am not going to say I don't like this feature but I am just pointing out that there are two different ways to use it, one of which is not very optimal. So this is what happens if you actually had the hyperlinks.
(3:11 - 3:34) So let's close this. Now what I am going to do is I am going to remove the link from these two chips, okay and let's go ahead and save it. So what happens here is that you have these two options, you have chip 1 and chip 2 but you don't have any hyperlinks associated with the suggestion chips.
(3:35 - 4:19) So if you were to open your chat widget and ask for the suggestion chips again, now notice that if I were to click on it, first of all you don't see this like arrow pointing away sort of like a new URL icon. So you can see that this is not associated with any URL but the other advantage of this is that look at what happens if I click on this button. So it actually loaded or rather it actually sent this message chip 1 and it deleted the old suggestion chips.
(4:19 - 4:55) Now it actually reloaded the chips again because of the way we have constructed the bot. It's actually taken this phrase and it's effectively sent that as if the user typed that but because this is quite similar to this phrase over here we have, it's again been mapped to the same intent effectively. Now to avoid that what I am going to do is let's close this instead of having it say chip 1 I am just going to say yes and then instead of chip 2 I am going to say no as if the user is making a choice and let's save that.
(4:56 - 5:26) Now let's run it again. Show me suggestion chips and you have this yes and no. So now let's say if I say, if I click on this yes, what happened is the behavior is as if the user clicked on or typed the word yes and if they typed yes there is nothing handling the phrase, the word yes in the intent, in the agent right now.
(5:26 - 5:54) So it just went to the fallback which is why you are seeing this what was that. So this is a great, I think this is a great option like in other words these suggestion chips allow you to do two things. First of all whenever you have, you are asking the user to input something but it can be represented, whatever you are asking them to input can be represented as a list of options.
(5:54 - 6:21) They can just, you can just present that information to them as suggestion chips and if they just click on one of them it not only types that text into the chat widget and it's also going to send that text across to dialogue flow just to be clear. But also it deletes those two suggestion chips and the user can't like accidentally go back and click on them again. Now that's, that behavior is actually different from the other rich response types you have seen before.
(6:22 - 7:10) If you remember I showed you the button where I was able to click on it once and it launched a hyperlink or you know it triggered an event or something like that. But while the, when it was in the chat widget, it was showing in the chat window, I was actually able to click on the button one more time even though that conversation turn had actually already elapsed. We had moved on later to a later point in the conversation but that button was still clickable and I just think that that's not good user design, like that's not good user interface design because if the user were to go back and click, like if they just say scroll up and like they click a very old button which was already there in some previous step.
(7:10 - 7:32) Now what happens if they do that is that suddenly it's not possible for you to design your bot to handle the expected user's inputs. So you will actually have to handle a lot more unexpected things. On the other hand with the suggestion chips like what we have here and the user clicks on the chip, it disappears and it's as if the user typed the text and you have a way to handle it.
(7:32 - 7:48) We move on to the next step in the conversation and now you can see that the user can't do anything other than go to the next question. So this is why I like this suggestion chip feature. Now one more thing I just want to I guess show before we move on.
(7:48 - 8:20) If I remove the image field from this altogether, save it and go here, show me suggestion chips and you can see that it's coming with these two buttons. It's very nice. You don't, it doesn't require that you have an image associated with the suggestion chip and I think that this is even better.
(8:20 - 8:43) So you can just click on it and as expected it triggered the fallback intent one more time. So that's the behavior of the suggestion chip and in fact I think that it's a great feature and I can imagine that it's going to get a lot of use as people build their website chatbots where they want to provide a way for users to select between multiple predefined options.
List Type
(0:00 - 1:34) Alright, so now let's take a look at the list response type. What I'm going to do is go to my agent and say show list type, show me list and in the response I'm going to delete this, add responses, custom payload, come back to this page and copy the whole thing and paste it over here and let's save it. I want you to take a look at what's inside this rich response.
The first is it has a title and a subtitle and then it has a type, these are expected but notice that it actually has an event associated with it. Now unlike the let's say the suggestion chip if you don't have an event associated with the list type it will not work properly okay. So what I'm going to do is I'm going to add the two eventsEvents are used in both Dialogflow ES and Dialogflow CX as t... More that we do have in our bot which is the welcome event and the parallel event and I'll just leave the other things as they are.
So let's let's do that. Now it's saved. I'm going to go back to the editor, open the web chat widget and say show me list.
(1:35 - 8:41) Now I want you to notice something. So it has the list one title, list one subtitle and same way list two and list two subtitle but these two do not give you any hint about what would happen if you were to click on it. So you don't have a there's no indication here that it's going to trigger the welcome intent for this item or the parallel intent for this item.
So I'm going to click on this. So it says sorry I didn't get that can you rephrase I'm wondering if I made some mistake. Oh yeah so this is wrong.
So this has to be parallel and the language code has to be EN and okay that's actually weird it's actually having the same things but you can see that the order is different here is language code name and parameters and here is name parameters and language code for some reason. So let's let's change that and save it, close it, go back to the editor and open this again, click on it, show me list, it comes with these two items and if I click on it it says hello from the parallel universe. Now I did point out last time that you can still click that is this list item this list of items is still active even at this conversation step that's not something that I really like but you can see that it's still active.
So I'm going to go ahead and click on it and you can see that it comes back with the message which is in the welcome message right welcome to the new and improved dialogue for messenger I can show you different types of dialogue for messenger responses in fact I can click on it one more time and it comes with hello from the parallel universe. So this is why I wasn't a big fan of this the list the other rich responses not that I don't want to have these responses but I just think that it would be nice if as soon as we have an interaction with these response types they somehow get disabled so that if I were to click on them again to not do anything if it's past that step in the conversation but it's a design choice that the dialogue flow tool team has made and this is what we have to live with and you know you know that this is the behavior so you can design your bot accordingly. So in any case what you saw here is this is when do you use this list response versus let's say just using suggestion chips to show up a bunch of choices which the user can click.
So the difference between the suggestion chip and the list of items is there are two important differences the first is no matter what text you have on the list item which which actually gets displayed that text item is not going to be it's not going to be seen after that inside the chat widget as you know it's if you click on it it just triggers an event right and the second thing is that which is the same point really in this case the interaction works differently because it has to have an event which is backing every item in the list so if we have 10 items in the list you can use the same event again but you still need to have one event corresponding to each item as you specify it in the JSON object which means that of course every list item should actually be triggering some event in your agent like as I said it could be the same event but you do need to have something backing it right now this has some implications first is that the good is if you want to hide the choice from the user as to when they click on something what is actually getting clicked like let's say that you have some kind of a user ID or something like let's say you have a list of I don't know like some identifying numbers or you know information about list of people or some list of objects or something and you don't want the user who's interacting with your agent to be able to see the underlying unique ID that you're using which is sort of a secret to your system right then the list option makes a lot of sense because you can actually when they click on it it's going to it's going to go and trigger that particular event right now on the other hand because it's not displaying any text as a consequence of clicking on this item it just triggers something and then it comes back with a response that means that you don't have the information about this in your agent if you go and look at the history now you do have the history where it shows that somebody clicked on this like let's let's go to the history of this particular agent right now and you can see that you know this event parallel event was clicked and then the welcome event was clicked and then the parallel event was clicked again but that's still different from having a conversation transcript of what the user typed which is something that you might want in certain other situations so my point is the list is a good choice if you want to actually hide the information about the underlying or even if you just think that it's you may not want to hide it but it just may look like ugly because it's a combination of you know special characters and underscores and hyphens and things like that which you know you may not the end user may not like to see that kind of like geeky stuff and they may want to have more nicer looking English words and stuff in that case you would want to use the list and on the other hand if you're just presenting a set of options the user can click on them transparently and you will have that buttons text just show up in the chat widget if that's what what you want to do in that case the suggestion chip might be a better option so these are the you know sort of two options for selecting between a list of items and as I'm as I'm pointing out for the most part the suggestion chips are better options but there will also be some situations where you will find that the list item is better one one good example is if you just want to show a lot of information in each list item let's just say that this is like a paragraph of text which has to explain what the user is choosing yes then you don't even have any option other than using the list because in that case you can't put so much text into a single suggestion chip it just it will overflow the screen and you'll not be even able to see the whole button
Accordion Type
(0:00 - 0:24) So, the last response type which we have in our possible options is the accordion response type. Now, on first glance, you can see that the accordion response type is just a way for you to, you know, collapse some information so that it does not take up too much space on the chat widget unless the user wants to see the whole thing. So, let us take a look.
(0:24 - 2:07) You can have this accordion type, so I am going to do that. So, I am going to add this show accordion type and I am going to have show me accordion and then let us delete this, add a custom payload and let us come back here, copy this stuff, paste it over here and save it and that is pretty much it, that is what we have And if you were to go to the editor and say show me accordion, you can see that it has got this title and subtitle and you click on it, it has collapsed that information and you have a list just, you know, more information show up and then you can, you know, click on this again and it is sort of collapsed back to its old state. So, this is the basic idea behind the accordion feature and if you were to say like, okay, so that is not exactly a major feature, what is the big deal with that, I actually found out something really surprising and I am just going to point out right now that I am not sure if it is a bug or it is a feature or it is something which is just a beta feature which may, maybe it was intentionally added here but it would be removed in the future but here is what I noticed and it is not even mentioned in the documentation, so I am not sure what is going on there.
(2:07 - 11:27) You can see that there are all these fields and then you have this text field in the rich content, it is one of the fields that you have in your accordion control and as it turns out this text field is very unique amongst all the fields that you have, all the text fields that you have in all the response types and why is that, that is because this text field actually supports HTML inside of it, so to show you what that means, I am going to go back here and in this accordion text what I am going to do is, I am just going to have an inline hyperlink, so this is an inline hyperlink, so let us do that and ahref equals something and let us close the tag and I am going to go to Google and to make it easier, let us do a target equals underscore blank, so that it opens in a new window and let us save it, right. So now I have this well formed HTML inside of the text field in my accordion control, so let us go and see what this looks like and if I were to click on it, show me accordion and notice you can see that it has this, this is an inline hyperlink, right and if I click on it, there you go, it goes to Google and what I have seen is that it actually supports, I think it seems to support all the markdown elements, markdown HTML elements, so to show you an example, let us just do this, right, like I am going to add a paragraph break and then I am going to add, let us say I am going to add bold faced, this is bold faced text and let us close it and then add another line break and then let us do some italics, this is italics, close it, right and then have another line break and then I might have a strikethrough, close it and something like that, so let us save it and let us see how much of this loads as we might expect it, so let us go to the page, open it here and say show me accordion, have this guy, so notice, so it, I think it has done the bold face, that is not very obvious but it is slightly bolded, it is definitely working with the italics, the strikethrough is also working and I tested it before, I think that it also supports things like lists, unordered and ordered lists and one more thing that it supports is images, in fact, so you can have image, source equals something and then close the tag and what I am going to do is, I am going to go to this image I used in the previous lesson and take that and paste it here and I am going to also make sure that I add a line break after that, so that it looks a little better, let us go back to the agent here and let us see, show me accordion and there you go, so you can see that there is your image and then there is the text and it does look like it is somehow like the arrangement does not seem to be very nice and I am not sure what is going on with that, it seems to, first of all it seems to centre the image automatically and the text seems to be automatically left aligned but the base of the image is on the same line as this accordion text, oh you know what, I think that was me, okay, I made this mistake, so let me delete that, now save it and let us try it again, I think this might look much better, so let us go there, show me accordion, there you go, so this is, yeah, you had this image showing which is left aligned and then you have all those, the hyperlink and the boldface text, the italics and the strikethrough, so it seems to support a lot of these regular markdown elements and so this is sort of like an information card, is not it, with the title and a subtitle and if you click on it, it is just going to show all this additional information and it does not have a way to, I mean the whole element cannot become clickable but you can see that individual items like this hyperlink is actually clickable, if you do click on the whole thing, it just, it is a toggle, it is a collapse and expand, that is what happens when you do that, so this is the feature of the accordion response type, I did experiment with adding a YouTube iframe like an embedded YouTube object and that did not work, unfortunately, I also tried to just see if I could insert some JavaScript into that, just to see if there is some way to like sort of inject any script into the HTML and that also got stripped out, so with the fact that it is actually proactively stripping out JavaScript and also not allowing embedded objects and things like that, makes me wonder if this is a legitimate feature and not just some kind of a bug which somehow like sneaked into the code, so at the moment I am not sure what to recommend, I guess you have to wait until they officially say that this is actually supported, that is the accordion type, the text field in the accordion type actually supports like regular HTML until they make an announcement, I would not use HTML inside the accordion because I am not sure what is the reason, why just this response type alone permits HTML while all the others, they just sort of, if you have HTML in the text fields of the other types, other response types, they just show with the tag, like if you want to see an example, let me show you, so if I were to go to the, let us say that we go to the info type, right, which has some, I do not remember what is the name of it, let us go there, so the info type actually has the title, I think this is not good enough, let us go for the description, right, so this has text, so if I were to go to the description type, it has some text here and let us say that I try to just add an inline hyperlink here and save it, right, so we have this well-formed HTML inside the description type over here, now I am going to run the agent and say, show me description, so you can see what happened, it is actually just rendering the entire text along with the HTML, it is not like converting the HTML and rendering it with the appropriate like transformation, so this is true for all the other elements, all the other rich response types that is in the dialogue flow messenger except for the accordion which for some reason supports pretty much all the HTML options that you see in markdown flavors, so that is what I have observed and again as I said I do not still know if this is just a bug or this is an intentional feature which they just have not announced yet, so I would just wait for them to actually make an announcement before I am using it because you never know whether it will be permanent and if you build something based on it and then it gets taken away obviously that could be a big problem, so that is the rich response types, those are the list of rich response types which are supported by the dialogue flow messenger integration.
Note: This is my old website and is in maintenance mode. I am publishing new articles only on my new website.
If you are not sure where to start on my new website, I recommend the following article:
