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

Building LINE Chatbot Using Dialogflow

Building LINE Chatbot Using Dialogflow

B29f42636a5f1249b640473d49aa4514?s=128

LINE Developers Thailand

December 12, 2019
Tweet

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
  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
  3. Why LINE API?

  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
  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
  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
  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.
  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.
  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).
  10. LINE Things An IoT platform from LINE

  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
  12. LIFF WebView that allows seamless integration between CHAT and WEB

  13. Developer LINE MESSAGING API

  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?
  15. None
  16. 60K Active Bots

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. Developer BUILDING A BOT

  25. 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
  26. 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
  27. 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
  28. Developer Send messages directly to users whenever you want. Send

    push messages Your Bot 2.message 1.Push LINE PLATFORM
  29. Message Type Text Sticker Image Video Audio Location

  30. Advanced Messages Types Buttons Confirm Carousel Image Carousel

  31. Imagemaps

  32. Flex Message Menu Flight News Ticket Payment

  33. 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
  34. Rich Menu Rich menu API lets you display different rich

    menus to different users. You can create, link, and manage your rich menus programmatically.
  35. LINE Bot Designer lets you prototype LINE bots faster and

    easier without any programming knowledge. LINE Bot Designer
  36. Get LINE user profile information of users who interact with

    your bot in one-on-one and group chats. Get User Profile
  37. Send messages in group chats and get information about the

    members of the group. Join Group Chats
  38. Developer LAB: BUILDING A BOT

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

  40. Developer BMI Default Fallback Intent Default Welcome Intent BMI -

    custom BMI - custom - no BMI - custom - yes
  41. Developer

  42. 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
  43. LINE Bot Designer Download Here:

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

  45. Developer LINE Front-end Framework (LIFF)

  46. LINE Frontend-End Framework LIFF WebView that allows seamless integration between

    CHAT and WEB
  47. ENHANCE CHATBOT

  48. None
  49. COMPACT TALL FULL MULTI VIEW SIZES

  50. LET’S LIFF!

  51. Steps to create LIFF 1. Prepare HTML, JS and CSS

    2. Import LIFF SDK 3. Using LIFF API 4. Deploy 5. Register LIFF App
  52. https://github.com/line/line-liff-starter

  53. Prerequisite Install node.js $ node --version $ npm install -g

    firebase-tools $ firebase --version
  54. Firebase Hosting https://console.firebase.google.com

  55. 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
  56. https://bit.ly/2ARgfbI

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

  58. Dialogflow

  59. Developer WHAT’S NEXT?

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

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