Accordion Type

(Autogenerated transcript)

 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 doesn't take up too much space on the chat widget unless the user wants to see the whole thing. So let's take a look. You can have this accordion type so I'm going to do that. So I'm going to add this show accordion type and I'm going to have show me accordion and then let's delete this. Add a custom payload and let's come back here copy this stuff paste it over here and save it and that's pretty much it. That's what we have and if you were to go to the

 the editor and say show me accordion you can see that it's 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 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's not exactly a major feature what's what's the big deal with that. I actually found out something really surprising and I'm just going to point out right now that I'm not sure if it's a bug or it's a feature or it's 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's what

 I noticed and it's not even mentioned in the documentation so I'm not sure what's going on there. You can see that there are all these fields and then you have this text field in the in the rich content it's 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's because this text field actually supports HTML inside of it. So to show you what that means I'm going to go back here and in this accordion text what I'm going to do is I'm just going to have an inline hyperlink so this is an inline hyperlink so let's do that and a href equals something and let's close the tag

 and I'm going to go to Google and to make it this year let's do a target equals underscore blank so that it opens in a new window and it's saved right. So now I have this well-formed HTML inside of the text field in my accordion control so let's 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've seen is that it actually supports I think it seems to support all the mark

 down elements mark down HTML elements so to show you an example let's just do this right like I'm going to add a paragraph break and then I'm going to add let's say I'm going to add a bold face this is bold face text and let's close it and then add another paragraph line break and then let's do some italics this is italics close it right and then have another line break and then I might have a strikethrough close it you know something like that so let's let's save it and let's see how much of this loads as we might expect it so let's 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's not very obvious but it's 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'm going to do is I'm going to go to this image I used in the previous lesson and take that and paste it here and I'm going to also make sure that I add a line break after that so that it looks a little better

 let's go back to the agent here and let's see show me accordion and there you go so you can see that there's your image and then there's the text and it does look like it's somehow like the arrangement doesn't seem to be very nice and I'm not sure what's going on with that it seems to first of all it seems to center 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 that was that was me okay I made this mistake so let me let me delete that now save it and let's try it again I think this might look much better so let's 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 isn't it with the title and a subtitle and if you click on it it's just going to show all this additional information and it doesn't 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's a trick it's a toggle it's a collapse and expand that's what happens when you do that so this is the feature of the occur accordion response type I did experiment with adding 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's some way to like sort

 of inject any script into the into the html and that also got stripped out so with the fact that it's 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 core so at the moment I'm 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 they make an announcement I would not use html inside the accordion because I'm not sure what's what's 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 if I were to go to the let's say that we go to the info type right which has some I don't remember what's the name of it let's go there so the info type actually has the you know title I think this is not good enough let's 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's 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'm going to run the agent and say show me description so you can see what happened it's actually just rendering the entire text along with the html it's 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 for messenger except for the accordion which for some reason supports pretty much all the html options that you see in markdown flavors so that's what I have observed and again as I said I don't still know if this is just a bug or this is an intentional feature which they just haven't

 announced yet so I would just wait for them to actually make an announcement before I'm using it because you never know whether it will be permanent and if it if you build something based on it and then it gets taken away obviously that that would be a big problem so that's the rich response types those are the list of rich response types which are supported by the dialogue for messenger integration