Creating a "ServiceNow Video Card" for Virtual Agent Video Output

Mark Roethof · ‎02-27-2022

Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Hi there,

With the Rome-release, the Virtual Agent Designer got enhanced with a "Video Output" Bot Response. Finally, as it replaces a Virtual Agent Topic Block which I developed four releases earlier.

Out-of-the-box, the Video Output Bot Response comes with a "YouTube" Video Card. Though what if you are after something different, Vimeo, SharePoint, Google Drive, or a video which is stored in your instance Attachments table [sys_attachment]?

The ServiceNow Product Documention mentions "As of the Rome release, only YouTube videos are supported." I strongly disagree with this! It should be more like, out-of-the-box only an option for YouTube has been provided. In a previous article, we already created our own Vimeo Video Card. This time, let's create our own ServiceNow Video Card.

Video Output Bot Response

The Bot Response which we are after in this article:

Out-of-the-box, there's only one Card Type available to select, the YouTube Video Card:

Adapter Card & Adapter Card Template

Did you notice the link on "To view supported channels, open YouTube Video Card"? This link points to the Adapter Card record [sys_cs_adapter_card] of the YouTube Video Card. Seeing this Adapter Card record, this should give possibilities to create our own Adapter Card records and with that new Card Types to select in the Video Output Bot Response.

While looking at the YouTube Video Card Adapter Card record, it gives a really good idea of how it works. You can add/select a thumbnail that will be visible in the Virtual Agent Designer in the Response Properties under Template (see the second image). In the field "Fields" you can build JSON which makes up the fields displayed in the Response Properties after the Template thumbnail. The actual fields needed, depends on the Adapter Card Template Record associated.

The associated Adapter Card Template record [sys_cs_adapter_card_template], holds the "Channel" for the Adapter Card record. Amongst others, you will see "Web Client" as an option, which is the one we are after when working with the Virtual Agent client on a Portal. The most important part of the Adapter Card Template record: the HTML in "Template Definition". The Template Definition basically holds the Body and Style of how the Video Card should look, and the Fields defined in the parent Adapter Card record can be used within the Body.

Embed ServiceNow video

Having seen the Adapter Card and the Adapter Card Template, let's create our own! Personally I like the look and feel of the out-of-the-box YouTube Card Type, so let's duplicate the Adapter Card and the Adapter Card Template for Channel "Web Client". Within Template Definition on the Adapter Card Template, locate the "iframe" tag. This is the part we need to update.

<iframe class="video-preview" src="https://www.youtube.com/embed/{{id}}" title="{{title}}">
</iframe>

Instead of "https://www.youtube.com/embed/{{id}}", for ServiceNow we only need the filename of the Attachment record which we will be passing through the Adapter Card record, so something like "{{id}}" should be it. If you would test this within the Virtual Agent Designer preview, no error is thrown, though also no video is presented.

So there might be a different way needed for embedding a ServiceNow video attachment. The most used place for adding a ServiceNow video in an instance would be any field of type HTML. After selecting a random video, the example code would be something like:

<video class="video-preview" contenteditable="false" src="{{filename}}" controls="controls">
</video>

Result

After applying the updated HTML, the result would look something like:

And that's it! We just created our own ServiceNow Video Card which we can use within the Virtual Agent Designer and which is compatible with use on the Virtual Agent client on a Portal.

Share

An Update Set with the ServiceNow Video Card can be downloaded from Share:
- "ServiceNow Video Card" for Virtual Agent Video Output Bot Response

---

And that's it. Hope you like it. If any questions or remarks, let me know!

C	If this content helped you, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more Articles, Blogs, Videos, Podcasts, Share projects I shared/participated in? - Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Kind regards,

Mark Roethof

ServiceNow Technical Platform Architect @ Eraneous

3x ServiceNow Developer MVP

3x ServiceNow Community MVP

---

Neschal Naidoo · ‎08-29-2022

How does one Duplicate the Adapter Card and the Adapter Card Template for Channel "Web Client". Within Template Definition on the Adapter Card Template?

Tim_Clark · ‎07-24-2023

Has anyone been able to add this type of functionality to Microsoft Teams? The template is Json:

{
  "message":  "{{data.message}}",
  "messageHeading":"{{data.messageHeading}}",
  "imageUrl":"{{data.imageUrl}}",
  "youtubeUrl":"{{data.youtubeUrl}}",
  "titleUrl":"{{data.titleUrl}}",
  "description":"{{data.description}}",
}

I suspect this is then translated into an adaptive card using the scripts that come with the Teams plugin, but I have not been able to find much documentation or examples on this. Hoping someone out there has done some Teams modifications and willing to shed some light.

WhyayeFletch · ‎11-30-2023

@Tim_Clark I know this was a while ago, but unless you still need this, and for anyone else's benefit.

The script includes
MSTeamsYoutubeCardBuilder
MSTeamsAdaptiveCardBuilder
MSTeamsAdapterConstants

hold the key to how Teams incorporates videos into it's VA conversations. You'll need to mimic this for internal ServiceNow held videos, but this will involve quite a bit of work.