Skip to content

Instantly share code, notes, and snippets.

@PamornT

PamornT/exampleDevCampLiff.js

Last active May 2, 2024 08:35
Show Gist options
  • Save PamornT/e706a33c2c33359f70567fb085f17f26 to your computer and use it in GitHub Desktop.
Save PamornT/e706a33c2c33359f70567fb085f17f26 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
exampleDevCampLiff.js
// Import stylesheets
import './style.css';
// Body element
const body = document.getElementById('body');
// Button elements
const btnSend = document.getElementById('btnSend');
const btnClose = document.getElementById('btnClose');
const btnShare = document.getElementById('btnShare');
const btnLogIn = document.getElementById('btnLogIn');
const btnLogOut = document.getElementById('btnLogOut');
const btnScanCode = document.getElementById('btnScanCode');
const btnOpenWindow = document.getElementById('btnOpenWindow');
// Profile elements
const email = document.getElementById('email');
const userId = document.getElementById('userId');
const pictureUrl = document.getElementById('pictureUrl');
const displayName = document.getElementById('displayName');
const statusMessage = document.getElementById('statusMessage');
// QR element
const code = document.getElementById('code');
const friendShip = document.getElementById('friendShip');
async function main() {
// Initialize LIFF app)
await liff.init({
liffId: 'XXXXXXXX',
withLoginOnExternalBrowser: true,
});
// Try a LIFF function
switch (liff.getOS()) {
case 'android':
body.style.backgroundColor = '#d1f5d3';
break;
case 'ios':
body.style.backgroundColor = '#eeeeee';
break;
}
if (!liff.isInClient()) {
// External Browser
if (liff.isLoggedIn()) {
btnLogIn.style.display = 'none';
btnLogOut.style.display = 'block';
btnShare.style.display = 'block';
btnScanCode.style.display = 'block';
getUserProfile();
getEnvironment();
getFriendship();
} else {
btnLogIn.style.display = 'block';
btnLogOut.style.display = 'none';
}
} else {
// เปิด LIFF อยู่บน Application LINE (In-App Browser)
btnSend.style.display = 'block';
btnShare.style.display = 'block';
btnScanCode.style.display = 'block';
getUserProfile();
getEnvironment();
getFriendship();
}
btnOpenWindow.style.display = 'block';
}
main();
function getEnvironment() {
const language = document.getElementById('Language');
const version = document.getElementById('Version');
const isInClient = document.getElementById('isInClient');
const isLoggedIn = document.getElementById('isLoggedIn');
const os = document.getElementById('OS');
const lineVersion = document.getElementById('LINEVersion');
const isApiAvailable = document.getElementById('isApiAvailable');
const contextType = document.getElementById('ContextType');
language.innerHTML = '<b>Language:</b> ' + liff.getLanguage();
version.innerHTML = '<b>Version:</b> ' + liff.getVersion();
isInClient.innerHTML = '<b>isInClient:</b> ' + liff.isInClient();
isLoggedIn.innerHTML = '<b>isLoggedIn:</b> ' + liff.isLoggedIn();
os.innerHTML = '<b>OS:</b> ' + liff.getOS();
lineVersion.innerHTML = '<b>LINE Version:</b> ' + liff.getLineVersion();
contextType.innerHTML = '<b>Context Type:</b> ' + liff.getContext().type;
isApiAvailable.innerHTML =
'<b>Share Target Picker:</b> ' + liff.isApiAvailable('shareTargetPicker');
}
async function getUserProfile() {
const profile = await liff.getProfile();
pictureUrl.src = profile.pictureUrl;
userId.innerHTML = '<b>userId:</b> ' + profile.userId;
statusMessage.innerHTML = '<b>statusMessage:</b> ' + profile.statusMessage;
displayName.innerHTML = '<b>displayName:</b> ' + profile.displayName;
email.innerHTML = '<b>email:</b> ' + liff.getDecodedIDToken().email;
}
btnLogIn.onclick = () => {
liff.login();
};
btnLogOut.onclick = () => {
liff.logout();
window.location.reload();
};
async function sendMsg() {
if (
liff.getContext().type !== 'none' &&
liff.getContext().type !== 'external'
) {
await liff.sendMessages([
{
type: 'text',
text: 'Your Receipt. thank you',
},
{
type: 'flex',
altText: 'ใบเสร็จของคุณ',
contents: {
type: 'bubble',
body: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'text',
text: 'RECEIPT',
weight: 'bold',
color: '#1DB446',
size: 'sm',
},
{
type: 'text',
text: 'Brown Store',
weight: 'bold',
size: 'xxl',
margin: 'md',
},
{
type: 'text',
text: 'Miraina Tower, 4-1-6 Shinjuku, Tokyo',
size: 'xs',
color: '#aaaaaa',
wrap: true,
},
{
type: 'separator',
margin: 'xxl',
},
{
type: 'box',
layout: 'vertical',
margin: 'xxl',
spacing: 'sm',
contents: [
{
type: 'box',
layout: 'horizontal',
contents: [
{
type: 'text',
text: 'Energy Drink',
size: 'sm',
color: '#555555',
flex: 0,
},
{
type: 'text',
text: '$2.99',
size: 'sm',
color: '#111111',
align: 'end',
},
],
},
{
type: 'box',
layout: 'horizontal',
contents: [
{
type: 'text',
text: 'Chewing Gum',
size: 'sm',
color: '#555555',
flex: 0,
},
{
type: 'text',
text: '$0.99',
size: 'sm',
color: '#111111',
align: 'end',
},
],
},
{
type: 'box',
layout: 'horizontal',
contents: [
{
type: 'text',
text: 'Bottled Water',
size: 'sm',
color: '#555555',
flex: 0,
},
{
type: 'text',
text: '$3.33',
size: 'sm',
color: '#111111',
align: 'end',
},
],
},
{
type: 'separator',
margin: 'xxl',
},
{
type: 'box',
layout: 'horizontal',
margin: 'xxl',
contents: [
{
type: 'text',
text: 'ITEMS',
size: 'sm',
color: '#555555',
},
{
type: 'text',
text: '3',
size: 'sm',
color: '#111111',
align: 'end',
},
],
},
{
type: 'box',
layout: 'horizontal',
contents: [
{
type: 'text',
text: 'TOTAL',
size: 'sm',
color: '#555555',
},
{
type: 'text',
text: '$7.31',
size: 'sm',
color: '#111111',
align: 'end',
},
],
},
{
type: 'box',
layout: 'horizontal',
contents: [
{
type: 'text',
text: 'CASH',
size: 'sm',
color: '#555555',
},
{
type: 'text',
text: '$8.0',
size: 'sm',
color: '#111111',
align: 'end',
},
],
},
{
type: 'box',
layout: 'horizontal',
contents: [
{
type: 'text',
text: 'CHANGE',
size: 'sm',
color: '#555555',
},
{
type: 'text',
text: '$0.69',
size: 'sm',
color: '#111111',
align: 'end',
},
],
},
],
},
{
type: 'separator',
margin: 'xxl',
},
{
type: 'box',
layout: 'horizontal',
margin: 'md',
contents: [
{
type: 'text',
text: 'PAYMENT ID',
size: 'xs',
color: '#aaaaaa',
flex: 0,
},
{
type: 'text',
text: '#743289384279',
color: '#aaaaaa',
size: 'xs',
align: 'end',
},
],
},
],
},
styles: {
footer: {
separator: true,
},
},
},
},
]);
liff.closeWindow();
}
}
btnSend.onclick = () => {
sendMsg();
};
async function shareMsg() {
await liff.shareTargetPicker([
{
type: 'image',
originalContentUrl: 'https://d.line-scdn.net/stf/line-lp/2016_en_02.jpg',
previewImageUrl: 'https://d.line-scdn.net/stf/line-lp/2016_en_02.jpg',
},
{
type: 'flex',
altText: 'Flex Message na ja',
contents: {
type: 'bubble',
hero: {
type: 'image',
url: 'https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png',
size: 'full',
aspectRatio: '20:13',
aspectMode: 'cover',
action: {
type: 'uri',
uri: 'http://linecorp.com/',
},
},
body: {
type: 'box',
layout: 'vertical',
contents: [
{
type: 'text',
text: 'LINE Dev Camp',
weight: 'bold',
size: 'xl',
},
{
type: 'box',
layout: 'baseline',
margin: 'md',
contents: [
{
type: 'icon',
size: 'sm',
url: 'https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png',
},
{
type: 'icon',
size: 'sm',
url: 'https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png',
},
{
type: 'icon',
size: 'sm',
url: 'https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png',
},
{
type: 'icon',
size: 'sm',
url: 'https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png',
},
{
type: 'icon',
size: 'sm',
url: 'https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png',
},
{
type: 'text',
text: '4.0',
size: 'sm',
color: '#999999',
margin: 'md',
flex: 0,
},
],
},
{
type: 'box',
layout: 'vertical',
margin: 'lg',
spacing: 'sm',
contents: [
{
type: 'box',
layout: 'baseline',
spacing: 'sm',
contents: [
{
type: 'text',
text: 'Place',
color: '#aaaaaa',
size: 'sm',
flex: 1,
},
{
type: 'text',
text: 'Online via Zoom',
wrap: true,
color: '#666666',
size: 'sm',
flex: 5,
},
],
},
{
type: 'box',
layout: 'baseline',
spacing: 'sm',
contents: [
{
type: 'text',
text: 'Time',
color: '#aaaaaa',
size: 'sm',
flex: 1,
},
{
type: 'text',
text: '9:30 - 17:00',
wrap: true,
color: '#666666',
size: 'sm',
flex: 5,
},
],
},
],
},
],
},
footer: {
type: 'box',
layout: 'vertical',
spacing: 'sm',
contents: [
{
type: 'button',
style: 'link',
height: 'sm',
action: {
type: 'uri',
label: 'CALL',
uri: 'https://linecorp.com',
},
},
{
type: 'button',
style: 'link',
height: 'sm',
action: {
type: 'uri',
label: 'WEBSITE',
uri: 'https://linecorp.com',
},
},
{
type: 'box',
layout: 'vertical',
contents: [],
margin: 'sm',
},
],
flex: 0,
},
},
},
]);
}
btnShare.onclick = () => {
shareMsg();
};
async function scanCode() {
const result = await liff.scanCodeV2();
code.innerHTML = '<b>Code: </b>' + result.value;
}
btnScanCode.onclick = () => {
scanCode();
};
btnOpenWindow.onclick = () => {
liff.openWindow({
url: 'https://developers.line.biz/en/',
external: true,
});
};
async function getFriendship() {
let msg = 'Hooray! You and our chatbot are friend.';
const friend = await liff.getFriendship();
if (!friend.friendFlag) {
msg = '<a href="https://lin.ee/Nl2OzOj">Follow our chatbot here!</a>';
}
friendShip.innerHTML = msg;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment