Using Flex Message to create World Cup LINE Bot

I’ve released my very first blog about how to use LINE Flex Message to create World Cup Chat Bot 3days ago in Thai.

Then some friends asked me to write it again in English. And This blog is my responsibility to that lovely requests.


After LINE released Flex Message API many weeks ago, It’s my challenge to try and learn about this very interesting things. And then, World Cup’s coming, I thought that it’s a perfect case study to see how complexity Flex Message can support.

For who not yet familiar with LINE Flex Message. Please take a short introduction here.

Then, Let’s see how great is it.


First Flex Message (Welcome Screen)

First of all, I started with very basic Flex Bubble components. I designed a welcome message with 4 menu button and 1 additional LIVE button when a match being lived.

  • header : “FIFA World Cup 2018” Text
  • hero : FIFA World Cup Image
  • body : contains 2 parts
    1. Live Score (button) and
    2. Last Match / Next Match / Schedule / Table Menu (button)
  • footer : View Source (button) to see JSON source of this Flex Message
Welcome Screen

Once you click on “View Source” button you can see raw JSON source of this message like below.
https://gist.github.com/kamnan43/8a754e2e665967c43b4829df4dc4a552

You can simulate this JSON data and see instant result in Flex Message Simulator. (https://developers.line.me/console/fx/)

Flex Simulator

Group Table Screen

Then I designed a bit more detail screen using Carousel Flex Message (1 group per bubble) and each bubble contains

  • header : Group Name
  • hero : Not use
  • body : contains 3 parts nested in vertical box
    1. Table Header (text in horizontal box)
    2. Table Separator (separator)
    3. Team info (text+icon in horizontal box)
  • footer : Schedule Menu (button) and View Source (button)
Table Screen

source :
https://gist.github.com/kamnan43/4dba0111ee8498524602498f3bec7764


Match Screen

I use this component to display Last Match, Next Match and Live Match menu. I designed to use Carousel Flex Message (1 Match per Bubble) and each bubble contains

  • header : Not use
  • hero : Not use
  • body : contains 4 parts
    1. minutes or status of match (text)
    2. match result (horizontal box)
    3. scorer (icon + text in horizontal box nested in vertical box)
    4. yellow/red card (icon + text in horizontal box nested in vertical box)
  • footer : contains 3 parts
    1. group and date time (separator + box)
    2. Head 2 Head , Statistics (button)
    3. View Source (button)
Match Screen

It seems that it’s not necessarily to use all 4 boxes (header, hero, body, footer) in a bubble. This example use only body and footer. In fact only 1 box is required.

source : 
https://gist.github.com/kamnan43/2676a37e9da9f2cb73de14d4434c450a


More challenge

I try to use Flex Message in very complex message to find out what’s limitation of it. And then I found that it’s very impress me.
(You can see source code of these messages with link below)

Statistics Screen : https://gist.github.com/kamnan43/1b7d6a4d61fbcc247f425864073892a3

Statistics Screen

Head to Head Screen: https://gist.github.com/kamnan43/81a35c18d7fe42489890faa10580b423

Head to Head Screen

Schedule Screen : https://gist.github.com/kamnan43/f5ecc9b03cdd2accca8ac7358aaedb42

Schedule Screen

Let’s Try

I’ve made a chat bot with these above contents. Let’s find out how its work.
line://ti/p/@osp8317c

Conclusion

After a short period experiment, I think Flex Message have both pros and cons, description below.

Pros

  • Absolutely, Flex Message beyond old style LINE bot message. It can make more impressive UI, and can adapt to use in more use case.
  • Flex Message structure is similar to nested HTML elements. So it’s easy to understand for web developers.
  • Using “flex” property, made it easy to adjust proportions between components.
  • There’re many properties you can apply to your component such as size, colour, margin, style etc.
  • Even my chat bot using very complex message, but it still not exceed LINE API limitation(10kb for Bubble, 50kb for Carousel). So it’s enough to create more complex message.

Cons

My opinion come from my 2–3 days experiment and I’d like to see other opinions about this thing, If you have any interesting use case, don’t hesitate to share them.

See you next time, Thank you

Disclaimer :

  • FIFA World Cup text and FIFA World Cup picture use in this blog/bot is properties of FIFA.
  • This blog/bot was created for education purpose only. ^-^