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

• 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 

Why LINE API? 

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 

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 

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 

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. 

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. 

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

LINE Things An IoT platform from LINE 

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 

LIFF WebView that allows seamless integration between CHAT and WEB 

Developer LINE MESSAGING API 

● 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? 

No content

60K Active Bots 

No content

No content

No content

No content

No content

No content

No content

Developer BUILDING A BOT 

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 

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 

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 

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

Message Type Text Sticker Image Video Audio Location 

Advanced Messages Types Buttons Confirm Carousel Image Carousel 

Imagemaps 

Flex Message Menu Flight News Ticket Payment 

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 

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

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

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

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

Developer LAB: BUILDING A BOT 

Developer https://manager.line.biz 

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

Developer 

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 

LINE Bot Designer Download Here: 

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

Developer LINE Front-end Framework (LIFF) 

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

ENHANCE CHATBOT 

No content

COMPACT TALL FULL MULTI VIEW SIZES 

LET’S LIFF! 

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

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

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

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

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 

https://bit.ly/2ARgfbI 

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

Dialogflow 

Developer WHAT’S NEXT? 

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

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