all right everyone uh we'll go ahead and get started again welcome to the virtual agent academy uh before we start just some announcements as always uh of course feel free to check out our virtual agent nlu community if you have not already done so the link is below there you can find content from experts you can look up questions ask questions give answers if you like what you're seeing if you're watching this on youtube you like what you're seeing go ahead and click that like and subscribe button down below we do have a playlist of all our virtual agent academy as and as mentioned this video will be recorded and all our other virtual agent academy videos are recorded as well so if you if you have a colleague who's missing out or if you joined in late do not fret you can watch this on youtube later as well but at least here you have live and you can ask questions and so forth um so yeah so today's topic will be on embedding rich media and video into your virtual agent now this now this topic sounds from earlier to you recently it's because uh we have an expert here mark rudolph who wrote an article about it and he's with us here today he is generally one of our vips in the community many of you have probably learned from him or received answers from him well guess what we are lucky to have him here with us live today mark welcome to virtual agent academy this is our agenda for today as always and now i'm going to hand it off to mark to do introductions and to jump right into the details mark go ahead yeah thank you victor good morning good i think i'm sharing my screen at this moment yep okay very good um yeah mark rudolf here um i'm a technical platformer tech at quint um quint is a servicenow partner in the netherlands and yeah you might have seen my name before i do answer a lot of questions on the now community and i've published more than 225 articles blogs and videos and i think about 25 percent uh is on verger agent yeah and also i'm a six-time servicenow mvp um yeah as victor already mentioned the topic for today is embed rich media and video into your virtual agent and the first part of today's virtual agent academy will be about adding header cards header cards have been introduced with the rom release it's been made possible to add a header card or card for the user input static choice user input reference choice and what response card these header cards can help in presenting information within a conversation before the rome release this was um kinda already possible now all scripted and also not um yeah that easy uh scripting yeah with the the roman release this has just been made way easier more reusable consistent etc and also out of the box there are some car types already provided you can still script which could be fine if it's just a one-off though if this concerns a card which you you are using multiple times multiple topics or multiple times in a single topic then what i'm sharing today should definitely be looked into [Music] some snippets of the virtual agent designer the first one is the user input static choice and on the right side under the choiceless settings you can choose insert a header card you would fill out some fields and then select the car type that you are after in the modal and this yeah this is the result how it could look like first you'll see a prompt then a header card and then the actual choice list and the second one i'm waiting yeah that's the next slide the second one is the user input reference choice it's similar to the static choice also here under the choice list settings you can choose insert a header card you would fill out some fields and just select the card that you are after in the model and the result could be something like this a prompt a header card and then the actual reference choices the third one is a response card and yeah here this one looks a little bit different but same principle on the right side under the card basic info you can choose the card type you would fill out some fields and that's it and the result could be something like this i've got two examples here on the left a record card and on the right a card with only which only displays an image a title and a description and yeah the card here on the left that's an um yeah that's an interesting one because that is one that is asked quite often on the now community people asking to modify the look and feel or to remove the url on the top right before the rom release my answer on such question would be well you can skip the card though with the wrong release you would just set up your own card once applying html and css and then simply reuse it through a select box and some configurable fields yeah and the cards are stored within two tables and it all starts with the adapter card table um yeah at this moment i won't go into depth on these three cards specifically as these are closely related to the next part which i'm going to share and on which today's exercise is also on and today's exercise will be on creating bot response video output video cards yeah you might have read on the surfnap product documentation that for the bot response video output only youtube videos are supported i believe the wording used on the product documentation is a bit off it's more like out of the box only a car type for youtube has been provided in a bit i'll just show how you can add a [Music] vimeo video card also a video card for videos stored within your servicenow instance and first again a snippet of the third agent designer yeah it's a bit similar to the bot response card which we saw earlier on the on the right side in the the card basic info you can choose the car type you would fill out some fields yeah and that's it and now i just want to switch to the exercise to yeah demonstrate this um yeah in a servicenow instance i am using a san diego instance so it might look a little bit different though everything i'm showing today is the same as within a rom instance victor can you confirm that you are seeing my instance i unfortunately i still see your exercise slide um maybe i can reshare let's first open the virtual agent designer and yeah there it is and i already set up a draft topic yeah and here well here in the center you see the video card and um yeah when clicking the video card here you've got the the car type on the right side and yeah notice out of the box there's only one option available well after selecting this option you would fill in some fields here and that's it the id field that's what you would see also in the in the url of your browser in this case i created already some skipped variables which hold the correct ids so let's just select the script variable for youtube and let's save and test the topic so it's loading yeah yeah and here we already see the yeah the bot respawns video card we could play the video this looks this looks fine though um yeah like i mentioned out of the box only a youtube card type is provided so what if we would like to add another card type for example for vimeo videos so let's navigate to the adapters card adapter cards table which i mentioned before so that's cis cs adopter card and then filter for video cards yeah there it is yeah you might notice that i'm using sn utils but that's just for quicker uh navigating um yeah here we have the youtube video card let's open the adopter card and you see well the the card name of course then a field field which holds all input fields which are shown in the virtual agent design which are actually used to make the video card dynamically and also good to mention we've got here a field thumbnail and that holds the image which is shown within the virtual agent designer and on the bottom we've got some yeah one related list for the adapter card templates and this these templates hold how the card itself uh actually look like so this is also the place you would go to if it concerns changing the look and feel of a card so yeah let's now have a look at creating yeah our own video card we can just reuse this youtube video card this one looks nice out of the box the layout is fine the fields are useful the thumbnail is good so let's change the name of the card into a vimeo video card and let's change this label as well and just do incident stay we do need to add an adap adapter card template so let's just go back to the youtube video card and let's select here the adapter card template for channel web client um yeah maybe good to mention there are multiple adopter card template records here for every channel there's a separate card so if you would like this adapter card to also be possible for teams or for ios or android devices then you would need to yeah create multiple adapter card template records but for now let's just go for web client we were after creating the vimeo video card so we just did this one so we can reuse it in certain state and okay now yeah we do have to look into the template definition and as mentioned this adapter card template holds how the cart actually looks like and this is immediately the connection with the first part of today's virtual agent academy the header cards which i showed before if creating your own or updating existing ones it's all the same structure also an adapter card another card template html and css it's all similar like what we are seeing now for this video card slowly moving down this is just css and here seeing html and notice yeah we just copied the adapter card template which was for youtube so obviously we see here still youtube so this is um yeah this is the part we need to change into vimeo question though is how do we know what the url would be because we can't just change this in in female that won't work um the magic word to remember here is we are embedding a video so you need a url for embedding if you would just yeah use a regular url it just won't work the connection will just not be allowed so yeah let's first switch to a youtube video and see how we can get the embedded url on a youtube video using a right mouse click yeah you will be presented with some options but my browser is in a dutch language setting but you need the option for copying the embedded code and that's it actually and if i now switch to a vimeo video using the share icon which is here you will be presented with modal and with amongst others here the embedded code and that's what we are after for the vimeo video card which we are creating now so let's go back to the search now instance and let's update the source of the iframe tag and that's this part [Music] player dot email com slash video um yeah and i will keep the id part this is the reference to the fields which are defined in the parent adapter card and which will be visible as input in the virtual agent designer so let's save this one let's double check yeah i think this loot looks good um [Music] let's go back to the virtual agent designer again let's add another video output and notice that yeah when clicking the the card type now obviously we see the out of the box youtube video card but we are also now seeing the female video card uh which yeah we just added and after selecting um the vimeo video card notice that you are presented with some fields that would need to be filled in so let's fill in title maybe description snow video and here the id and i'll select the script variable which i've set up before so the vimeo video id let's save and now test the name is empty so female video card save yeah test again so the test is loading [Music] yeah there it is and now already yeah we see the the vimeo video card and um yeah we could play it um if we would like it works instantly so that's really nice we just created our own video card yeah we did only create a new video card to support vimeo videos so if you are after changing the look and feel of the card presented the sizing the colors etc just give it a try play around with it with it as i showed it just involves html and css on the adapter card template record a good thing to mention if you are after adding other video sources for example microsoft stream it's a lot similar like just shown you can reuse the out of the box adapter card and adopt a card template just get your hands on the embedded url important to know is there is a system property which holds which websites are allowed to be displayed within an iframe in servicenow and that's this system property and notice out of the box this system popped the old urls for youtube and for vimeo so if you are after adding a video card for another source like microsoft stream then you would need to update this system property be aware of that hey mark uh some other questions uh while you're covering the exercise here so you covered that other video formats are allowed someone asked about that so stream i imagine any other online video for the most part is can be configured on here any limitations um yeah limitations limitations would more be on the authentication side i think if you have to log on uh to a certain source but like what i just showed with youtube and vimeo yeah you just see it it works instantly just get your hands on the the embedded url and obviously the the system property which i just showed because out of the box that system property only holds the urls for youtube and vimeo so if you are just adding another source and it's not in that system property it won't work got it and another person asks um can we have all card templates controlled essentially regardless of channel so if we updated template on the web client it would update it would also update teams etc um it seems based on our existing structure the answer that is no but mark do you have any insights into that um you might be able to have some cards which are more generic but for example the the card for teams is really different so you can't make just one adapter card template for all uh channels that that won't be uh that would certainly not be possible yeah that makes sense because you know the way a mobile phone displays things versus say you know browsers is very different so i think our i think our team uh anticipated that increased different templates for that yeah and then the last question from this year do we need any special plugins to run other adapted cards i believe the answer to that is no all you need is the base uh virtual agent plug-in is that correct well yeah it's a nice question but yeah it's correct that you don't need additional plugins or something which i just showed the adapter cards template and the adapter card table that's just what you need so no additional uh plugins or anything else no cool and then uh last question uh is there anything preventing uh a customer from using internal video sources inside of the firewall so let's say they are authenticated inside like say a portal uh would they be able to view video sources there um or your mileage may vary perhaps yeah not sure not sure i think that would also have to do with with authentication but that's also if it's now a video on on youtube which is protected because you first need to log on or it's a video on sharepoint for example then you would need to take care of the the authentication part [Music] yeah so i would yeah i agree i would say your mouth it would depend on your implementation of where exactly your your video is sourced from so that's more of an experiment experimentation thing perhaps um katie katie asks can live streams be added uh i haven't tried that's a nice question um yeah i haven't tried if so because if you're speaking from a live stream that's on youtube like a public live stream like a concert you probably can you mean your timing have to be very good to join at the right time but yeah i don't see why that wouldn't work yeah i think because technically for for youtube it will be the same kind of of url and id that you're using so i would guess it's possible but yeah i just never tried um [Music] but yeah it's a nice one to yeah to try sometime yeah that'd be cool like to just like create a note you can create a notification saying hey your company all hands is starting was like to view it let's assume it's it's public because it probably isn't but yeah it's possible yeah um cool so yeah that's um if folks have any other questions feel free to type them in uh mark that's all we have for questions so far did you have anything else you wanted to cover um i've got a really small part on creating another video card but then from videos which are actually stored within your own servicenow instance um so let me go to the adopter cards again and yeah here we've got the the youtube video card um let's change this in into service now so it's similar like what i did before i'll do an incident stay and then just like before we need to add an adapter card template record so just take again the one for web client just connect this to adapter card which we just [Music] added and that's it but now if we move down [Music] to the end here we've got the iframe part which we do need to update the question is with what exactly because yeah surf's now videos are stored within your own instance um so we don't have an embedded url um well what i would use for this is um there's a html type field um everywhere in servicenow you can just add images but also videos so if we would do that then we could also get our hands on the actual code so i'll just go to a new knowledge article and there it is and within the html type field let's now just add a video i've got two videos on my uh instance sled let's add this one and now if we look at the source code yeah we see and this is interesting because with youtube and vimeo we were we were using an iframe tag and notice this is actually a video tag so this is completely different so let's copy this part and now back in our adapter cart template let's add the code here we will replace the source with um id and we'll just take over the class so it looks it has the same look and feel this could be it save and now let's just switch back to the first region designer and let's add another video output response here and if we click on the card type select box here yeah you'll see the youtube video card the vimeo video card but also the serves now video card which i just created so let's select it and again we need to fill in spam fields [Music] video card let's add here the title search now video card and here select the id and that again from the script variables which are already added before this would hold yeah the id of the video which is stored on your surfnow instance now let's save and let's test to see if this is working so it's loading [Music] yeah now we are presented with yeah serves now video card we could play the video um yeah that's it it just works instantly yeah we just created two new video cards awesome how are we on time uh we are overtime unfortunately so i'm gonna have to wrap it up that's if that's okay any closing thoughts mark before i uh take us to the end [Music] no um closing thoughts would just be you know go and play around with this create your own header cards create your own video cards like i showed it's just html and css and you have to set it up once and then it's simply reusing it using a select box so yeah just go after it cool well thank you so much mark for showing us how to innate how to embed the static cards uh the static choice cards and the header cards uh showing us all these cool videos as a reminder everyone this will be recorded uh and available on youtube in this coming days uh thank you everyone for joining us uh for uh in in two weeks we will not have an academy on march 8th we're gonna we're gonna skip that week it's uh there's a company event but then uh the following tuesday so march 22nd we will continue with our virtual agent academy i would be presenting that one it'll be lots of fun i guarantee it so i will see you on the next academy thank you mark for for your time today is super helpful and thank you all for joining us and we'll see you all soon take care bye