Skip to content

Instantly share code, notes, and snippets.

@jirawatee

jirawatee/index.html

Last active April 2, 2024 17:14
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jirawatee/93bb2aed206b1432c20cfb4d262a12bb to your computer and use it in GitHub Desktop.
Save jirawatee/93bb2aed206b1432c20cfb4d262a12bb to your computer and use it in GitHub Desktop.
Download ZIP
LIFF Share Target Picker
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<title>My LIFF App</title>
<style>
body { padding: 256px }
button { display: none; width: 50%; padding: 16px 0; margin: 16px auto }
</style>
</head>
<body>
<button id="btnShare" onclick="sendShare()">Share Target Picker</button>
<button id="btnLogin" onclick="liff.login()">Log In</button>
<button id="btnLogOut" onclick="logOut()">Log Out</button>
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script>
async function sendShare() {
const result = await liff.shareTargetPicker([
{
"type": "flex",
"altText": "Flex Message",
"contents": {
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"spacing": "md",
"contents": [
{
"type": "text",
"text": "BROWN'S ADVENTURE",
"size": "xl",
"gravity": "center",
"weight": "bold",
"wrap": true
},
{
"type": "box",
"layout": "vertical",
"spacing": "sm",
"margin": "lg",
"contents": [
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Date",
"flex": 1,
"size": "sm",
"color": "#AAAAAA"
},
{
"type": "text",
"text": "Monday 25, 9:00PM",
"flex": 4,
"size": "sm",
"color": "#666666",
"wrap": true
}
]
},
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Place",
"flex": 1,
"size": "sm",
"color": "#AAAAAA"
},
{
"type": "text",
"text": "LINE Thailand",
"flex": 4,
"size": "sm",
"color": "#666666",
"wrap": true
}
]
},
{
"type": "box",
"layout": "vertical",
"margin": "xxl",
"contents": [
{
"type": "spacer"
},
{
"type": "image",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/linecorp_code_withborder.png",
"size": "xl",
"aspectMode": "cover"
},
{
"type": "text",
"text": "You can enter the theater by using this code instead of a ticket",
"margin": "xxl",
"size": "xs",
"color": "#AAAAAA",
"wrap": true
}
]
}
]
}
]
}
}
}
])
if (result) {
alert(`[${result.status}] Message sent!`)
} else {
const [majorVer, minorVer, patchVer] = (liff.getLineVersion() || "").split('.');
if (minorVer === undefined) {
alert('ShareTargetPicker was canceled in external browser')
return
}
if (parseInt(majorVer) >= 10 && parseInt(minorVer) >= 10 && parseInt(patchVer) > 0) {
alert('ShareTargetPicker was canceled in LINE app')
}
}
}
function logOut() {
liff.logout()
window.location.reload()
}
async function main() {
await liff.init({ liffId: "YOUR-LIFF-ID" })
if (liff.isLoggedIn()) {
document.getElementById("btnShare").style.display = "block"
if (!liff.isInClient()) {
document.getElementById("btnLogOut").style.display = "block"
}
} else {
document.getElementById("btnLogin").style.display = "block"
}
}
main()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment