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

banner

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). 

external urls

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.

show immersive view

 

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.

flow-1

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).

flow-2

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)

send action

Closing notes

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

phone view

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s