You can learn more about LIFF SDK from Line Developers LIFF SDK
To add your web app to LIFF and enable the use of the LIFF, follow the steps below.
- Create a channel for your LIFF app on the console.
- Develop your LIFF app.
- Add your app to LIFF
In this project is step
2. Develop your LIFF app on ReactJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>EZE LIFF</title>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script> <---- add script here
</head>
import React, { Component } from 'react';
import './App.css';
const liff = window.liff;
class App extends Component {
constructor(props) {
super(props);
this.initialize = this.initialize.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.initialize);
}
initialize() {
liff.init((data) => {
//code
});
}
- Get Profile
initialize() {
liff.init(async (data) => {
let profile = await liff.getProfile();
this.setState({
displayName : profile.displayName,
userId : profile.userId,
pictureUrl : profile.pictureUrl,
statusMessage : profile.statusMessage
});
});
}
- Set state on
constructor()
constructor(props) {
...
this.state = {
displayName : '',
userId : '',
pictureUrl : '',
statusMessage : ''
};
}
- Create Close Function by will send message to chat room and close LIFF
closeApp(event) {
event.preventDefault();
liff.sendMessages([{
type: 'text',
text: "Bye Bye!!!"
}]).then(() => {
liff.closeWindow();
});
}
- Add closeApp Function in
constructor()
constructor(props) {
...
this.closeApp = this.closeApp.bind(this);
}
git clone https://github.com/Thammasok/liff-web.git
cd liff-web
npm install or yarn install
- Run project on local
npm run start
- Build project
npm run build
- Run project on Production (By use ExpressJS)
npm run start:service