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 [sys_attachment] table?

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. Let's have a look at how the out-of-the-box YouTube Video Card is made, and how we can create our own Vimeo 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. 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 Vimeo 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 Vimeo we need something like "https://vimeo.com/{{id}}". If you would test this within the Virtual Agent Designer preview, you will notice that the connection is being refused.

Instead of using a normal Vimeo URL, we actually need the URL which allows embedding a Vimeo video. Something like "https://player.vimeo.com/video/{{id}}".