Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building LINE Chatbot Using Dialogflow

Building LINE Chatbot Using Dialogflow

LINE Developers Thailand

December 12, 2019
Tweet

More Decks by LINE Developers Thailand

Other Decks in Technology

Transcript

  1. Building LINE Chatbot
    Using Dialogflow
    Warit Wanwithu (Tan)
    Developer Relations, LINE
    Jirawat Karanwittayakarn (Tee)
    Tech Evangelist, LINE
    Maneewan Boontamtarn (Bee)
    Community Manager, LINE

    View full-size slide

  2. • LINE API Ecosystem
    • LAB: Create first LINE Chatbot
    • LAB: Building LINE Chatbot using Dialogflow
    • LAB: Chatbot prototypes using LINE Bot Designer
    • LAB: Introduction to LIFF
    Agenda

    View full-size slide

  3. Why LINE API?

    View full-size slide

  4. Apps Available
    4.6M 30
    Average no. of apps
    on a phone
    7-9
    Average no. of
    daily-used apps
    Sources: Statista & TNS 2018
    APPS OVERFLOW

    View full-size slide

  5. Developer
    Source: Nielsen
    HIGHEST TIME SPENT
    ON APP IN THAILAND
    average time spent on
    smartphone
    average time spent on
    LINE platform
    mins/day
    mins/day
    216
    63
    LINE IN THAILAND
    Source: Nielsen
    44M
    LINE users

    View full-size slide

  6. LINE API ECOSYSTEM
    LINE
    LINE Messaging API
    LINE Notify
    Your
    Website
    Your Chat
    BOT
    /Service
    LINE Login
    Rich Menu
    Quick Reply
    LIFF
    LINE Pay
    LINE Beacon
    LINE Things

    View full-size slide

  7. LINE Login
    LINE Login lets people easily create an account for your app or website using their LINE accounts.
    You can integrate LINE Login into your iOS, Android, or web app.

    View full-size slide

  8. LINE Notify
    Get notifications from LINE Notify's official account after connecting with your preferred web services.
    You can receive notifications from multiple services in groups or 1-on-1 chats.

    View full-size slide

  9. LINE Beacon
    LINE Beacon is a new service that lets you receive coupons, information about sales
    and special messages on LINE via the official accounts of stores outfitted with Beacons (Bluetooth transmitters).

    View full-size slide

  10. LINE Things
    An IoT platform from LINE

    View full-size slide

  11. LINE Pay
    Grow your business with LINE Pay. A simple and secure way to pay.
    LINE Pay provides secure and trustworthy service through its compliance with PCI DSS

    View full-size slide

  12. LIFF
    WebView that allows seamless integration between CHAT and WEB

    View full-size slide

  13. Developer
    LINE MESSAGING API

    View full-size slide

  14. ● Be able to send messages to 1-on-1 chat or group chats
    ● Push and reply messages
    ● The perfect message type for every occasion
    The Messaging API lets you develop Chatbot between your service and LINE users.
    What is LINE Messaging API?

    View full-size slide

  15. 60K
    Active Bots

    View full-size slide

  16. Developer
    BUILDING A BOT

    View full-size slide

  17. When a user sends your bot a message, a webhook is triggered and the LINE Platform sends a request to your webhook URL.
    How it works
    LINE APP
    LINE Bot
    Platform
    1.request
    4.response
    Your Bot
    2.webhook
    3.API call

    View full-size slide

  18. Webhook Event Object
    Message event Text, Image, Video, Audio, File, Location, Sticker
    Follow event Bot is added or unblocked
    Unfollow event Bot is blocked
    Join event Bot joins a group or room
    Leave event Bot leave a group or room
    Member join event User joins a group or room
    Member leave event User leaves a group or room
    Postback event User performs a postback action
    Beacon event User enters or leaves the range
    Account link event User has linked his/her LINE account with a provider's service account
    Device link event LINE Things device has been linked with LINE by a user operation
    Device unlink event LINE Things device has been unlinked from LINE by a user operation

    View full-size slide

  19. Developer
    Reply with a message to users who interacts with your bot. Requires a reply token in the request
    Send reply messages
    LINE
    PLATFORM
    1.message
    /event
    4.message
    2.webhook
    3.Reply
    Your Bot

    View full-size slide

  20. Developer
    Send messages directly to users whenever you want.
    Send push messages
    Your Bot
    2.message 1.Push
    LINE
    PLATFORM

    View full-size slide

  21. Message Type
    Text Sticker Image Video Audio Location

    View full-size slide

  22. Advanced Messages Types
    Buttons Confirm Carousel Image Carousel

    View full-size slide

  23. Flex Message
    Menu Flight News Ticket Payment

    View full-size slide

  24. When a user receives a message that contains quick reply buttons from a bot,
    those buttons appear at the bottom of the chat screen.
    Quick Reply

    View full-size slide

  25. Rich Menu
    Rich menu API lets you display different rich menus to different users.
    You can create, link, and manage your rich menus programmatically.

    View full-size slide

  26. LINE Bot Designer lets you prototype LINE bots faster and easier without any programming knowledge.
    LINE Bot Designer

    View full-size slide

  27. Get LINE user profile information of users who interact with your bot in one-on-one and group chats.
    Get User Profile

    View full-size slide

  28. Send messages in group chats and get information about the members of the group.
    Join Group Chats

    View full-size slide

  29. Developer
    LAB: BUILDING A BOT

    View full-size slide

  30. Developer
    https://manager.line.biz

    View full-size slide

  31. Developer
    BMI
    Default Fallback Intent
    Default Welcome Intent
    BMI - custom BMI - custom - no
    BMI - custom - yes

    View full-size slide

  32. 1. Download Bot Designer:
    https://developers.line.biz/en/services/bot-designer/
    2. Image:
    https://lin.ee/duuVtyR
    3. Rich Menu Maker:
    https://lineforbusiness.com/richmenumaker/
    Before we start

    View full-size slide

  33. LINE Bot Designer
    Download Here:

    View full-size slide

  34. Create Rich Menu with
    Rich Menu Maker
    https://lineforbusiness.com/richmenumaker/

    View full-size slide

  35. Developer
    LINE Front-end Framework (LIFF)

    View full-size slide

  36. LINE Frontend-End Framework
    LIFF
    WebView that allows seamless integration between
    CHAT and WEB

    View full-size slide

  37. ENHANCE CHATBOT

    View full-size slide

  38. COMPACT TALL FULL
    MULTI VIEW SIZES

    View full-size slide

  39. LET’S LIFF!

    View full-size slide

  40. Steps to create LIFF
    1. Prepare HTML, JS and CSS
    2. Import LIFF SDK
    3. Using LIFF API
    4. Deploy
    5. Register LIFF App

    View full-size slide

  41. https://github.com/line/line-liff-starter

    View full-size slide

  42. Prerequisite
    Install node.js
    $ node --version
    $ npm install -g firebase-tools
    $ firebase --version

    View full-size slide

  43. Firebase
    Hosting
    https://console.firebase.google.com

    View full-size slide

  44. 4. Deploy
    $ cd Desktop
    $ mkdir liff-demo (Create new folder in Desktop)
    $ cd liff-demo
    $ firebase login
    $ firebase init
    copy index.html, liff-starter.js, style.css to ‘public’ folder
    $ firebase deploy

    View full-size slide

  45. https://bit.ly/2ARgfbI

    View full-size slide

  46. 5. Register LIFF App
    https://developers.line.biz/console/

    View full-size slide

  47. Developer
    WHAT’S NEXT?

    View full-size slide

  48. FREE! Online course
    https://www.skooldio.com

    View full-size slide

  49. fb.com/groups/linedevth
    Medium.com/linedevth
    @linedevth
    Follow us
    youtube.com/c/LINEDevelopersThailand
    fb.com/linedevth

    View full-size slide