Flow scenario #3b: Get YouTube channel updates on Kaizala using custom action

In this post, we will see how to get updates of a YouTube channel on Kaizala. This is very similar to the post Flow scenario #3: Get YouTube channel updates on Kaizala, but uses a custom action (or card) to display the update – so that we get the video thumbnail and title on the chat canvas and tapping to open the card will launch the YouTube video.

I will divide the post into 2 parts:

  1. Developing the custom action
  2. Creating / configuring flow

Developing custom action

We will be using a simple card that needs no creation view (since the card would be sent by Flow) and no response view (as we will not be needing a response).

Chat card view

The chat card would have 3 fields: a title text (FIFA 2018 – Highlights), an image (to display the video thumbnail) and a text field to display the YouTube video title. (below is the ChatCardView.json that I have used)

{ "schemaVersion":1, "schema":{ "type":"container", "initialHeight":300, "layout":"vertical", "children":[ { "type":"text", "paddingLeft":10, "paddingRight":10, "string":"FIFA 2018 - Highlights", "fontSize":18, "fontStyle":"bold", "textColor":"#CE222E", "textAlignment":"left", "maxNumberOfLines":2, "marginBottom":10 }, { "type":"image", "height":160, "source":"${Form.properties[CoverImage].value}", "contentMode":"aspectFill", "backgroundColor":"#263749", "marginBottom":10 }, { "type":"text", "paddingLeft":10, "paddingRight":10, "string":"${Form.properties[NewsHeadline].value}", "fontSize":18, "fontStyle":"bold", "textColor":"#32495f", "textAlignment":"left", "maxNumberOfLines":4, "marginBottom":0 } ] }}

White-listing hosts in package.json

Since we would need to open the YouTube video link, we will need to white-list the URL hosts in package.json (shown below). 

Only the hosts listed here will be accessible within the card / action package.

Summary View

We will use the summary view to display the YouTube video. The YouTube video link will be coming in through the NewsUrl property – which we will set the location.href to.

Creating / configuring Flow

We will be creating the flow just like in Flow scenario #3: Get YouTube channel updates on Kaizala, but instead of sending an announcement, we would be using the card created above.

The YouTube channel I have chosen is of FIFA TV which is available as an RSS feed at https://youtube.com/feeds/videos.xml?user=FIFATV. Below is a screenshot of the Flow.

I have initialized a variable VideoId to hold the id of the YouTube video in the particular feed – which is available in the id field of the triggerBody(). Sample id link for a YouTube RSS feed looks like this “id”:”yt:video:F5_vngF38hw”.

In order to extract the video id from this, used the split() function in step 2 above (shown below).

Now that we have the video id, we could get the thumbnail of the video from https://img.youtube.com/vi/<<video-id>>/0.jpg – which is seen in step 3. The final step is to send the action on a Kaizala group by setting the relevant properties.

  • NewsUrl – Primary feed link / link to the YouTube video
  • CoverImage – Media resource of the thumbnail image
  • NewsHeadline – The feed title (which is the YouTube video title)

Closing notes

This Flow sends a card each time a YouTube video is uploaded by FIFA TV and appears like this:

Hope that was helpful. The custom action in this example has been shared here. Let me know if you have questions / comments through the Contact page. Thank you for reading!

Leave a Reply